网站导航
> 技术文档 > 从 2.3MB 到 280KB：我是如何给前端 JS「瘦」身的

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

网友: 技术文档 2025-09-02 18:48:06

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

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

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

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

在 webpack.config.js 中配置：

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

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

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

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

操作步骤：

  1. 确保使用 ES6 模块（import/export），CommonJS（require）不支持
  2. Webpack 配置 mode: \'production\'（默认开启 Tree Shaking）

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

// utils.jsexport 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 把第三方库和业务代码分开：

// webpack.config.jsmodule.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 中配置：

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

压缩前的代码：

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

压缩后：

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

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

五、用 CDN「卸载」重型库

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

操作步骤：

  1. 在 index.html 引入 CDN 资源：

2.Webpack 配置排除这些库：

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

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

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

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

React 示例：

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

Vue 示例：

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

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

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

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

案例 1： 用lodash-es替代lodash

npm uninstall lodashnpm install lodash-es --save

引入方式从：

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

改为：

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

体积从 72KB 降到 12KB。

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

npm uninstall momentnpm install date-fns --save

日期格式化代码从：

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

改为：

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

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

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

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

Nginx 配置 Gzip：

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%。

持续优化的小技巧

  1. 把 bundle 体积加入 CI/CD 流程，超过阈值就报警
  2. 定期用npm ls检查冗余依赖
  3. 用source-map-explorer深入分析代码构成：
npx source-map-explorer dist/*.js

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

原文： https://juejin.cn/post/7530173503787434030

网络标签：

相关问题