[Webpack] 打包分析

[renjie-run]

如何分析打包后各个依赖项的包体积大小？使用 webpack-bundle-analyzer 轻松实现！

1. 安装 webpack-bundle-analyzer

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

2. Webpack 配置文件中配置该分析工具

   const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
   module.exports = {
   　　plugins: [
   　　　　...
   　　　　new BundleAnalyzerPlugin(),
   　　],
   };

3. 如何使用？ 以 create-react-app 生成的 React 项目为例，使用 npm run build 命令进行打包并分析，分析完毕后会自动打开分析页面（默认分析地址为：http://127.0.0.1:8888/）。

   "scripts": {
   　　...
   　　"build": "node scripts/build.js",
   },