webpack-bundle-analyzer主要用于分析webpack打包后各个模块的体积
项目是使用vue-cli 的 webpack-template 为基础模板构建的
- 下载webpack-bundle-analyzer
npm intall webpack-bundle-analyzer –save-dev
- 在webpack.config.prod.js加人
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
- package.json文件加入
"analyz": "cross-env NODE_ENV=production npm_config_report=true npm run build"
- 补充
在 config/index.js 文件中:配置了 build 对象的 bundleAnalyzerReport
在这里主要用于判断是否加入webpack-bundle-analyzer,也可以直接加入webpackConfig.plugin,npm run build也可以直接使用analyzer
module.exports = {
build: {
bundleAnalyzerReport: process.env.npm_config_report
}
}
cross-env
它是运行跨平台设置和使用环境变量(Node中的环境变量)的脚本。
由于windows不支持NODE_ENV=development的设置方式,使用cross-env 能够提供一个设置环境变量的scripts,这样我们就能够以unix方式设置环境变量,在windows上也能够兼容的。
// windows需要下载cross-env
npm i cross-env -S
// 在 NODE_ENV=production 加上 cross-env
版权声明:本文为sinat_37108783原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。