前端构建优化：从50MB减少到20MB

前端构建优化：从50MB减少到20MB的踩坑记录

问题背景

项目上线后，页面加载时间超过8秒，首屏渲染耗时4.2秒，用户反馈极差。通过webpack-bundle-analyzer分析发现，打包后的main.js高达50MB，其中包含大量重复依赖和未使用的代码。

优化前分析

# 打包后文件大小
$ webpack-bundle-analyzer dist/stats.json

分析显示：

lodash: 2.1MB
react: 1.8MB
react-dom: 1.5MB
moment.js: 1.2MB
多个UI组件库重复引入

优化策略与实施步骤

1. 按需加载第三方库

// ❌ 优化前
import _ from 'lodash';
import moment from 'moment';

// ✅ 优化后
import debounce from 'lodash/debounce';
import throttle from 'lodash/throttle';
import { format } from 'date-fns';

2. Webpack配置优化

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\\\/](node_modules)[\\\\/]/,
          name: 'vendors',
          priority: 10
        }
      }
    },
    usedExports: true,
    sideEffects: false
  }
};

3. Tree Shaking配置

// package.json
{
  "sideEffects": false,
  "module": "dist/index.js",
  "main": "lib/index.js"
}

实施效果

打包后文件从50MB降至20MB
首屏渲染时间从4.2秒降至1.8秒
页面加载时间从8秒降至3.2秒
gzip压缩后体积从6.8MB降至2.3MB

关键踩坑点

未正确配置sideEffects导致代码未被tree-shake
按需加载时忘记引入样式文件，导致组件样式缺失
配置splitChunks时未合理设置priority，导致重复打包

建议在构建前先用webpack-bundle-analyzer做详细分析，避免盲目优化。