隨著vue cli升級到 4 (內(nèi)置webpack 4)，我們需要手動做的優(yōu)化就越來越少了。
通過vue-cli 4.x，也就是@vue/cli成功構(gòu)建一個項目的時候，它不僅自動安裝好了必要的庫和插件锨天，而且做完了針對大部分應(yīng)用的 webpack 優(yōu)化配置。
我們可以用 inspect 命令 審查解析好的配置文件 (用了什么 loaders 和 plugins 會比較直觀)拌阴，也可以看@vue/cli-service這個包绍绘，即/node_modules/@vue/cli-service/lib/config/目錄下的文件(邏輯條理更清晰，多看源碼也有好處)迟赃，便可大致清楚它默認(rèn)幫我們做了什么配置陪拘。
審查項目的 webpack 配置
在 shell 執(zhí)行vue inspect > defaultConfig.js，就可以把我們現(xiàn)有的webpack配置解析成一個json對象并輸出到目標(biāo)js文件里纤壁。
其中用 webpack-chain 方式配置的模塊規(guī)則左刽，
.rule('vue')
.test(/\.vue$/)
.use('cache-loader')
.loader('cache-loader')
.end()
.use('vue-loader')
.loader('vue-loader')
會被轉(zhuǎn)化成如下的 module.rules 配置。相對而言更容易理解酌媒。
module: {
rules: [ /* config.module.rule('vue') */
{
test: /\.vue$/,
use: ['cache-loader','vue-loader']
},
]
}
vue-cli4 的默認(rèn) webpack 配置
經(jīng)過對@vue/cli-service源碼的分析欠痴，將 vue-cli4 默認(rèn)打包配置梳理如下(非面面俱到)：
1. config/app.js
在 output 選項配置打包輸出的 bundle 文件名為
[name].[contenthash:8].js的格式，并定義它們的輸出目錄：打包輸出目錄/靜態(tài)資源目錄/js秒咨，如dist/static/js非測試環(huán)境下喇辽，通過
optimization.splitChunks自定義代碼分割邏輯，先把初始依賴的node_modules包提取到chunk-vendors.js文件雨席，再把被不同入口的公共模塊提取到chunk-common文件菩咨。配置 wepack 內(nèi)置的
NamedChunksPlugin插件，使 chunk id 保持穩(wěn)定陡厘，如此異步 chunks 也能有始終如一的哈希值抽米。通過
@vue/preload-webpack-plugin插件，將在 index.html 引入的 js糙置、css 的標(biāo)簽上云茸，加上rel='preload'用
CorsPlugin給 html 配置 crossorigin 屬性(在vue.config.js自行配置了crossorigin的值才會生效)用
copy-webpack-plugin插件把 public 目錄的文件復(fù)制到定義的outputDir(打包目錄，默認(rèn)是dist)下
2. config/base.js
通過 module 模塊給不同文件類型配置不同預(yù)處理器谤饭。
.vue(單文件組件)：vue-loader (為每個語言塊(如<template>标捺、<script>)生成一個模塊導(dǎo)入，并將遇到的資源URL都轉(zhuǎn)為 webpack 模塊請求揉抵。具體 ?? vue-cli4 之 vue-loader 工作流程)亡容、cache-loader(一些性能開銷較大的 loader (如vue-loader)可以鏈?zhǔn)教砑?cache-loader，等 vue-loader 處理完再由它開啟基于文件系統(tǒng)的模板編譯緩存功舀，以便于將結(jié)果緩存在磁盤中以減少編譯時間)
images(圖片類型，png|jpeg等)身弊、media(媒體類型辟汰，mp4|mp3|wav等)列敲、fonts(字體類型，eot|ttf等)：用 url-loader 導(dǎo)出為 內(nèi)聯(lián) base64 URI帖汞，超過 limit 值用 file-loader 處理戴而，發(fā)送到打包目錄下的靜態(tài)資源相應(yīng)文件夾并返回訪問 URL(具體 ?? file-loader 配置詳解以及資源相對路徑處理)
svg(svg格式，通常是圖標(biāo))：file-loader
定義它們構(gòu)建后的文件名格式為[name].[hash:8].[ext]翩蘸，以及它們的輸出目錄：dist/靜態(tài)資源目錄/[js|img|media|fonts]所意，如dist/static/img。通過
resolve選項修改模塊解析配置催首，*.jsx扶踊、*.vue等文件引入時不用再加后綴；定義@為src目錄絕對路徑的別名郎任；配置解析模塊時搜索的目錄為node_modules秧耗；不解析vue|vue-router|vuex|vuex-router-sync模塊用 terser-webpack-plugin (內(nèi)置uglify-js，可以自定義用
uglify-js覆蓋默認(rèn)的 minify 函數(shù)來進(jìn)行壓縮) 插件對JS進(jìn)行了壓縮和 treeshaking舶治，我們基本可以不用考慮代碼混淆的事分井，也不必額外安裝和配置 uglifyjs-webpack-plugin 了。
如果要在生產(chǎn)環(huán)境刪除console.log的話霉猛，我偷懶就直接在terser的配置文件(config/terserOptions.js)的compress對象里加上了drop_console: process.env.NODE_ENV === 'production' ? true : false,
3. config/css.js
對構(gòu)建輸出的 css 的文件名使用
[name].[contenthash:8].js的格式尺锚，同時設(shè)置它們的輸出目錄：dist/靜態(tài)資源目錄/css，如dist/static/css惜浅。按引入方式和是否開啟 modules瘫辩，對各種 css 語言配置了預(yù)處理規(guī)則，并應(yīng)用相應(yīng)的 loader 去做處理赡矢。包括 postcss杭朱、css、scss吹散、sass弧械、less、stylus 空民。
非生產(chǎn)環(huán)境會先經(jīng)過 postcss-loader刃唐、css-loader(會把 css 中的資源URL轉(zhuǎn)為模塊請求)，最后應(yīng)用 vue-style-loader 往 <head> 標(biāo)簽中注入多個 <style> 標(biāo)簽界轩。如果是 sass 類型画饥，則在它們之前先經(jīng)過sass-loader。
關(guān)于樣式處理浊猾，【vue-cli4 之 vue-loader 工作流程】這篇也涉及不少抖甘。用
css.loaderOptions.postcss配置開啟了 autoprefixer，因此開發(fā)過程中我們使用無前綴的 CSS 規(guī)則即可葫慎。在生產(chǎn)環(huán)境衔彻，經(jīng)過 postcss-loader薇宠、css-loader 等處理之后，用 mini-css-extract-plugin 把 css 提取成一個個單獨的 css 文件艰额，并配置該插件的 publicPath (css 中引用外部資源URL的公共前綴) 為輸出的
*.css文件基于打包目錄的相對路徑澄港。 optimize-cssnano-plugin 負(fù)責(zé)對 css 進(jìn)行壓縮。
關(guān)于mini-css-extract-plugin插件的配置可能這里說得比較拗口柄沮，可移步 ?? 【file-loader 配置詳解以及資源相對路徑處理】回梧，里面有詳細(xì)的分析說明。
4. config.prod.js
生產(chǎn)環(huán)境下祖搓，關(guān)閉資源地圖(sourceMap)以提高構(gòu)建速度和避免資源被定位到原始資源狱意。不用再手動設(shè)置
productionSourceMap: false配置 webpack 內(nèi)置的
HashedModuleIdsPlugin，使得打包時只改變 修改/新增 模塊的哈希值棕硫，即未改動的文件名中的 hash (id)不變髓涯，從而維持未修改文件的緩存，以實現(xiàn)訪問速度的提高哈扮。在測試環(huán)境關(guān)閉
optimization.minimize壓縮優(yōu)化纬纪，以提高構(gòu)建的速度
現(xiàn)在要來說我們還能做什么優(yōu)化處理
優(yōu)化的目標(biāo)始終是明確的：減少項目體積、提高初次/首屏加載速度滑肉、盡可能利用瀏覽器緩存包各。
1. 公共代碼及第三方庫等抽離/分割
@vue-cli-service 默認(rèn)給我們做了這樣的配置：
// /node_modules/@vue/cli-service/lib/config/app.js
chainWebpack(webpackConfig => {
if (process.env.NODE_ENV !== 'test') {
webpackConfig
.optimization.splitChunks({
cacheGroups: {
vendors: {
name: `chunk-vendors`,
test: /[\\/]node_modules[\\/]/,
priority: -10,
chunks: 'initial'
},
common: {
name: `chunk-common`,
minChunks: 2,
priority: -20,
chunks: 'initial',
reuseExistingChunk: true
}
}
})
}
}
【webpack SplitChunksPlugin 配置詳解】
【webpack SplitChunksPlugin vue-cli 4 拆包實戰(zhàn)】
代碼分包對緩存控制和請求響應(yīng)速度的影響至關(guān)重要，了解 chunk 優(yōu)化是在什么階段處理也很有必要靶庙，詳細(xì)看??這兩篇问畅。為了篇幅這里直接甩配置：
// vue.config.js
chainWebpack: config => {
if (IS_PROD) {
config.optimization.splitChunks({
chunks: 'all', // 表明選擇哪些 chunk 進(jìn)行優(yōu)化。通用設(shè)置六荒，可選值：all/async/initial护姆。設(shè)置為 all 意味著 chunk 可以在異步和非異步 chunk 之間共享。
minSize: 20000, // 允許新拆出 chunk 的最小體積
maxAsyncRequests: 10, // 每個異步加載模塊最多能被拆分的數(shù)量
maxInitialRequests: 10, // 每個入口和它的同步依賴最多能被拆分的數(shù)量
enforceSizeThreshold: 50000, // 強制執(zhí)行拆分的體積閾值并忽略其他限制
cacheGroups: {
libs: { // 第三方庫
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/, // 請注意'[\\/]'的用法掏击，是具有跨平臺兼容性的路徑分隔符
priority: 10 // 優(yōu)先級卵皂，執(zhí)行順序就是權(quán)重從高到低
chunks: 'initial' // 只打包最初依賴的第三方
},
elementUI: { // 把 elementUI 單獨分包
name: 'chunk-elementUI',
test: /[\\/]node_modules[\\/]element-ui[\\/]/,
priority: 20 // 權(quán)重必須比 libs 大，不然會被打包進(jìn) libs 里
},
commons: {
name: 'chunk-commons',
minChunks: 2, // 拆分前砚亭，這個模塊至少被不同 chunk 引用的次數(shù)
priority: 0,
reuseExistingChunk: true
},
svgIcon: {
name: 'chunk-svgIcon',
// 函數(shù)匹配示例灯变，把 svg 單獨拆出來
test(module) {
// `module.resource` 是文件的絕對路徑
// 用`path.sep` 代替 / or \，以便跨平臺兼容
// const path = require('path') // path 一般會在配置文件引入，此處只是說明 path 的來源，實際并不用加上
return (
module.resource &&
module.resource.endsWith('.svg') &&
module.resource.includes(`${path.sep}icons${path.sep}`)
)
},
priority: 30
}
}
})
}
}
這里提一嘴魄幕，如果用到的組件的比較多，就推薦完整引入 element-ui 庫匾旭。否則這種情況按需引入打包出來并不會小。具體來說就是按照官方的按需引入操作，用到的 element-ui 代碼也都是入口 chunk 的初始依賴橙喘。根據(jù)我們的優(yōu)化配置再單獨抽到一個包里耙替，import 組件多的情況鲤遥，區(qū)別不大。若是手動在頁面 import element 組件林艘，一般 UI 庫組件利用率比較高，單獨包含在懶加載頁面里會重復(fù)混坞，還是打包在公共 chunk 里合適狐援。所以初始化時就 import 更好。
而且 element-ui 并不支持 treeshaking, 一是由于它并沒有設(shè)置 sideEffects究孕，二是 element-ui 的聚合模塊中, 有一個注冊所有組件為全局組件的副作用, 這會導(dǎo)致 tree shaking 失效啥酱。所以不用多折騰去考慮如何進(jìn)一步優(yōu)化 element-ui 包。
webpack 的處理流程是先收集處理依賴 ?? 標(biāo)記無引用的模塊 ?? 生成初步的 chunk (也就是分包) ?? 然后進(jìn)一步優(yōu)化這些 chunk ?? 最后 treeshaking厨诸。
2. 把部分第三方庫用CDN外鏈的方式引入
Tip：通過 CDN 引入的資源不會被 webpack 打包镶殷，可以大大增加構(gòu)建的速度。但這并不能真正意義上地減少項目體積微酬，因為只是把部分代碼拆出去绘趋，用別的方式引入罷了。想減小體積颗管，最高效的方案是啟用
GZIP(后面第4點會詳細(xì)說)陷遮。
其實我的項目沒有必要單獨剝離部分第三方依賴。一是構(gòu)建速度沒有什么問題垦江，二是目前 webpack 的optimization.splitChunks 對靜態(tài)資源的緩存優(yōu)化已經(jīng)做得很好了帽馋。并且我們可以把所有的靜態(tài)資源都會上傳到自己的 CDN 服務(wù)(阿里云、騰訊云比吭、七牛等等都可)绽族，就沒有必要使用第三方 CDN 服務(wù)了。BUT衩藤，跟splitChunks拆包一樣吧慢，所有的優(yōu)化都是需要結(jié)合自己的具體業(yè)務(wù)來調(diào)整，適合自己的才是最好的慷彤。（就算這次不用娄蔼，我們會還是要會的【機智臉】）
我們借助 html-webpack-plugin 插件來優(yōu)化cdn資源的引入。它的作用之一是動態(tài)添加script底哗、link每次編譯后的hash值岁诉，防止引用到被緩存的外部文件。
2.1 在 vue.config.js 導(dǎo)出模塊module.exports = {}的外部定義 CDN 外鏈路徑和externals對象
有依賴關(guān)系的外鏈順序不能亂跋选，比如vue一定要放在element-ui前面（雖然很常識）
externals (外部擴展配置) 告訴 webpack 不要打包哪些模塊以及引入后的全局變量名
// 樣式和js的CDN外鏈涕癣，會插入到index.html中
const cdn = {
// 開發(fā)環(huán)境
dev: {
css: [],
js: []
},
// 生產(chǎn)環(huán)境
build: {
css: ['https://cdn.jsdelivr.net/npm/element-ui@2.15.1/lib/theme-chalk/index.css'],
js: [
'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
'https://cdn.jsdelivr.net/npm/element-ui@2.15.1/lib/index.js'
]
}
}
// 外部擴展，即外部引入對象與內(nèi)部引用時的對象配置
// 例如：vue: 'Vue', 對應(yīng) import Vue from 'vue' 來說
// 屬性名 vue 為要從外部引入時的 vue 對象，Vue為引入后的對應(yīng)的全局變量坠韩。
const externals = {
vue: 'Vue',
'element-ui': 'ElementUI'
}
2.2 在 vue.config.js 的 webpack config 中加上external配置距潘，并通過 html-webpack-plugin 把這些外鏈注入到 index.html之中
configureWebpack: config => {
if (IS_PROD) { // 生產(chǎn)環(huán)境
// 外部擴展配置，在production模式下只搁，引入外部cdn資源音比，同時不要把這些模塊打包到libs公共包里
config.externals = externals
} else {
// 為開發(fā)環(huán)境修改配置
}
},
chainWebpack: config => {
if (IS_PROD) {
// 添加 cdn 參數(shù)到 htmlWebpackPlugin 配置中
config.plugin('html').tap(args => {
args[0].cdn = cdn.build
return args
})
}
}
2.3 在 public/index.html 里加上如下代碼
<!-- 使用CDN的 CSS 文件 -->
<% if (htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
<link rel="preload" href="<%= css %>" as="style" />
<link rel="stylesheet" href="<%= css %>" />
<% } %>
<% } %>
<!-- 使用CDN的 CSS 文件 end -->
<!-- 使用CDN加速的 JS 文件 -->
<% if (htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
<script type="text/javascript" src="<%= js %>" ></script>
<% } %>
<% } %>
<!-- 使用CDN加速的 JS 文件 end -->
具體位置如下圖。至于這里用到的模版引擎語法：看這里 ?? ejs模版語法
2.4 把入口文件 main.js 的 element-ui 相關(guān)引入導(dǎo)入注掉
import Vue from 'vue'
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
// Vue.use(ElementUI)
3. 靜態(tài)圖片壓縮處理
看這個就行: 【vue-cli4 用 image-webpack-loader 配置 webpack 圖片壓縮處理/優(yōu)化】
4. 開啟gzip構(gòu)建壓縮 (服務(wù)器也要做相應(yīng)配置)
包括gzip壓縮原理的完整版 ?? 【如何為項目開啟gzip壓縮及實現(xiàn)原理】
用到的是 webpack 的這個插件：compression-webpack-plugin
我bulid的時候報了Cannot read property 'tapPromise' of undefined的錯氢惋，其實就是版本和vue-cli的某些包不兼容洞翩，把 compression-webpack-plugin 的版本降低到6.1.1就可以了。
先安裝npm install compression-webpack-plugin -D焰望，然后到vue.config.js配置：
const CompressionPlugin = require("compression-webpack-plugin");
configureWebpack: config => {
config.name = name
const plugins = []
if (IS_PROD) { // 生產(chǎn)環(huán)境
plugins.push(
// 為靜態(tài)資源準(zhǔn)備壓縮版本骚亿，在服務(wù)器也要開啟相應(yīng)配置
new CompressionWebpackPlugin({
test: /\.(js|css|json|ico|svg)$/,// 匹配文件格式
algorithm: 'gzip',
threshold: 10240, // 對超過10k的數(shù)據(jù)壓縮
minRatio: 0.8, // 壓縮比
filename: "[path][base].gz", // 壓縮后的文件名，默認(rèn)值是 [path][base].gz
// filename(pathData) {
// `pathData` 參數(shù)包含很多可以獲取到文件路徑相關(guān)數(shù)據(jù)的屬性 - `path`/`name`/`ext`/等等
// 如果路徑中包含svg熊赖，則放到svg/目錄下
// 只是演示来屠，一般都用字符串默認(rèn)值就好
// if (/\.svg$/.test(pathData.ext)) {
//return 'static/svg/[base].gz'
}
// return '[path][base].gz'
},
deleteOriginalAssets: false, // 不刪除源文件，true 則只保留壓縮后的文件
})
)
} else {
// 為開發(fā)環(huán)境修改配置
}
config.plugins = [...config.plugins, ...plugins]
},
在服務(wù)端的 nginx.conf 開啟 gzip壓縮配置震鹉，配置參數(shù)可參考：Nginx的gzip配置文檔
# 開啟gzip壓縮
gzip on;
gzip_buffers 4 16k; # 置用于壓縮響應(yīng)的緩沖區(qū)的數(shù)量和大小
gzip_comp_level 9; # 對響應(yīng)壓縮的級別俱笛，可選范圍：1到9，數(shù)字越大壓縮得越好传趾，但也越占用CPU時間
gzip_http_version 1.1; # 默認(rèn) 1.1嫂粟，請求壓縮響應(yīng)所需的最小HTTP版本
gzip_min_length 1k; # 設(shè)置被gzip的響應(yīng)的最小長度，小于該值的文件不會被壓縮
# 追加啟用gzip壓縮的MIME類型墨缘，默認(rèn)已有text/html
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/javascript application/json;
gzip_disable "MSIE [1-6]\.";
gzip_vary on; # 默認(rèn)off星虹，如果指令gzip、gzip_static或gunzip是active的镊讼，啟用插入" Vary: Accept-Encoding "響應(yīng)報頭字段
具體配置位置展示
5. 其他
測試階段可以加個打包分析插件宽涌，視圖分析更直觀：webpack-bundle-analyzer
安裝：npm install -D webpack-bundle-analyzer
chainWebpack: config => {
// 添加插件
// 注意鏈?zhǔn)脚渲脀ebpack，不用再new去創(chuàng)建一個插件了蝶棋，這件事已經(jīng)默認(rèn)幫我們做好了卸亮。
config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
6. 我個人完整的vue.config.js配置，供參考
