打包分析工具（webpack-bundle-analyzer）
分析 Bundle 由什么模块组成
分析什么模块占据了比较大的体积
分析是否有什么错误的模块被打包了
-
未优化前的代码2.85M
image.png
安装及配置
- npm install -D webpack-bundle-analyzer
- 配置环境变量 .env.analyze
NODE_ENV = production
ANALYZE_MODE = "analyze"
- vue.config.js 里进行配置
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
// 环境变量的引入
const isAnalyzeMode = !!process.env.ANALYZE_MODE
module.exports = {
configureWebpack: config => {
if (isAnalyzeMode) {
config.plugins.push(
new BundleAnalyzerPlugin({
// 生成静态文件
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
根据分析图开始优化
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: '编辑我的设计' }
},
最终成果
-
经过一系列操作后，代码1.61M
image.png
