[Vue CLI 3] 配置 webpack-bundle-analyzer 插件

最新推荐文章于 2025-06-29 09:21:44 发布

程序员鬼哥

最新推荐文章于 2025-06-29 09:21:44 发布

阅读量6.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue web前端

本文链接：https://blog.youkuaiyun.com/weixin_36065510/article/details/83989408

web前端同时被 2 个专栏收录

20 篇文章

订阅专栏

vue

4 篇文章

订阅专栏

本文详细介绍如何使用Webpack-bundle-analyzer插件进行项目打包分析，包括安装配置、vue.config.js设置及npm script运行命令，帮助开发者定位和优化项目中可能存在的打包体积过大问题。

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

1、
//安装
cnpm intall webpack-bundle-analyzer –save-dev


2、
// vue.config.js

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new BundleAnalyzerPlugin()
        ]
      }
    }
  }

3、
// package.json
 "analyz": "npm_config_report=true npm run build"

4、
npm run analyz    //默认8888  端口