隨著vue cli升級到 4 (內(nèi)置webpack 4)，我們需要手動(dòng)做的優(yōu)化就越來越少了。
通過vue-cli 4.x，也就是@vue/cli成功構(gòu)建一個(gè)項(xiàng)目的時(shí)候，它不僅自動(dòng)安裝好了必要的庫和插件，而且做完了針對大部分應(yīng)用的 webpack 優(yōu)化配置。
我們可以用 inspect 命令 審查解析好的配置文件 (用了什么 loaders 和 plugins 會(huì)比較直觀)，也可以看@vue/cli-service這個(gè)包，即/node_modules/@vue/cli-service/lib/config/目錄下的文件(邏輯條理更清晰，多看源碼也有好處)，便可大致清楚它默認(rèn)幫我們做了什么配置。
審查項(xiàng)目的 webpack 配置
在 shell 執(zhí)行vue inspect > defaultConfig.js，就可以把我們現(xiàn)有的webpack配置解析成一個(gè)json對象并輸出到目標(biāo)js文件里。
其中用 webpack-chain 方式配置的模塊規(guī)則，
.rule('vue')
.test(/\.vue$/)
.use('cache-loader')
.loader('cache-loader')
.end()
.use('vue-loader')
.loader('vue-loader')
會(huì)被轉(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 選項(xiàng)配置打包輸出的 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的值才會(huì)生效)用
copy-webpack-plugin插件把 public 目錄的文件復(fù)制到定義的outputDir(打包目錄，默認(rèn)是dist)下
2. config/base.js
通過 module 模塊給不同文件類型配置不同預(yù)處理器。
.vue(單文件組件)：vue-loader (為每個(gè)語言塊(如<template>、<script>)生成一個(gè)模塊導(dǎo)入，并將遇到的資源URL都轉(zhuǎn)為 webpack 模塊請求。具體 ?? vue-cli4 之 vue-loader 工作流程)、cache-loader(一些性能開銷較大的 loader (如vue-loader)可以鏈?zhǔn)教砑?cache-loader，等 vue-loader 處理完再由它開啟基于文件系統(tǒng)的模板編譯緩存，以便于將結(jié)果緩存在磁盤中以減少編譯時(shí)間)
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選項(xiàng)修改模塊解析配置，*.jsx、*.vue等文件引入時(shí)不用再加后綴；定義@為src目錄絕對路徑的別名；配置解析模塊時(shí)搜索的目錄為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í)設(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)境會(huì)先經(jīng)過 postcss-loader、css-loader(會(huì)把 css 中的資源URL轉(zhuǎn)為模塊請求)，最后應(yīng)用 vue-style-loader 往 <head> 標(biāo)簽中注入多個(gè) <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 提取成一個(gè)個(gè)單獨(dú)的 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)建速度和避免資源被定位到原始資源。不用再手動(dòng)設(shè)置
productionSourceMap: false配置 webpack 內(nèi)置的
HashedModuleIdsPlugin，使得打包時(shí)只改變 修改/新增 模塊的哈希值，即未改動(dòng)的文件名中的 hash (id)不變，從而維持未修改文件的緩存，以實(shí)現(xiàn)訪問速度的提高。在測試環(huán)境關(guān)閉
optimization.minimize壓縮優(yōu)化，以提高構(gòu)建的速度
現(xiàn)在要來說我們還能做什么優(yōu)化處理
優(yōu)化的目標(biāo)始終是明確的：減少項(xiàng)目體積、提高初次/首屏加載速度、盡可能利用瀏覽器緩存。
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 拆包實(shí)戰(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, // 每個(gè)異步加載模塊最多能被拆分的數(shù)量
maxInitialRequests: 10, // 每個(gè)入口和它的同步依賴最多能被拆分的數(shù)量
enforceSizeThreshold: 50000, // 強(qiáng)制執(zhí)行拆分的體積閾值并忽略其他限制
cacheGroups: {
libs: { // 第三方庫
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/, // 請注意'[\\/]'的用法，是具有跨平臺兼容性的路徑分隔符
priority: 10 // 優(yōu)先級，執(zhí)行順序就是權(quán)重從高到低
chunks: 'initial' // 只打包最初依賴的第三方
},
elementUI: { // 把 elementUI 單獨(dú)分包
name: 'chunk-elementUI',
test: /[\\/]node_modules[\\/]element-ui[\\/]/,
priority: 20 // 權(quán)重必須比 libs 大，不然會(huì)被打包進(jìn) libs 里
},
commons: {
name: 'chunk-commons',
minChunks: 2, // 拆分前，這個(gè)模塊至少被不同 chunk 引用的次數(shù)
priority: 0,
reuseExistingChunk: true
},
svgIcon: {
name: 'chunk-svgIcon',
// 函數(shù)匹配示例，把 svg 單獨(dú)拆出來
test(module) {
// `module.resource` 是文件的絕對路徑
// 用`path.sep` 代替 / or \，以便跨平臺兼容
// const path = require('path') // path 一般會(huì)在配置文件引入，此處只是說明 path 的來源，實(shí)際并不用加上
return (
module.resource &&
module.resource.endsWith('.svg') &&
module.resource.includes(`${path.sep}icons${path.sep}`)
)
},
priority: 30
}
}
})
}
}
這里提一嘴，如果用到的組件的比較多，就推薦完整引入 element-ui 庫。否則這種情況按需引入打包出來并不會(huì)小。具體來說就是按照官方的按需引入操作，用到的 element-ui 代碼也都是入口 chunk 的初始依賴。根據(jù)我們的優(yōu)化配置再單獨(dú)抽到一個(gè)包里，import 組件多的情況，區(qū)別不大。若是手動(dòng)在頁面 import element 組件，一般 UI 庫組件利用率比較高，單獨(dú)包含在懶加載頁面里會(huì)重復(fù)，還是打包在公共 chunk 里合適。所以初始化時(shí)就 import 更好。
而且 element-ui 并不支持 treeshaking, 一是由于它并沒有設(shè)置 sideEffects，二是 element-ui 的聚合模塊中, 有一個(gè)注冊所有組件為全局組件的副作用, 這會(huì)導(dǎo)致 tree shaking 失效。所以不用多折騰去考慮如何進(jìn)一步優(yōu)化 element-ui 包。
webpack 的處理流程是先收集處理依賴 ?? 標(biāo)記無引用的模塊 ?? 生成初步的 chunk (也就是分包) ?? 然后進(jìn)一步優(yōu)化這些 chunk ?? 最后 treeshaking。
2. 把部分第三方庫用CDN外鏈的方式引入
Tip：通過 CDN 引入的資源不會(huì)被 webpack 打包，可以大大增加構(gòu)建的速度。但這并不能真正意義上地減少項(xiàng)目體積，因?yàn)橹皇前巡糠执a拆出去，用別的方式引入罷了。想減小體積，最高效的方案是啟用
GZIP(后面第4點(diǎn)會(huì)詳細(xì)說)。
其實(shí)我的項(xiàng)目沒有必要單獨(dú)剝離部分第三方依賴。一是構(gòu)建速度沒有什么問題，二是目前 webpack 的optimization.splitChunks 對靜態(tài)資源的緩存優(yōu)化已經(jīng)做得很好了。并且我們可以把所有的靜態(tài)資源都會(huì)上傳到自己的 CDN 服務(wù)(阿里云、騰訊云、七牛等等都可)，就沒有必要使用第三方 CDN 服務(wù)了。BUT，跟splitChunks拆包一樣，所有的優(yōu)化都是需要結(jié)合自己的具體業(yè)務(wù)來調(diào)整，適合自己的才是最好的。（就算這次不用，我們會(huì)還是要會(huì)的【機(jī)智臉】）
我們借助 html-webpack-plugin 插件來優(yōu)化cdn資源的引入。它的作用之一是動(dòng)態(tài)添加script、link每次編譯后的hash值，防止引用到被緩存的外部文件。
2.1 在 vue.config.js 導(dǎo)出模塊module.exports = {}的外部定義 CDN 外鏈路徑和externals對象
有依賴關(guān)系的外鏈順序不能亂，比如vue一定要放在element-ui前面（雖然很常識）
externals (外部擴(kuò)展配置) 告訴 webpack 不要打包哪些模塊以及引入后的全局變量名
// 樣式和js的CDN外鏈，會(huì)插入到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'
]
}
}
// 外部擴(kuò)展，即外部引入對象與內(nèi)部引用時(shí)的對象配置
// 例如：vue: 'Vue', 對應(yīng) import Vue from 'vue' 來說
// 屬性名 vue 為要從外部引入時(shí)的 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)境
// 外部擴(kuò)展配置，在production模式下，引入外部cdn資源，同時(shí)不要把這些模塊打包到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)圖片壓縮處理
看這個(gè)就行: 【vue-cli4 用 image-webpack-loader 配置 webpack 圖片壓縮處理/優(yōu)化】
4. 開啟gzip構(gòu)建壓縮 (服務(wù)器也要做相應(yīng)配置)
包括gzip壓縮原理的完整版 ?? 【如何為項(xiàng)目開啟gzip壓縮及實(shí)現(xiàn)原理】
用到的是 webpack 的這個(gè)插件：compression-webpack-plugin
我bulid的時(shí)候報(bào)了Cannot read property 'tapPromise' of undefined的錯(cuò)，其實(shí)就是版本和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時(shí)間
gzip_http_version 1.1; # 默認(rèn) 1.1，請求壓縮響應(yīng)所需的最小HTTP版本
gzip_min_length 1k; # 設(shè)置被gzip的響應(yīng)的最小長度，小于該值的文件不會(huì)被壓縮
# 追加啟用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)報(bào)頭字段
具體配置位置展示
5. 其他
測試階段可以加個(gè)打包分析插件，視圖分析更直觀：webpack-bundle-analyzer
安裝：npm install -D webpack-bundle-analyzer
chainWebpack: config => {
// 添加插件
// 注意鏈?zhǔn)脚渲脀ebpack，不用再new去創(chuàng)建一個(gè)插件了，這件事已經(jīng)默認(rèn)幫我們做好了。
config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
6. 我個(gè)人完整的vue.config.js配置，供參考
