webpack 简单笔记（三）vue-cli 使用 webpack-bundle-analyzer 分析

当我们使用CommonsChunkPlugin插件时可以使用webpack-bundle-analyzer插件来分析分块是否达到我们的目地

安装

npm install --save-dev webpack-bundle-analyzer

使用

在webpack.config.js里的plugins里加

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

最后命令行启动

webpack --profile --json > stats.json

如果你是vue-cli 就使用

npm run build --report

This module will help you:

1. Realize what's really inside your bundle
2. Find out what modules make up the most of its size
3. Find modules that got there by mistake
4. Optimize it!1