[Webpack] Analyze a Production JavaScript Bundle with webpack-bundle-analyzer

最新推荐文章于 2025-05-23 10:56:44 发布

weixin_30460489

最新推荐文章于 2025-05-23 10:56:44 发布

阅读量73

点赞数

CC 4.0 BY-SA版权

文章标签： webpack javascript ViewUI

原文链接：http://www.cnblogs.com/Answer1215/p/10554664.html

博客指出JavaScript包大小对性能影响大，不仅关乎下载速度，还涉及解析和编译。控制包大小有难度，但了解臃肿来源会更轻松。还介绍了仅针对生产环境进行分析的安装方法，会在dist文件夹生成'bundle_szies.html'文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bundle size has a huge impact on JavaScript performance. It's not just about download speed, but all the JavaScript we ship to the browser needs to be parsed and compiled before it can be executed. Keeping our bundle in check can be difficult, but it's much easier when we can see where the bloat is coming from. In this lesson

Install:

npm i -D webpack-bundle-analyzer

We want to do anaylyzer only for production:

// webpack.config.prod.js

const merge = require('webpack-merge')
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer')
const baseConfig = require('./webpack.config.base')

module.exports = merge(baseConfig, {
  mode: 'production',
  plugins: [new BundleAnalyzerPlugin({
    analyzerMode: 'static',
    openAnalyzer: false,
    reportFilename: 'bundle_sizes.html'
  })]