vue 项目打包分析和优化

开发者 · 2024-9-14 02:12:19

打包分析工具（webpack-bundle-analyzer）

分析 Bundle 由什么模块构成
分析什么模块占据了比力大的体积
分析是否有什么错误的模块被打包了

未优化前的代码2.85M

安装及设置

npm install -D webpack-bundle-analyzer
设置情况变量 .env.analyze

NODE_ENV = productionANALYZE_MODE = "analyze"

vue.config.js 里举行设置

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$/, }) ) }}

package.json 里添加一个下令

"scripts": { ... "build:analyze": "vue-cli-service build --mode analyze", }

启动 npm run build:analyze 主动打开

根据分析图开始优化

1.查抄是否有没有用的模块是否打包到了终极的文件中
2.查抄是否有重复加载的模块，大概是功能大要雷同的模块。

loash和loash-es重复，可删除此中一个

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

vue 项目打包分析和优化

所属分类: 问答交流

新帖推荐: 30日

推荐作品