webpack-bundle-analyzer 优化实战

接入步骤

安装依赖

// npm 方式
npm install webpack-bundle-analyzer --save-dev

// yarn 方式
yarn -D webpack-bundle-analyzer
复制代码

配置webpack.config.js文件

使用环境变量控制是否执行该 plugin，相关配置参数可查看 官方文档

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports={
  plugins: [
    // ... 其他 plugin 配置
    process.env.ANALYZER && new BundleAnalyzerPlugin()  // 使用默认配置
  ]
}
复制代码

配置package.json 文件

不同项目命令不同，根据自身的项目进行调整，这边是对 build 完后的包进行分析。

{
 "scripts": {
    "analyzer": "cross-env ENV_TYPE=staging ANALYZER=true node scripts/build.js"
  }
}
复制代码

执行命令

npm run analyzer
// or 
yarn analyzer
复制代码

执行效果

浏览器会自动打开 127.0.0.1:8888，可查看相关模块的依赖的组成

实战案例

案例一：发现同一库存在多个版本

发现竟然引入了三个 @ant-design/icons 的模块，先使用 npm 命令查看一下包的依赖状态

npm list @ant-design/icons
复制代码

结果：还真的依赖了 @ant-design/icons 的 v4.2.2 和 v4.4.0 两个版本

解决方式：将 @ant-design/icons 升级到 4.4.0 版本即可。

重新安装依赖再次分析后发现已经没有引入多个 @ant-design/icons 模块了。

持续更新中...