1. 項目優化策略

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）。為了將項目的開發過程與發布過程分離，我們可以為兩種模式，各自指定打包的入口文件，即：
① 開發模式的入口文件為 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')
})
} }

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"  />
<!-- 富文本編輯器 的樣式表文件 -->
<link rel="stylesheet"  />
<link rel="stylesheet"  />
<link rel="stylesheet"  />

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

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"  />
<!-- 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. 路由懶加載

當打包構建項目時，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')

關于路由懶加載的詳細文檔，可參考如下鏈接：
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')
})

2. 開啟 gzip 配置

使用 gzip 可以減小文件體積，使傳輸速度更快。
② 可以通過服務器端使用 Express 做 gzip 壓縮。其配置如下：

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

3. 配置 HTTPS 服務

為什么要啟用 HTTPS 服務？

• 傳統的 HTTP 協議傳輸的數據都是明文，不安全
• 采用 HTTPS 協議對傳輸的數據進行了加密處理，可以防止數據被中間人竊取，使用更安全
  申請 SSL 證書
  ① 進入 https://freessl.cn/ 官網，輸入要申請的域名并選擇品牌。
  ② 輸入自己的郵箱并選擇相關選項。
  ③ 驗證 DNS（在域名管理后臺添加 TXT 記錄）。
  ④ 驗證通過之后，下載 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 管理應用

① 在服務器中安裝 pm2：npm i pm2 -g
② 啟動項目：pm2 start 腳本(入口文件app.js) --name (自定義名稱創建后可使用id)
③ 查看運行項目：pm2 ls
④ 重啟項目：pm2 restart 自定義名稱
⑤ 停止項目：pm2 stop 自定義名稱
⑥ 刪除項目：pm2 delete 自定義名稱
比如pm2 start app.js(tab鍵) web_vueshop