1. 專案優化策略

1.1 生成打包報告

通過視覺化的UI面板直接檢視報告（推薦） 任務 => build

在視覺化的UI面板中，通過控制檯和分析面板，可以方便地看到專案中所存在的問題。

1.2 通過vue.config.js修改webpack的預設配置

// vue.config.js 
 // 這個檔案中，應該匯出一個包含了自定義配置選項的物件
 module.exports = {
 // 選項...
 }

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

預設情況下，Vue專案的開發模式與釋出模式，共用同一個打包的入口檔案（即 src/main.js）。為了將專案

的開發過程與釋出過程分離，我們可以為兩種模式，各自指定打包的入口檔案，即：

① 開發模式的入口檔案為 src/main-dev.js

② 釋出模式的入口檔案為 src/main-prod.js

1.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-相關

1.5 通過 chainWebpack 自定義打包入口

//  建立main-prod.js和main-dev.jsdev.js
module.exports = {
 chainWebpack: config => {
 	// 生產環境 config.when判斷  process.env.NODE_ENV拿到當前編譯模式
 	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')
 	})
} 
}
 

1.6 通過 externals 載入外部 CDN 資源

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

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

有這個包會直接到全域性查詢

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

同時，需要在 public/index.html 檔案的頭部，新增如下的 CDN 資源引用：註釋掉生產環境中的

<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.6.1/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.2.0/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.21.1/axios.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/[email protected]/dist/vue-quill-editor.js"></script>

1.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>

1.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
 	})
 })
}

1.9 路由懶載入

當打包構建專案時，JavaScript 包會變得非常大，影響頁面載入。如果我們能把不同路由對應的元件分割成

不同的程式碼塊，然後當路由被訪問的時候才載入對應元件，這樣就更加高效了。

具體需要 3 步：

① 安裝 @babel/plugin-syntax-dynamic-import 包。[vue ui 面板中開發依賴]

② 在 babel.config.js 配置檔案中宣告該外掛。

③ 將路由改為按需載入的形式，示例程式碼如下：

// webpackChunkName:分組名(載入的時候就會載入同一組的所有路由)  後面是路徑
// 要註釋掉之前的import
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

2.專案上線

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

再通過pm2管理該伺服器

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）

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

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

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

④ 驗證通過之後，下載 SSL 證書（

full_chain.pem 公鑰；private.key 私鑰）

......

4.使用 pm2 管理應用⭐

使用 pm2 管理應用

可以不用再開啟命令列視窗了

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

② 啟動專案：pm2 start 指令碼(入口檔案) --name 自定義名稱

③ 檢視執行專案：pm2 ls

④ 重啟專案：pm2 restart 自定義名稱(或id)

⑤ 停止專案：pm2 stop 自定義名稱(或id)

⑥ 刪除專案：pm2 delete 自定義名稱(或id)