标签：npm 插件 VUE analyzer webpack bundle env 优化

优化背景： 项目上线后 第一次进入项目要等待接近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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。