使用webpack-bundle-analyzer分析webpack包

  • Post author:
  • Post category:其他



webpack-bundle-analyzer主要用于分析webpack打包后各个模块的体积


项目是使用vue-cli 的 webpack-template 为基础模板构建的

  1. 下载webpack-bundle-analyzer
npm intall webpack-bundle-analyzer –save-dev
  1. 在webpack.config.prod.js加人
if (config.build.bundleAnalyzerReport) {
    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
    webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
  1. package.json文件加入
"analyz": "cross-env NODE_ENV=production npm_config_report=true npm run build"
  1. 补充


在 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 版权协议,转载请附上原文出处链接和本声明。