我的Vue项目胖成球了！用Webpack给它狠狠瘦个身

前几天我正准备下班，运维同事一个电话打过来："小杨，你们前端打包后的文件怎么都快100M了？服务器都快被撑爆了！" 我老脸一红，赶紧打开那个久未关注的 dist 目录------好家伙，一个个chunk文件胖得跟球一样。

这不行，必须得给它瘦身！作为一名和Webpack打交道多年的"健身教练"，我决定对我的Vue项目来一次彻底的"减肥计划"。下面就是我用的"减肥食谱"和"健身流程"，亲测有效，打包体积直接从"庞然大物"变"苗条少女"。

第一步：诊断与分析（先上秤）

减肥前，得先知道胖在哪。我用了 webpack-bundle-analyzer 这个神器来给项目做"体测"。

javascript 复制代码

// 安装：npm install --save-dev webpack-bundle-analyzer

// 在 vue.config.js 中配置
const { defineConfig } = require('@vue/cli-service')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      // 打包后自动打开分析报告页面
      new BundleAnalyzerPlugin({
        analyzerMode: 'server',
        openAnalyzer: true,
      })
    ]
  }
})

运行 npm run build 后，一个直观的图表页面就打开了。一眼我就发现了问题：某个第三方库 xxx-ui 和 moment.js 占了大头！心里立刻有了数。

第二步：核心"瘦身"手段（开始减肥）

1. 针对第三方库的"抽脂手术" - 配置 externals

我发现 xxx-ui 这个库又大又常用，但完全可以通过CDN引入。这招叫 externals，能把它从打包结果里"抽"出去。

javascript 复制代码

// vue.config.js
module.exports = defineConfig({
  configureWebpack: {
    externals: {
      // key: 模块名, value: 全局变量名
      'xxx-ui': 'XUI' // 告诉Webpack：遇到import 'xxx-ui'时，别打包，去窗口找XUI这个全局变量
    },
    // ... 其他配置
  }
})

然后在 public/index.html 中通过 <script> 标签引入CDN链接。这样，这个库就不会占用我们的打包体积了。

2. 精准的"膳食管理" - 按需引入（Babel插件）

很多UI库，像 Element-Plus，支持按需引入。我只用到了Button和Input，那就只打包这两个，绝不把整个厨房都搬来。

javascript 复制代码

// 对于支持按需引入的库，我通常会这样配置
// 首先安装 babel-plugin-import
module.exports = defineConfig({
  chainWebpack: (config) => {
    config.plugin('babel-plugin-import').use(require('babel-plugin-import'), [{
      libraryName: 'element-plus',
      customStyleName: (name) => {
        return `element-plus/theme-chalk/${name}.css`;
      },
    }]);
  }
})

这样，我在代码里 import { ElButton } from 'element-plus' 时，Webpack就会很聪明地只处理Button相关的代码。

3. 神奇的"代餐奶昔" - 替换臃肿库

分析报告显示 moment.js 这个时间库体积很大，我果断用 day.js 这个"代餐"替换了它。功能几乎一样，但体积小了太多！

bash 复制代码

npm uninstall moment
npm install dayjs

然后在项目里全局替换一下引用，几乎是无痛切换，但打包体积立竿见影地小了一圈。

4. 终极"塑形" - 代码分割与压缩

最后，再用Webpack的"塑形仪"来雕琢一下线条，也就是代码分割和压缩。

javascript 复制代码

module.exports = defineConfig({
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
        cacheGroups: {
          vendor: {
            test: /[\/]node_modules[\/]/,
            name: 'chunk-vendors',
            priority: 10,
            reuseExistingChunk: true,
          },
          common: {
            name: 'chunk-common',
            minChunks: 2,
            priority: 5,
            reuseExistingChunk: true,
          },
        },
      },
    },
  },
})

这个配置能把第三方库、公共代码自动拆分成独立的chunk，利用浏览器并行加载，用户体验更快。

成果展示

经过这一套"组合拳"下来，我再次运行打包命令。好家伙，打包体积从近百M直接降到了十几M，运维同事都跑来问我用了什么黑科技。

其实哪有什么黑科技，无非就是找准问题、对症下药。Webpack给了我们非常强大的优化工具，关键在于我们是否愿意花时间去分析和配置。

希望我的这次"项目减肥"经历能给你一些启发。如果你的Vue项目也"胖"了，不妨也用这些方法试试看？如果你有更好的"瘦身"秘籍，也欢迎在评论区分享出来，我们一起交流学习！