vue項目優化與部署上線

目錄

• 優化
  • 1. 生成打包報告
  • 2. 通過 vue.config.js 修改 webpack 的默認配置
  • 3. 為開發模式與發布模式指定不同的打包入口
  • 4. configureWebpack 和 chainWebpack
  • 5. 通過 chainWebpack 自定義打包入口
  • 6. 通過 externals 加載外部 CDN 資源
  • 7. 通過 CDN 優化 ElementUI 的打包
  • 8. 首頁內容定制
  • 9.3 路由懶加載
• 部署上線
  • 1. 通過 node 創建 web 服務器
  • 2. 開啟 gzip 配置
  • 3. 配置 HTTPS 服務
  • 4. 使用 pm2 管理應用

優化

項目優化策略

1. 生成打包報告
2. 第三方庫啟用 CDN
3. Element-UI 組件按需加載
4. 路由懶加載
5. 首頁內容定制

1. 生成打包報告

打包時，為了直觀地發現項目中存在的問題，可以在打包時生成報告。生成報告的方式有兩種：

① 通過命令行參數的形式生成報告

// 通過 vue-cli 的命令選項可以生成打包報告
// --report 選項可以生成 report.html 以幫助分析包內容
vue-cli-service build --report

② 通過可視化的UI面板直接查看報告（推薦）

​ 在可視化的UI面板中，通過控制台和分析面板，可以方便地看到項目中所存在的問題。

2. 通過 vue.config.js 修改 webpack 的默認配置

通過 vue-cli 3.0 工具生成的項目，默認隱藏了所有 webpack 的配置項，目的是為了屏蔽項目的配置過程，讓程 序員把工作的重心，放到具體功能和業務邏輯的實現上。

如果程序員有修改 webpack 默認配置的需求，可以在項目根目錄中，按需創建 vue.config.js 這個配置文件，從 而對項目的打包發布過程做自定義的配置（具體配置參考 https://cli.vuejs.org/zh/config/#vue-config-js）。

// vue.config.js
 // 這個文件中，應該導出一個包含了自定義配置選項的對象
 module.exports = {
 	// 選項...
 }

3. 為開發模式與發布模式指定不同的打包入口

默認情況下，Vue項目的開發模式與發布模式，共用同一個打包的入口文件（即 src/main.js）。為了將項目 的開發過程與發布過程分離，我們可以為兩種模式，各自指定打包的入口文件，即：

1. 開發模式的入口文件為 src/main-dev.js
2. 發布模式的入口文件為 src/main-prod.js

4. configureWebpack 和 chainWebpack

在 vue.config.js 導出的配置對象中，新增 configureWebpack 或 chainWebpack 節點，來自定義 webpack 的打包配置。

在這里， configureWebpack 和 chainWebpack 的作用相同，唯一的區別就是它們修改 webpack 配置的方 式不同：

1. chainWebpack 通過鏈式編程的形式，來修改默認的 webpack 配置
2. configureWebpack 通過操作對象的形式，來修改默認的 webpack 配置

兩者具體的使用差異，可參考如下網址： https://cli.vuejs.org/zh/guide/webpack.html#webpack-相關

5. 通過 chainWebpack 自定義打包入口

代碼示例如下：

module.exports = {
	chainWebpack: config => {
		config.when(process.env.NODE_ENV === 'production', config => {
			config.entry('app').clear().add('./src/main-prod.js')
		})
		config.when(process.env.NODE_ENV === 'development', config => {
			config.entry('app').clear().add('./src/main-dev.js')
		})
	}
}

6. 通過 externals 加載外部 CDN 資源

默認情況下，通過 import 語法導入的第三方依賴包，最終會被打包合並到同一個文件中，從而導致打包成功后，單文件體積過大的問題。

為了解決上述問題，可以通過 webpack 的 externals 節點，來配置並加載外部的 CDN 資源。凡是聲明在 externals 中的第三方依賴包，都不會被打包。

具體配置代碼如下：

config.set('externals', {
	vue: 'Vue',
	'vue-router': 'VueRouter',
	axios: 'axios',
	lodash: '_',
	echarts: 'echarts',
	nprogress: 'NProgress',
	'vue-quill-editor': 'VueQuillEditor'
})

同時，需要在 public/index.html 文件的頭部，添加如下的 CDN 資源引用：

<!-- nprogress 的樣式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
<!-- 富文本編輯器 的樣式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />

