1垒酬、序
最近對(duì)前端框架依賴webpack 進(jìn)行升級(jí)越平，遇到了一點(diǎn)點(diǎn)坑和大家分享一下
2、DllPlugin 和 DllReferencePlugin
這對(duì)插件是進(jìn)行項(xiàng)目?jī)?yōu)化的常用方案，其主要方式是 DllPlugin 將常用且不會(huì)輕易進(jìn)行更改的依賴包進(jìn)行抽離單獨(dú)打包针肥；DllReferencePlugin 將打包輸出的內(nèi)容 映射關(guān)系放置到項(xiàng)目中，在打包的時(shí)候香伴，忽略這些文件（有點(diǎn)點(diǎn)像 externals慰枕，不過 externals 映射的文件來源，可以作為DllPlugin 的輸入 ）
// package.json 使用框架為vueCli5.x
//...
"scripts": {
"dll": "webpack --config=webpack.dll.config.js ", // 不使用等號(hào)可以用空格代替即纲，看習(xí)慣
"dev": "npm run dll && vue-cli-service serve", // 不期望每次運(yùn)行構(gòu)建dll可以單獨(dú)分離
"build": "npm run dll && vue-cli-service build" // 打包的時(shí)候具帮，必須構(gòu)建；當(dāng)已經(jīng)構(gòu)建好后低斋，打包體積會(huì)減蟹涮（畢竟抽離的大部分內(nèi)容）
}
// webpack.dll.config.js 這個(gè)命名可以隨意取用，和package.json dll腳本指向同一位置即可
const webpack = require('webpack');
module.exports = {
entry: {
// 可以放置多個(gè)
vendors: ['vue', 'vue-i18n','axios'], // 放置你需要抽離的依賴
// vendors2: ['qiankun']
},
output: {
path: path.join(__dirname, 'dll'), // 存放動(dòng)態(tài)鏈接庫的目錄
filename: '[name].dll.js', // 動(dòng)態(tài)鏈接庫的名稱膊畴，如'vendors.dll.js'
library: '[name]_library', // 動(dòng)態(tài)鏈接庫輸出的文件名
},
plugins: [
// dll輸出文件*.manifest.json *.js
new webpack.DllPlugin({
name: '[name]_[hash]', // 動(dòng)態(tài)鏈接庫的全局變量名稱掘猿，需要和 output.library 中保持一致
path: path.join(__dirname, 'dll', '[name].manifest.json'), // 描述動(dòng)態(tài)鏈接庫文件的 manifest.json 文件輸出時(shí)的文件名稱(路徑)
context: __dirname, // 根據(jù)實(shí)際路徑自己配置
entryOnly: false // 此乃神坑
}),
],
};
// vue.config.js
// DllReferencePlugin 使用
...
// dll 優(yōu)化： 要忽略編譯的模塊
config.plugins.push(
new webpack.DllReferencePlugin({
context: __dirname,
manifest: path.join(__dirname, 'dll', 'vendors.manifest.json'), // 只需要這個(gè)映射json即可
})
// 可以配置多個(gè)
// new webpack.DllReferencePlugin({
// context: __dirname,
// manifest: path.join(__dirname, 'dll', 'vendors2.manifest.json'), // 只需要這個(gè)映射json即可
// })
);
...
3、被更改的默認(rèn)配置 -- DllPlugin options entryOnly （解密時(shí)間）
在webpack v4 中 entryOnly 默認(rèn)值為true; 在v5 中默認(rèn)值為false; 在官方升級(jí)文檔中也有一句話的描述(圖一所示):
entryOnly 代表的含義是什么呢唇跨？這里是官方DllPlugin說明（圖二所示）:表示是否僅僅暴露入口稠通；總所周知，引用一個(gè)文件买猖，其本身還會(huì)有其他引入改橘；這個(gè)文件，就是入口玉控；好家伙飞主，這么重要的一個(gè)參數(shù)，居然被改動(dòng)了奸远，還如此輕描淡寫既棺；
4、被忽略的tree-shaking
tree-shaking 算是webpack v5 的重大更新懒叛，將其作為默認(rèn)優(yōu)化（entryOnly 默認(rèn)為true 便于dll的tree-shaking）也是無可厚非; 但是丸冕，在框架升級(jí)中，因?yàn)楦鞣N各樣的原因薛窥，我們會(huì)遇到各種品次的第三方庫胖烛，其會(huì)提供各類不同的能力眼姐，甚至一些也不支持tree-shaking；這個(gè)屬性佩番，需要entryOnly：false; 需要加在升級(jí)的DllPlugin options 中众旗；
以上，希望大家能有愉快的編程體驗(yàn)~
