打包体积的分析和优化

作者：xie392地址：/#更新时间：2024-12-23

安装

1
pnpm add webpack-bundle-analyzer -D

使用

BundleAnalyzerPlugin 会生成一个 html 文件，打开后可以看到打包后的各个模块的大小，以及依赖关系。

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


3
if(process.env.NODE_ENV === 'production') {
4
    const prodPlugin = new BundleAnalyzerPlugin()
5
    module.exports = {
6
        devtool: 'none',
7
        plugins: [
8
            prodPlugin
9
        ]
10
    }
11
} else {
12
    module.exports = {}
13
}