最近接手了一个Vue项目，打包后足足有3MB！页面加载慢得让人抓狂，用户体验直线下降。经过两周的折腾，硬是把体积压到了1.2MB，效果堪比给项目做了个"抽脂手术"！下面就把我亲测有效的配置方案毫无保留地分享给大家。

---

一、揪出"肥胖元凶"（分析工具）

推荐工具：webpack-bundle-analyzer
安装后生成可视化图表，哪个依赖占大头一目了然。最近就发现有个老组件引了完整版的lodash，直接占了300KB！

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

配置：

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

module.exports = {
    
    
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

---

二、必杀技组合拳（核心配置）

1. 启用生产模式（别笑！真有人忘记）

mode: 'production' // 自动开启代码压缩、tree shaking

2. 精准打击无用代码（Tree Shaking）

optimization: {
    
    
  usedExports: true, // 标记未使用代码
  minimize: true,
  minimizer: [
    new TerserPlugin({
    
    
      terserOptions: {
    
    
        compress: {
    
    
          drop_console: true // 干掉所有console.log
        }
      }
    })
  ]
}

避坑指南：确保.babelrc不转译ES模块

{
    
    
  "presets": [["@babel/preset-env", {
    
     "modules": false }]]
}

3. 图片压缩神器

{
    
    
  test: /\.(png|jpe?g|gif)$/i,
  use: [
    {
    
    
      loader: 'image-webpack-loader',
      options: {
    
    
        mozjpeg: {
    
     quality: 65 }, // JPEG质量压缩
        pngquant: {
    
     quality: [0.65, 0.90] }
      }
    }
  ]
}

---

三、高级瘦身方案（按需加载）

1. 路由懒加载（Vue专属）

const UserDetails = () => import('./views/UserDetails.vue')

2. 第三方库按需引入

// 错误示范：import _ from 'lodash'
import isEmpty from 'lodash/isEmpty' // 正确姿势

3. CDN外链大法（慎用！）

externals: {
    
    
  vue: 'Vue',
  'vue-router': 'VueRouter'
}

---

四、效果验证（前后对比）

优化阶段	打包体积	首屏加载时间
原始状态	3.2MB	4.8s
基础优化后	2.1MB	3.2s
高级优化后	1.2MB	1.9s

---

五、常见翻车现场（避坑指南）

1. Tree Shaking失效：检查是否是ES Module格式
2. CSS体积过大：用purgecss删除无用样式
3. Source Map泄露源码：生产环境关闭devtool

---

结语

优化是个持续的过程，建议每次迭代都做打包分析。如果你们团队有其他妙招，欢迎在评论区Battle！觉得有用的朋友点个收藏，下次被领导催性能优化时，你会回来谢我的~

彩蛋：下期预告《Webpack打包速度提升200%的冷门技巧》，关注不迷路！