打包分析工具（webpack-bundle-analyzer）
分析 Bundle 由什么模块构成
分析什么模块占据了比力大的体积
分析是否有什么错误的模块被打包了
- 未优化前的代码2.85M
安装及设置
- npm install -D webpack-bundle-analyzer
- 设置情况变量 .env.analyze
NODE_ENV = productionANALYZE_MODE = "analyze"
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin// 情况变量的引入const isAnalyzeMode = !!process.env.ANALYZE_MODEmodule.exports = { configureWebpack: config => { if (isAnalyzeMode) { config.plugins.push( new BundleAnalyzerPlugin({ // 天生静态文件 analyzerMode: 'static', }) ) } config.plugins.push( new webpack.IgnorePlugin({ resourceRegExp: /^\.\/locale$/, contextRegExp: /moment$/, }) ) }}
"scripts": { ... "build:analyze": "vue-cli-service build --mode analyze", }
- 启动 npm run build:analyze 主动打开
根据分析图开始优化
1.查抄是否有没有用的模块是否打包到了终极的文件中
2.查抄是否有重复加载的模块，大概是功能大要雷同的模块。
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('@', '')}` } }, } }// 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
|
