从 2.3MB 到 280KB：我是如何给前端 JS「瘦」身的

去年接手一个项目时，我遇到了个棘手问题：首屏加载要等 5 秒多，用户投诉像在看「加载动画展」。打开 Chrome 开发者工具一看，主 JS 文件居然有 2.3MB，这哪是代码包，简直是个「代码砖头」。后来经过一系列操作，最终把 JS 体积压缩到 280KB，首屏加载提速 70%。今天就把这套「瘦身秘籍」拆解给大家，每个方法都附带可复现的操作步骤和代码证据。

一、先给代码「拍个 X 光片」

优化前必须知道问题在哪。我用webpack-bundle-analyzer给 bundle 做了次 CT 扫描：

bash 复制代码

# 安装分析工具
npm install webpack-bundle-analyzer --save-dev

在 webpack.config.js 中配置：

ini 复制代码

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin() // 运行时自动打开分析页面
  ]
};

执行打包命令后，浏览器会弹出一个交互式图表，像切蛋糕一样展示每个模块的体积占比。当时我的项目里，一个没用到的echarts-gl占了 400KB，moment.js带着全套语言包占了 230KB，还有一堆重复引入的工具函数 ------ 简直是「代码垃圾场」。

二、Tree Shaking：摇掉多余的「枝叶」

第一次用 Tree Shaking 时，我像发现了新大陆。这个功能就像给代码树「梳头发」，把没用的叶子（未引用代码）全摇下来。

操作步骤：

确保使用 ES6 模块（import/export），CommonJS（require）不支持

Webpack 配置 mode: 'production'（默认开启 Tree Shaking）

反面教材： 曾经在 utils.js 里写了 10 个工具函数，却只用到 1 个：

javascript 复制代码

// utils.js
export const formatMoney = () => { /* ... */ }
export const formatDate = () => { /* ... */ }
export const validatePhone = () => { /* ... */ }
// ...还有7个函数
// 业务代码
import { formatMoney } from './utils' // 只用到1个

未优化时，webpack 会把整个 utils.js 打包进去。开启 Tree Shaking 后，多余的 9 个函数被自动剔除，这个文件体积从 120KB 降到 15KB。

注意点： 避免使用import * as utils这种全量引入，会让 Tree Shaking 失效。

三、代码分割：给代码「分箱打包」

把大文件拆成小文件，就像把行李箱里的衣服分袋包装，需要时再取。我用 Webpack 的 splitChunks 把第三方库和业务代码分开：

css 复制代码

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\/]node_modules[\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
};

配置后，node_modules 里的 React、Vue 等库会被打包成单独的vendors.js，业务代码单独打包。原本 2.3MB 的主文件，拆分后主文件剩 800KB，vendors.js 1.5MB------ 虽然总容量没变，但首屏只需加载 800KB 的业务代码，体验提升明显。

四、Terser 压缩：给代码「挤水分」

Terser 就像代码界的真空包装机，能把冗余代码压到极致。在 Webpack 中配置：

java 复制代码

// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true, // 多进程压缩
        terserOptions: {
          compress: {
            drop_console: true, // 移除console
            drop_debugger: true // 移除debugger
          }
        }
      })
    ]
  }
};

压缩前的代码：

javascript 复制代码

function calculateTotal(price, quantity) {
  // 计算总价
  const total = price * quantity;
  console.log('计算结果：', total); // 调试日志
  return total;
}

压缩后：

javascript 复制代码

function calculateTotal(n,t){return n*t}

变量名被简化，注释和日志被删除，这段代码体积减少了 60%。我项目里的一个业务逻辑文件，从 350KB 压到 140KB。

五、用 CDN「卸载」重型库

把 React、Vue 这些大库交给 CDN 托管，就像搬家时把家具存在 Storage，不用自己拉着跑。

操作步骤：

在 index.html 引入 CDN 资源：

xml 复制代码

<script src="https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.production.min.js"></script>

Webpack 配置排除这些库：

java 复制代码

// webpack.config.js
module.exports = {
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM'
  }
};

原本打包进项目的 React（~40KB）和 ReactDOM（~120KB）被移除，主 bundle 直接减少 160KB。

六、懒加载：需要时再「送货上门」

对于非首屏组件，像弹窗、详情页，用懒加载让它们在需要时才加载。

React 示例：

javascript 复制代码

// 之前：直接引入
import ProductDetail from './ProductDetail';
// 之后：懒加载
const ProductDetail = React.lazy(() => import('./ProductDetail'));
function App() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <Route path="/detail" component={ProductDetail} />
    </Suspense>
  );
}

Vue 示例：

ini 复制代码

const ProductDetail = () => import('./ProductDetail.vue');

优化后，ProductDetail 组件的 180KB 代码会被拆成单独的 chunk，只有用户进入详情页时才加载，主文件减少 180KB。

七、用「轻量级替代品」减负

把笨重的库换成轻量版，就像把行李箱里的大瓶装洗漱用品换成旅行装。

案例 1： 用lodash-es替代lodash

css 复制代码

npm uninstall lodash
npm install lodash-es --save

引入方式从：

javascript 复制代码

import _ from 'lodash'; // 全量引入，体积大

改为：

javascript 复制代码

import { debounce } from 'lodash-es'; // 只引入需要的函数

体积从 72KB 降到 12KB。

案例 2： 用date-fns替代moment.js

lua 复制代码

npm uninstall moment
npm install date-fns --save

日期格式化代码从：

python 复制代码

import moment from 'moment';
moment().format('YYYY-MM-DD');

改为：

javascript 复制代码

import { format } from 'date-fns';
format(new Date(), 'yyyy-MM-dd');

这个替换让我的项目减少了 210KB（moment 带语言包实在太大）。

八、HTTP 压缩：给传输「穿压缩衣」

最后一步，在服务器开启 Gzip 或 Brotli 压缩，让文件在传输时变小。

Nginx 配置 Gzip：

ini 复制代码

gzip on;
gzip_types application/javascript;
gzip_comp_level 6; # 压缩级别1-9，6是平衡点

我项目里的 vendors.js（1.5MB），经 Gzip 压缩后只剩 380KB，浏览器接收后会自动解压。如果用 Brotli 压缩，还能再小 15%-20%。

优化成果复盘

从最初的 2.3MB，经过这一系列操作：

Tree Shaking 移除无用代码：-300KB

代码分割与 Terser 压缩：-500KB

CDN 卸载重型库：-200KB

懒加载拆分组件：-400KB

替换轻量库：-350KB

Gzip 压缩：传输体积再减 60%

最终主 JS 文件从 2.3MB 降到 280KB，首屏加载时间从 5.2 秒优化到 1.8 秒，用户投诉减少了 80%。

持续优化的小技巧

把 bundle 体积加入 CI/CD 流程，超过阈值就报警

定期用npm ls检查冗余依赖

用source-map-explorer深入分析代码构成：

arduino 复制代码

npx source-map-explorer dist/*.js

压缩 JS 体积就像整理房间，需要耐心清理冗余，合理收纳。关键是养成「轻量思维」，写代码时多想想：这个库真的有必要吗？这段代码以后会用到吗？持续优化，用户才能感受到「丝滑」的体验。