从 2.3MB 到 280KB：我是如何给前端 JS「瘦」身的 从 2.3MB 到 280KB：我是如何给前端 JS「瘦」身的去年接手一个项目时，我遇到了个棘手问题：首屏加载要等 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 时，我像发现了新大陆。这个功能就像给代码树「梳头发」，把没用的叶子（未引用代码）全摇下来。 「操作步骤：」 确保使用 ES6 模块（import/export），CommonJS（require）不支持 Webpack 配置 mode: 'production'（默认开启 Tree Shaking） 「反面教材：」曾经在 utils.js 里写了 10 个工具函数，却只用到 1 个： // 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 把第三方库和业务代码分开： // 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 中配置： // 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 } } }) ] } }; 压缩前的代码： 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，不用自己拉着跑。 「操作步骤：」 在 index.html 引入 CDN 资源：script src="https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.production.min.js"/script Webpack 配置排除这些库：// webpack.config.js module.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={div加载中.../div Route path="/detail" component={ProductDetail} / /Suspense } Vue 示例： const ProductDetail = () = import('./ProductDetail.vue'); 优化后，ProductDetail 组件的 180KB 代码会被拆成单独的 chunk，只有用户进入详情页时才加载，主文件减少 180KB。 七、用「轻量级替代品」减负把笨重的库换成轻量版，就像把行李箱里的大瓶装洗漱用品换成旅行装。 「案例 1：」用 lodash-es 替代 lodash npm uninstall lodash npm install lodash-es --save 引入方式从： import _ from 'lodash'; // 全量引入，体积大 改为： import { debounce } from 'lodash-es'; // 只引入需要的函数 体积从 72KB 降到 12KB。 「案例 2：」用 date-fns 替代 moment.js npm uninstall moment npm 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%。 持续优化的小技巧把 bundle 体积加入 CI/CD 流程，超过阈值就报警 定期用 npm ls 检查冗余依赖 用 source-map-explorer 深入分析代码构成： npx source-map-explorer dist/*.js 压缩 JS 体积就像整理房间，需要耐心清理冗余，合理收纳。关键是养成「轻量思维」，写代码时多想想：这个库真的有必要吗？这段代码以后会用到吗？持续优化，用户才能感受到「丝滑」的体验。 AI编程资讯AI Coding专区指南：https://aicoding.juejin.cn/aicoding 点击"阅读原文"了解详情~ 阅读原文