该配置由 Modern.js Builder 提供,更多信息可参考 performance.bundleAnalyze。
Object | undefined
用于开启 webpack-bundle-analyzer 插件来分析产物体积。
默认情况下,Builder 不会开启 webpack-bundle-analyzer
。当开启该功能后,内部的默认配置如下:
const defaultConfig = {
analyzerMode: 'static',
openAnalyzer: false,
// target 为编译目标,如 `web`、`node` 等
reportFilename: `report-${target}.html`,
};
你有两种方式开启 webpack-bundle-analyzer
来分析构建产物的体积:
BUNDLE_ANALYZE=true
,比如:BUNDLE_ANALYZE=true pnpm build
performance.bundleAnalyze
来固定开启:export default {
performance: {
bundleAnalyze: {},
},
};
在启用后,Builder 会生成一个分析构建产物体积的 HTML 文件,并在 Terminal 中打印以下日志:
Webpack Bundle Analyzer saved report to /Project/my-project/dist/report-web.html
手动在浏览器中打开该文件,可以看到打包产物的瓦片图;区块的面积越大,说明该模块的体积越大。
你可以通过 performance.bundleAnalyze
来覆盖默认配置,比如开启 server
模式:
export default {
performance: {
bundleAnalyze: process.env.BUNDLE_ANALYZE
? {
analyzerMode: 'server',
openAnalyzer: true,
}
: {},
},
};
在 webpack-bundle-analyzer
的面板中,你可以在左上角控制 Size 类型(默认为 Parsed
):
Stat
:从打包工具的 stats
对象中获取的体积,它反映了代码在压缩之前的体积。Parsed
:磁盘上的文件体积,它反映了代码在压缩之后的体积。Gzipped
:浏览器里请求的文件体积,它反映了代码在压缩和 gzip 后的体积。generateStatsFile
设置为 true 时,将会生成 stats JSON 文件。
export default {
performance: {
bundleAnalyze: {
generateStatsFile: true,
},
},
};
build
进程不能正常退出。BUNDLE_ANALYZE
环境变量来按需开启。dev
阶段不会进行代码压缩等优化,无法反映真实的产物体积,因此建议在 build
阶段分析产物体积。