vue中使用webpack-bundle-analyzer分析打包大小

最新推荐文章于 2025-03-28 00:35:20 发布

maxiaoxin1314

最新推荐文章于 2025-03-28 00:35:20 发布

阅读量4.2k

点赞数

分类专栏： Vue webpack 文章标签： vue 前端

本文链接：https://blog.youkuaiyun.com/maxiaoxin1314/article/details/124444053

版权

Vue 同时被 2 个专栏收录

13 篇文章

订阅专栏

webpack

2 篇文章

订阅专栏

本文介绍了如何在Vue CLI 2和3中集成webpack-bundle-analyzer进行包大小分析。通过安装插件、配置vue.config.js或webpack配置文件，以及在package.json中添加命令，可以在构建过程中生成打包文件的详细分析报告，帮助优化项目资源，减少不必要的依赖，提高应用性能。

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

1，在vue-cli3中：

首先先安装webpack-bundle-analyzer：

npm install webpack-bundle-analyzer --save-dev

在vue.config.js文件中

chainWebpack: (config) => {
    if (process.env.use_analyzer) {
      config.plugin("webpack-bundle-analyzer").use(require("webpack-bundle-analyzer").BundleAnalyzerPlugin);
    }
}

在package.json文件中加上：

"analyzer": "cross-env use_analyzer=true npm run build"

cross-env是运行跨平台设置和使用环境变量的脚本，能够提供一个设置环境变量的scripts，让你能够以unix方式设置环境变量，然后在windows上也能兼容运行

最后直接运行： npm run analyzer就行：

2，同样在vue-cli2中

先安装webpack-bundle-analyzer

在webpack.prod,conf.js文件中：

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

plugins：

//  可以是`server`，`static`或`disabled`。
//  在`server`模式下，分析器将启动HTTP服务器来显示软件包报告。
//  在“静态”模式下，会生成带有报告的单个HTML文件。
new BundleAnalyzerPlugin({
      analyzerMode: "static",
      analyzerHost: "127.0.0.1",
      analyzerPort: 8882, //注意是否有端口冲突
      reportFilename: "report.html",
      defaultSizes: "parsed",
      openAnalyzer: true,
      generateStatsFile: false,
      statsFilename: "stats.json",
      statsOptions: null,
      logLevel: "info",
    }),

if (config.build.bundleAnalyzerReport) {
  undefined;
  // const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

  webpackConfig.plugins.push(new BundleAnalyzerPlugin());
}

在package.json文件中：

在build的后面加上report：

"build": "node build/build.js --report"

最后直接运行： npm run build --report

会在static文件中生成了report.html文件，直接打开就可以看到打包文件的分析