電商後臺管理系統

一.專案優化策略

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 = {
 // 選項...
 }
12345

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

預設情況下，Vue專案的開發模式與釋出模式，共用同一個打包的入口檔案（即 src/main.js）。為了將專案的開發過程與釋出過程分離，我們可以為兩種模式，各自指定打包的入口檔案，即：
① 開發模式的入口檔案為 src/main-dev.js
② 釋出模式的入口檔案為 src/main-prod.js

4. configureWebpack 和 chainWebpack

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

在這裡， configureWebpack 和 chainWebpack 的作用相同，唯一的區別就是它們修改 webpack 配置的方
式不同：
① chainWebpack 通過鏈式程式設計的形式，來修改預設的 webpack 配置
② configureWebpack 通過操作物件的形式，來修改預設的 webpack 配置

兩者具體的使用差異，可參考如下網址：
https://cli.vuejs.org/zh/guide/webpack.html#webpack-%E7%9B%B8%E5%85%B3

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')
 })
} }
123456789

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

預設情況下，通過 import 語法匯入的第三方依賴包，最終會被打包合併到同一個檔案中，從而導致打包成功後，單檔案體積過大的問題。

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

6. 1通過 externals 載入外部 CDN 資源

具體配置程式碼如下：

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

6.2 通過 externals 載入外部 CDN 資源

同時，需要在 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" />
123456

6.3 通過 externals 載入外部 CDN 資源

同時，需要在 public/index.html 檔案的頭部，新增如下的 CDN 資源引用：

<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>
123456789

7.通過 CDN 優化 ElementUI 的打包

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

具體操作流程如下：

① 在 main-prod.js 中，註釋掉 element-ui 按需載入的程式碼
② 在 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>
123

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
 })
 })
}
1234567891011121314

8.1 首頁內容定製

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

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

9. 路由懶載入

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

具體需要 3 步：

① 安裝 @babel/plugin-syntax-dynamic-import 包。
② 在babel.config.js 配置檔案中宣告該外掛。
③ 將路由改為按需載入的形式，示例程式碼如下：

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

關於路由懶載入的詳細文件，可參考如下連結：

https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

二.專案上線

專案上線相關配置

1. 通過 node 建立 web 伺服器。
2. 開啟 gzip 配置。
3. 配置 https 服務。
4. 使用 pm2 管理應用。

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')
})
123456789

2. 開啟 gzip 配置

使用 gzip可以減小檔案體積，使傳輸速度更快

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

// 安裝相應包
 npm install compression -S
 // 匯入包
 const compression = require('compression');
 // 啟用中介軟體
 app.use(compression());

3. 配置 HTTPS 服務

為什麼要啟用 HTTPS 服務？

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

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

3. 配置 HTTPS 服務

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

① 進入 https://freessl.cn/ 官網，輸入要申請的域名並選擇品牌。

② 輸入自己的郵箱並選擇相關選項。

③ 驗證 DNS（在域名管理後臺新增 TXT 記錄）。

④ 驗證通過之後，下載 SSL 證照（ full_chain.pem 公鑰；private.key 私鑰）

3. 配置 HTTPS 服務

**在後臺專案中匯入證照**

 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 管理應用

① 在伺服器中安裝 pm2：npm i pm2 -g

② 啟動專案：pm2 start 指令碼 --name 自定義名稱

③ 檢視執行專案：pm2 ls

④ 重啟專案：pm2 restart 自定義名稱

⑤ 停止專案：pm2 stop 自定義名稱

⑥ 刪除專案：pm2 delete 自定義名稱