<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
<!-- 富文本編輯器的 js 文件 -->
<script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>

7. 通過 CDN 優化 ElementUI 的打包

雖然在開發階段，我們啟用了 element-ui 組件的按需加載，盡可能的減少了打包的體積，但是那些被按需加 載的組件，還是占用了較大的文件體積。此時，我們可以將 element-ui 中的組件，也通過 CDN 的形式來加 載，這樣能夠進一步減小打包后的文件體積。

具體操作流程如下：

1. 在 main-prod.js 中，注釋掉 element-ui 按需加載的代碼
2. 在 index.html 的頭部區域中，通過 CDN 加載 element-ui 的 js 和 css 樣式

<!-- element-ui 的樣式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/themechalk/index.css" />
<!-- element-ui 的 js 文件 -->
<script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>

8. 首頁內容定制

不同的打包環境下，首頁內容可能會有所不同。我們可以通過插件的方式進行定制，插件配置如下：

chainWebpack: config => {
	config.when(process.env.NODE_ENV === 'production', config => {
		config.plugin('html').tap(args => {
			args[0].isProd = true
			return args
		})
	})
	config.when(process.env.NODE_ENV === 'development', config => {
		config.plugin('html').tap(args => {
			args[0].isProd = false
			return args
		})
	})
}

在 public/index.html 首頁中，可以根據 isProd 的值，來決定如何渲染頁面結構：

<!– 按需渲染頁面的標題 -->
<title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>電商后台管理系統</title>
<!– 按需加載外部的 CDN 資源 -->
<% if(htmlWebpackPlugin.options.isProd) { %>
<!—通過 externals 加載的外部 CDN 資源-->
<% } %>

9.3 路由懶加載

當打包構建項目時，JavaScript 包會變得非常大，影響頁面加載。如果我們能把不同路由對應的組件分割成 不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了。

具體需要 3 步：

1. 安裝 @babel/plugin-syntax-dynamic-import 包。

2. 在 babel.config.js 配置文件中聲明該插件。

3. 將路由改為按需加載的形式，示例代碼如下：

   const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
   const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
   const Baz = () => import(/* webpackChunkName: "group-boo" */ './Baz.vue')
   

關於路由懶加載的詳細文檔，可參考如下鏈接： https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

部署上線

1. 通過 node 創建 web 服務器

創建 node 項目，並安裝 express，通過 express 快速創建 web 服務器，將 vue 打包生成的 dist 文件夾， 托管為靜態資源即可，關鍵代碼如下：

const express = require('express')
// 創建 web 服務器
const app = express()
// 托管靜態資源
app.use(express.static('./dist'))
// 啟動 web 服務器
app.listen(80, () => {
	console.log('web server running at http://127.0.0.1')
})

2. 開啟 gzip 配置

使用 gzip 可以減小文件體積，使傳輸速度更快。

可以通過服務器端使用 Express 做 gzip 壓縮。其配置如下：

 // 安裝相應包
 npm install compression -S
 // 導入包
 const compression = require('compression');
 // 啟用中間件
 app.use(compression());

3. 配置 HTTPS 服務

為什么要啟用 HTTPS 服務？

• 傳統的 HTTP 協議傳輸的數據都是明文，不安全

• 采用 HTTPS 協議對傳輸的數據進行了加密處理，可以防止數據被中間人竊取，使用更安全

申請 SSL 證書（https://freessl.org）

1. 進入 https://freessl.cn/ 官網，輸入要申請的域名並選擇品牌。
2. 輸入自己的郵箱並選擇相關選項。
3. 驗證 DNS（在域名管理后台添加 TXT 記錄）。
4. 驗證通過之后，下載 SSL 證書（ full_chain.pem 公鑰；private.key 私鑰）。

在后台項目中導入證書

const https = require('https');
 const fs = require('fs');
 const options = {
 	cert: fs.readFileSync('./full_chain.pem'),
 	key: fs.readFileSync('./private.key')
 }
 https.createServer(options, app).listen(443);

4. 使用 pm2 管理應用

1. 在服務器中安裝 pm2：npm i pm2 -g
2. 啟動項目：pm2 start 腳本 --name 自定義名稱
3. 查看運行項目：pm2 ls
4. 重啟項目：pm2 restart 自定義名稱
5. 停止項目：pm2 stop 自定義名稱
6. 刪除項目：pm2 delete 自定義名稱