webpack 插件 webpack-bundle-analyzer

一、简介

webpack-bundle-analyzer是 webpack 分析打包之后的体积的工具，它将创建一个交互式树图，可视化所有输出包的内容。

二、使用

2.1 安装 webpack-bundle-analyzer

# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer

2.2 添加 webpack-bundle-analyzer 插件

// 添加webpack打包分析插件
const BundleAnalyzerPlugin =
  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

// 在webpack的plugins中加入webpack代码分析
{
  plugins:[
    ...,
    process.env.REACT_APP_API_URL_MODE === "test" &&
    process.env.REACT_APP_ANALYZER_MODE
      ? new BundleAnalyzerPlugin({
          analyzerMode: process.env.REACT_APP_ANALYZER_MODE || "server",
          analyzerPort: 8880,
        })
      : null;
  ]
}

2.3 package.json 中添加命令

{
  "scripts": {
    "--------------------代码打包分析---------------------------": "--",
    "build-test-analyzer": "set REACT_APP_ANALYZER_MODE=server&& set REACT_APP_API_URL_MODE=test&& node scripts/build.js"
  }
}