VUE首屏加载优化 性能优化分析插件安装分享
作者：互联网
优化背景： 项目上线后 第一次进入项目要等待接近50s才能进入页面。一开始觉得是电脑配置问题或者网络问题。F12后发现加载资源过慢 其中一个chunk-***js文件有10m 加载了45s 。我们使用的是2m带宽 ，实际下载速度200kb/s上下。 差不多是要50s左右。所以想知道为啥这个js这么大，需要安装一个打包分析插件。-webpack-bundle-analyzer
第一步 ：在项目中下载 安装npm install webpack-bundle-analyzer –save-dev
第二步：配置
1、 在vue.config.js 文件中 加入
chainWebpack: config => {
if (process.env.use_analyzer) { // 分析
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
},
是在chainWebpack 这个属性里面加入
2、还需要在package.json 里面加入命令行
"scripts": {
"serve": "vue-cli-service serve --host 0.0.0.0",
"build": "vue-cli-service build",
"analyzer": "cross-env use_analyzer=true npm run build" //新增的这行
},
第三步：执行
然后再终端输入命令 npm run analyzer 会发现保存 是因为少下了一个插件 cross-env 使得您可以使用单个命令
npm i cross-env 之后再执行npm run analyzer
等打包完后会出现分析包界面
然后根据哪几个插件占比比较大 进行拆分 和按需加载
标签：npm,插件,VUE,analyzer,webpack,bundle,env,优化 来源： https://www.cnblogs.com/jackie-song/p/15979487.html