手机网站 jquery 特效,龙华做网站怎么样,芜湖网站 建设,开发软件需要哪些人员当我们需要分析打包文件dist里哪些资源可以进一步优化时#xff0c;就可以使用包分析器插件webpack-bundle-analyzer。NPM上的介绍是使用交互式可缩放树图可视化 webpack 输出文件的大小。
我的是vue2项目。 1、webpack-bundle-analyzer插件的安装
$ npm install --save-dev…当我们需要分析打包文件dist里哪些资源可以进一步优化时就可以使用包分析器插件webpack-bundle-analyzer。NPM上的介绍是使用交互式可缩放树图可视化 webpack 输出文件的大小。
我的是vue2项目。 1、webpack-bundle-analyzer插件的安装
$ npm install --save-dev webpack-bundle-analyzer 2、在 webpack.config.js 中找到 chainWebpack加入以下配置
module.exports {chainWebpack: config {// 配置包分析器config.plugin(webpack-bundle-analyzer).use(require(webpack-bundle-analyzer).BundleAnalyzerPlugin)}
} 3、在package.json的scripts中添加以下命令行
analyz: cross-env NODE_ENVproduction vue-cli-service build --mode test 4、npm run analyz重新运行项目 报错了“cross-env is not recognized as an internal or external command, operable program or batch file.” 解决方法
webpack打包报错原因是windows不支持 cross-env,安装模块即可:
npm install -g cross-env 5、npm run analyz重新运行项目 6、浏览器会自动打开127.0.0.1:8888我们手动输入localhost:8888也是可以的
