項(xiàng)目?jī)?yōu)化上線

目標(biāo)：優(yōu)化Vue項(xiàng)目+部署Vue項(xiàng)目（上線提供使用）

項(xiàng)目?jī)?yōu)化

項(xiàng)目?jī)?yōu)化策略：

1. 生成打包報(bào)告：根據(jù)生成的報(bào)告發(fā)現(xiàn)問(wèn)題并解決
2. 第三方庫(kù)啟用CDN：提高首屏頁(yè)面的加載效率
3. Element-UI組件按需加載
4. 路由懶加載
5. 首頁(yè)內(nèi)容定制

為項(xiàng)目添加進(jìn)度條效果

會(huì)用到第三方的包nprogress，添加loading效果

1. 安裝：

npm install --save nprogress

2. 導(dǎo)入nprogress包
3. 需要配置兩個(gè)攔截器request（請(qǐng)求攔截器）和response（響應(yīng)攔截器）
   在請(qǐng)求攔截器request中調(diào)用NProgress.start()展示進(jìn)度條
   在請(qǐng)求攔截器response中調(diào)用NProgress.done()隱藏進(jìn)度條
   
   

build 編譯并壓縮（用于生產(chǎn)環(huán)境）
在build時(shí)報(bào)錯(cuò)：

解決方法：解決Error: error:0308010C:digital envelope routines::unsupported的四種解決方案
使用方案4解決報(bào)錯(cuò)：

解決build警告

使用babel插件在項(xiàng)目build階段把所有console移除
安裝babel-plugin-transform-remove-console：

npm install babel-plugin-transform-remove-console --save-dev

但由于此插件的配置全局生效，意味著項(xiàng)目開(kāi)發(fā)、測(cè)試、發(fā)布階段都會(huì)移除console.log，不方便測(cè)試。需要將其設(shè)置為僅在發(fā)布階段生效：

生成打包報(bào)告

為了直觀看到項(xiàng)目中存在的問(wèn)題

看到有哪些文件體積擴(kuò)大，需要將其優(yōu)化
如何優(yōu)化項(xiàng)目的打開(kāi)速度

通過(guò)vue.config.js修改webpack的默認(rèn)配置

Webpack是一個(gè)模塊打包工具，它的主要功能是分析項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其他瀏覽器不能直接運(yùn)行的擴(kuò)展語(yǔ)言（如SCSS、TypeScript等），并將它們打包為合適的格式以供瀏覽器使用。Webpack通過(guò)依賴關(guān)系圖來(lái)管理非代碼資源，如images或web字體等，并會(huì)把它們作為依賴提供給應(yīng)用程序。每個(gè)模塊都可以明確表述它自身的依賴，在打包時(shí)可根據(jù)依賴進(jìn)行打包，避免打包未使用的模塊。Webpack的優(yōu)點(diǎn)包括擁有依賴管理、動(dòng)態(tài)打包、代碼分離、按需加載、代碼壓縮、靜態(tài)資源壓縮、緩存等配置，擴(kuò)展性強(qiáng)，插件機(jī)制完善，社區(qū)龐大，更新速度快，輪子豐富。

為開(kāi)發(fā)模式與發(fā)布模式指定不同的打包入口

configWebpack和chainWebpack

通過(guò)chainWebpack自定義打包入口

通過(guò)externals加載外部CDN資源

內(nèi)容分發(fā)網(wǎng)絡(luò)（Content Delivery Network，CDN）是建立并覆蓋在因特網(wǎng)之上的一層特殊網(wǎng)絡(luò)，專門(mén)用于通過(guò)因特網(wǎng)高效傳遞豐富的多媒體內(nèi)容，對(duì)因特網(wǎng)中的信息流進(jìn)行優(yōu)化，從而提高網(wǎng)絡(luò)的使用效率。

externals排除某些包讓它們不被打包到最終的文件里面去，而是去windows全局查找這些對(duì)象直接使用

大大減少了依賴項(xiàng)占用內(nèi)存：
之前：

之后：

通過(guò)CDN優(yōu)化ElementUI的打包

首頁(yè)內(nèi)容定制

在vue.config.js中聲明一個(gè)參數(shù)isProd，根據(jù)這個(gè)參數(shù)來(lái)自定制頁(yè)面如何渲染
<%= %>代表輸出
<% %>代表寫(xiě)正常的語(yǔ)句



bulid發(fā)布成功后，多了一個(gè)dist文件夾，dist就是發(fā)布的產(chǎn)品

