1.項(xiàng)目?jī)?yōu)化
1.1項(xiàng)目可優(yōu)化的內(nèi)容
生成打包報(bào)告
第三方庫(kù)啟用CDN
Element-ui組件按需加載
路由懶加載
首頁(yè)內(nèi)容定制
1.2頁(yè)面頂部進(jìn)度條效果
使用nprogess第三方庫(kù)
在axios請(qǐng)求攔截器中觸發(fā)
Nprogress.start()
在axios響應(yīng)攔截器中觸發(fā)
Nprogress.done()
1.3 打包時(shí)的優(yōu)化
1.3.1清除console
使用babel-plugin-transform-remove-console
安裝：npm install babel-plugin-transform-remove-console --save-dev
.babelrc:
// 全部清除console
{
"plugins": ["transform-remove-console"]
}
// with options選擇性刪除
{
"plugins": [ ["transform-remove-console", { "exclude": [ "error", "warn"] }] ]
}
1.3.2 區(qū)分開(kāi)發(fā)和生產(chǎn)環(huán)境下使用 babel-plugin-transform-remove-console
// babel.config.js文件里
// 定義一個(gè)生產(chǎn)環(huán)境的插件數(shù)組
const prodPlugins = []
// 如果是生產(chǎn)環(huán)境則添加'transform-remove-console'
if (process.env.NODE_ENV === 'production') {
prodPlugins.push('transform-remove-console')
}
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk'
}
],
// 將生產(chǎn)環(huán)境的數(shù)組展開(kāi)到配置中
...prodPlugins
]
}
1.4 生成打包報(bào)告
打包時(shí)患雇，為了直觀地發(fā)現(xiàn)項(xiàng)目中存在的問(wèn)題苛吱，可以生成打包報(bào)告又谋。
1.4.1 通過(guò)命令行參數(shù)的形式生成報(bào)告
// 通過(guò)vue-cli的命令選項(xiàng)可以生成打包報(bào)告
// --report選項(xiàng)可以生成report.html以幫助分析報(bào)告內(nèi)容
vue-cli-service build --report
1.4.2 通過(guò)可視化的UI面板直接查看報(bào)告
??通過(guò)儀表盤和分析面板可以看到加載速度和依賴項(xiàng)資源大小占比彰亥，從而進(jìn)一步優(yōu)化。
1.5 通過(guò)vue.config.js修改webpack的默認(rèn)配置
??vue-cli3.0+工具生成的項(xiàng)目，默認(rèn)隱藏了所有webpack的配置項(xiàng)瘟檩，這樣做的目的時(shí)屏蔽項(xiàng)目中的所有配置澈蟆，讓重心放在項(xiàng)目功能和業(yè)務(wù)邏輯上趴俘，省去配置帶了的各種繁瑣配置事項(xiàng)。
vue.config.js官方文檔：vue.config.js官方文檔
1.6 為開(kāi)發(fā)模式與發(fā)布模式指定不同的打包入口
??默認(rèn)情況下太惠，vue項(xiàng)目中的開(kāi)發(fā)模式和發(fā)布模式凿渊，共同使用喲個(gè)打包的入口文件（src/main.js）埃脏。為了分離開(kāi)發(fā)陌生和發(fā)布模式，可以指定不同的打包入口文件淤翔。
- 開(kāi)發(fā)模式的入口文件為src/main-dev.js
- 生產(chǎn)模式的入口文件為src/main-prod.js
1.6.1 configureWebpack和chainWebpack
在vue.config.js中旁壮，新增configureWebpack和chainWebpack節(jié)點(diǎn)自定義打包配置。
configureWebpack和chainWebpack作用相同谐檀。唯一的區(qū)別是修改方式不同：
① chainWebpack鏈?zhǔn)骄幊绦问铰招常瑏?lái)改變webpack的默認(rèn)配置
② configureWebpack通過(guò)操作對(duì)象的形式，來(lái)改變webpack的默認(rèn)配置
參考vue.config.js官方文檔：vue.config.js官方文檔
1.6.2 通過(guò)chainWebpack自定義打包入口
代碼示列：
// vue.config.js
module.exports = {
chainWebpack:config=>{
//發(fā)布模式
config.when(process.env.NODE_ENV === 'production',config=>{
//entry找到默認(rèn)的打包入口桐猬，調(diào)用clear則是刪除默認(rèn)的打包入口
//add添加新的打包入口
config.entry('app').clear().add('./src/main-prod.js')
})
//開(kāi)發(fā)模式
config.when(process.env.NODE_ENV === 'development',config=>{
config.entry('app').clear().add('./src/main-dev.js')
})
}
}
1.7 通過(guò)extrenals加載外部CDN資源
默認(rèn)情況下麦撵，通過(guò)import語(yǔ)法導(dǎo)入的第三方依賴包，最終會(huì)被打包合并到同一個(gè)文件中溃肪，從而導(dǎo)致打包成功后的文件體積過(guò)大免胃。
解決辦法：通過(guò)webpack的externals節(jié)點(diǎn)，來(lái)配置并加載外部的CDN資源羔沙，凡是聲明在externals中的第三方依賴包，都不會(huì)被打包厨钻。
步驟一：聲明需要外部CDN的項(xiàng)目
//使用externals設(shè)置排除項(xiàng)
config.set('externals',{
vue:'Vue',
'vue-router':'VueRouter',
axios:'axios',
lodash:'_',
echarts:'echarts',
nprogress:'NProgress',
'vue-quill-editor':'VueQuillEditor'
})
步驟二：在public/index.html文件頭部添加CDN樣式css資源
<!-- nprogress 的樣式表文件 -->
<link rel="stylesheet" />
<!-- 富文本編輯器 的樣式表文件 -->
<link rel="stylesheet" />
<link rel="stylesheet" />
<link rel="stylesheet" />
步驟三：在public/index.html文件頭部添加CDN樣式j(luò)s資源
<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>
1.8 通過(guò)CDN優(yōu)化ElementUi的打包
操作流程如下：
① 在main.js入口文件扼雏，注釋掉element-ui的加載代碼
② 在index.thml的頭部區(qū)域中，通過(guò)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>
1.9 首頁(yè)內(nèi)容定制(按需渲染)
開(kāi)發(fā)環(huán)境的首頁(yè)和發(fā)布環(huán)境的首頁(yè)展示內(nèi)容的形式有所不同夯膀。
如開(kāi)發(fā)環(huán)境中使用的是import加載第三方包诗充，而發(fā)布環(huán)境則是使用CDN，那么首頁(yè)也需根據(jù)環(huán)境不同來(lái)進(jìn)行不同的實(shí)現(xiàn)诱建。
可以通過(guò)插件的方式來(lái)定制首頁(yè)內(nèi)容蝴蜓，打開(kāi)vue.config.js，編寫代碼如下：
module.exports = {
chainWebpack:config=>{
config.when(process.env.NODE_ENV === 'production',config=>{
......
// 使用htmlWebpackPlugin插件
config.plugin('html').tap(args=>{
// 添加參數(shù)isProd俺猿，通過(guò)isProd來(lái)判斷是否渲染
args[0].isProd = true
return args
})
})
config.when(process.env.NODE_ENV === 'development',config=>{
config.entry('app').clear().add('./src/main-dev.js')
// 使用插件
config.plugin('html').tap(args=>{
// 添加參數(shù)isProd
args[0].isProd = false
return args
})
})
}
}
然后在public/index.html中使用插件判斷是否為發(fā)布環(huán)境并定制首頁(yè)內(nèi)容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>電商后臺(tái)管理系統(tǒng)</title>
<% if(htmlWebpackPlugin.options.isProd){ %>
<!-- nprogress 的樣式表文件 -->
<link rel="stylesheet" />
........
<!-- element-ui 的 js 文件 -->
<script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
<% } %>
</head>
2. 項(xiàng)目上線
2.1 項(xiàng)目上線相關(guān)配置
- 通過(guò)nodejs創(chuàng)建web服務(wù)器
- 開(kāi)啟gzip壓縮配置
- 配置https服務(wù)
- 使用pm2管理應(yīng)用
2.1.1 通過(guò)node創(chuàng)建web服務(wù)器
創(chuàng)建node項(xiàng)目茎匠，并安裝express，通過(guò)express快速下黃健web服務(wù)器辜荠，將打包的vue項(xiàng)目汽抚，托管為靜態(tài)資源抓狭。
代碼如下：
const express = require('express')
const app = express()
app.use(express.static('./dist'))
app.listen(8998,()=>{
console.log("server running at http://127.0.0.1:8998")
})
2.1.2 開(kāi)啟gzip配置
使用gzip可以減小文件體積伯病，是傳輸速度更快。
可以通過(guò)服務(wù)端使用express做gzip，配置如下：
// 安裝compression ：npm i compression -D
const express = require('express')
// 導(dǎo)入包
const compression = require('compression')
const app = express()
// 啟用中間件
app.use(compression())
app.use(express.static('./dist'))
app.listen(8998,()=>{
console.log("server running at http://127.0.0.1:8998")
})
2.1.3 配置HTTPS服務(wù)
配置https服務(wù)一般是后臺(tái)進(jìn)行處理午笛，前端開(kāi)發(fā)人員了解即可惭蟋。
首先，需要申請(qǐng)SSL證書药磺，進(jìn)入https://freessl.cn官網(wǎng)
在后臺(tái)導(dǎo)入證書告组，打開(kāi)今天資料/素材，復(fù)制素材中的兩個(gè)文件到vue_shop_server中
打開(kāi)app.js文件癌佩，編寫代碼導(dǎo)入證書木缝，并開(kāi)啟https服務(wù)
const express = require('express')
const compression = require('compression')
const https = require('https')
const fs = require('fs')
const app = express()
//創(chuàng)建配置對(duì)象設(shè)置公鑰和私鑰
const options = {
cert:fs.readFileSync('./full_chain.pem'),
key:fs.readFileSync('./private.key')
}
app.use(compression())
app.use(express.static('./dist'))
// app.listen(8998,()=>{
// console.log("server running at http://127.0.0.1:8998")
// })
//啟動(dòng)https服務(wù)
https.createServer(options,app).listen(443)
2.1.4 使用pm2管理應(yīng)用
打開(kāi)vue_shop_server文件夾的終端，輸入命令：npm i pm2 -g
使用pm2啟動(dòng)項(xiàng)目围辙，在終端中輸入命令：pm2 start app.js --name 自定義名稱
查看項(xiàng)目列表命令：pm2 ls
重啟項(xiàng)目：pm2 restart 自定義名稱
停止項(xiàng)目：pm2 stop 自定義名稱
刪除項(xiàng)目：pm2 delete 自定義名稱
