打包分析工具（webpack-bundle-analyzer）
分析 Bundle 由什么模塊組成
分析什么模塊占據(jù)了比較大的體積
分析是否有什么錯誤的模塊被打包了
-
未優(yōu)化前的代碼2.85M
image.png
安裝及配置
- npm install -D webpack-bundle-analyzer
- 配置環(huán)境變量 .env.analyze
NODE_ENV = production
ANALYZE_MODE = "analyze"
- vue.config.js 里進行配置
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
// 環(huán)境變量的引入
const isAnalyzeMode = !!process.env.ANALYZE_MODE
module.exports = {
configureWebpack: config => {
if (isAnalyzeMode) {
config.plugins.push(
new BundleAnalyzerPlugin({
// 生成靜態(tài)文件
analyzerMode: 'static',
})
)
}
config.plugins.push(
new webpack.IgnorePlugin({
resourceRegExp: /^\.\/locale$/,
contextRegExp: /moment$/,
})
)
}
}
- package.json 里添加一個命令
"scripts": {
...
"build:analyze": "vue-cli-service build --mode analyze",
}
-
啟動 npm run build:analyze 自動打開
image.png
根據(jù)分析圖開始優(yōu)化
1.檢查是否有沒有用的模塊是否打包到了最終的文件中
2.檢查是否有重復加載的模塊，或者是功能大體相同的模塊。
- loash和loash-es重復，可刪除其中一個
image.png
3.按需加載UI框架，使用到什么組件加載什么組件
4.使用 SplitChunksPlugin（https://webpack.docschina.org/plugins/split-chunks-plugin/）分割第三方庫
// 在vue.config.js 里進行配置
config.optimization.splitChunks = {
maxInitialRequests: Infinity,
minSize: 300 * 1024,
chunks: 'all',
cacheGroups: {
antVendor: {
test: /[\\/]node_modules[\\/]/,
name (module) {
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
return `npm.${packageName.replace('@', '')}`
}
},
}
}
- 使用import 進行路由懶加載
// route文件配置component: () => import(/* webpackChunkName: "editor" */ '../views/Editor.vue'),
{
path: '/editor/:id',
name: 'editor',
component: () => import(/* webpackChunkName: "editor" */ '../views/Editor.vue'),
meta: { requiredLogin: true, title: '編輯我的設(shè)計' }
},
最終成果
-
經(jīng)過一系列操作后，代碼1.61M
image.png