路由懶加載

打包構(gòu)建項(xiàng)目時(shí)，JS包會(huì)變得非常大，影響頁(yè)面加載。如果我們能把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊，當(dāng)路由被訪問(wèn)時(shí)才加載對(duì)應(yīng)組件，可以提高頁(yè)面加載效率。

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

npm install --save-dev @babel/plugin-syntax-dynamic-import

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

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

項(xiàng)目上線

通過(guò)node創(chuàng)建web服務(wù)器

創(chuàng)建node項(xiàng)目，并安裝express，通過(guò)express快速創(chuàng)建web服務(wù)器，將vue打包生成的dist文件夾，托管靜態(tài)資源即可。
npm init -y 初始化一個(gè)包管理配置文件
npm i express -S 安裝一個(gè)第三方的包express
把vue_shop的發(fā)布文件夾dist復(fù)制到vue_shop_server中
創(chuàng)建app.js入口文件

打開(kāi)網(wǎng)址 http://127.0.0.1顯示空白頁(yè)
根據(jù)報(bào)錯(cuò)進(jìn)行修改：

1. 修改引入的echarts CDN資源版本（最高5.4.3，沒(méi)有5.5.1）
   
2. 將原來(lái)的externals中的vue、vueRouter、vueQuillEditor全部改成首字母大寫(xiě)
   
3. 在vue_shop中重新build得到dist文件，再?gòu)?fù)制到vue_shop_server中成功運(yùn)行項(xiàng)目
   

開(kāi)啟gzip配置

使用gzip可以減少文件體積，使傳輸速度更快。
可以通過(guò)服務(wù)器端使用Express做gzip壓縮
npm i compression -S 安裝相應(yīng)包

配置HTTPS服務(wù)（一般由后臺(tái)開(kāi)發(fā)人員進(jìn)行，前端了解即可）

使用pm2管理應(yīng)用

后臺(tái)node server服務(wù)器被關(guān)掉，那么網(wǎng)站服務(wù)就停止了，再通過(guò)瀏覽器訪問(wèn)項(xiàng)目打不開(kāi)

保留很多終端窗口可能難以管理，關(guān)閉終端窗口網(wǎng)站能夠正常運(yùn)行

PM2是常用的node進(jìn)程管理工具，它可以提供node.js應(yīng)用管理，如自動(dòng)重載、性能監(jiān)控、負(fù)載均衡等。同類工具有Supervisor、Forever等。

pm2是一個(gè)進(jìn)程管理工具,可以用它來(lái)管理你的node進(jìn)程，并查看node進(jìn)程的狀態(tài)，當(dāng)然也支持性能監(jiān)控，進(jìn)程守護(hù)，負(fù)載均衡等功能。pm2基本是Nodejs應(yīng)用程序不二的守護(hù)進(jìn)程選擇，事實(shí)上它并不僅僅可以啟動(dòng)Nodejs的程序，只要是一般的腳本的程序它同樣可以勝任。

1. 在服務(wù)器中安裝pm2：
   踩坑：安裝成功，但是無(wú)法正常使用。
   搜索后發(fā)現(xiàn)需要手動(dòng)配置系統(tǒng)環(huán)境變量，一定要重啟，另外這里也需要注意：
   首先搜索全局安裝位置npm root -g：

C:\Windows\System32>npm root -g
D:\Program Files\nodejs\node_global\node_modules

然后把D:\Program Files\nodejs\node_global\添加到系統(tǒng)環(huán)境變量Path，多寫(xiě)一點(diǎn)都不會(huì)生效！

npm i pm2 -g

PS：誰(shuí)懂我看到這里有多激動(dòng)，整了快兩天終于用上了pm2

2. 啟動(dòng)項(xiàng)目命令：

pm2 start 腳本 --name 自定義名稱

關(guān)掉終端后127.0.0.1能正常運(yùn)行

3. 查看運(yùn)行項(xiàng)目：

pm2 ls

4. 停止項(xiàng)目：

pm2 stop 自定義名稱

網(wǎng)站就打不開(kāi)了

5. 重啟項(xiàng)目：

pm2 restart 自定義名稱

6. 刪除項(xiàng)目：

pm2 delete 自定義名稱

上傳代碼

git branch 查看當(dāng)前所處分支 是master
git status 查看所有文件狀態(tài)
git add . 把所有文件添加到暫存區(qū)
git commit -m "項(xiàng)目?jī)?yōu)化和上線" 提交代碼，本地更新
git push 本地上傳到云端