精简依赖和优化打包配置是javascript加载优化最直接见效的两个抓手；需精准剔除冗余依赖、启用tree shaking、合理splitchunks分包、压缩与构建清理双管齐下。
精简依赖和优化打包配置是 JavaScript 加载优化中最直接、见效最快的两个抓手。体积降下来，首屏加载时间、解析执行开销、内存占用都会同步改善——不是“可能变快”，而是实测可量化提升。
精准剔除冗余依赖
很多项目体积膨胀的根源不在业务代码，而在“不知不觉引入”的第三方包。
- 用 npm ls --depth=0 查看顶层依赖，逐个确认是否真正被使用；lodash、moment、axios 等高频“嫌疑包”要重点审查，优先替换为更轻量的替代品（如 date-fns 替 moment、ky 替 axios）
- 避免全量引入：改
import { debounce } from 'lodash'为import debounce from 'lodash/debounce'，或用babel-plugin-lodash自动重写 - 检查
package.json中的peerDependencies和devDependencies是否误入生产环境；用webpack-bundle-analyzer扫描后，发现某 UI 库带了整套图标字体（2MB+），实际只用了 3 个图标——改用 SVG 内联或按需导入即可砍掉 95%
启用 Tree Shaking 并确保生效
Tree Shaking 不是“开了就自动起效”，它依赖模块规范和导出方式。
- 必须使用 ES Module 语法（
export/import），CommonJS（require/module.exports）无法被摇掉 - 禁止在业务代码中出现副作用导入，例如：
import './polyfill.js'或import 'core-js/stable'——这类语句会阻止 Webpack 判定模块可被安全移除；应通过entry单独引入，或用sideEffects: false显式声明无副作用 - 在
webpack.config.js中设置mode: 'production'，并确认optimization.usedExports: true已启用（Webpack 5+ 默认开启）
合理配置 splitChunks 实现智能分包
目标不是“多拆几个包”，而是让浏览器缓存更有效、首屏加载更聚焦。
- 把第三方库单独抽成
vendors.js：设置cacheGroups.vendors.test: /[\/]node_modules[\/]/，配合priority: 10确保高优提取 - 提取公共业务模块：比如多个页面都用到的
utils/request.js、hooks/useAuth.js，可归入common.js，避免重复打包 - 限制最小 chunk 体积：
minSize: 20000（20KB），防止为极小模块生成额外请求；同时设maxAsyncRequests: 6防止懒加载时并发过多影响弱网体验
压缩与构建时清理双管齐下
压缩不是最后一步，而是构建链路中可编程控制的“收口动作”。
- 启用 TerserPlugin 并配置关键选项：
drop_console: true、drop_debugger: true、compress.passes: 2（多轮压缩更彻底） - 用
DefinePlugin在编译期移除开发专用逻辑，例如将process.env.NODE_ENV === 'development'全局替换为'production'，让压缩器能顺藤摸瓜删掉整个 if 分支 - 图片、字体等静态资源别漏掉：配置
image-minimizer-webpack-plugin或 Vite 的build.assetsInlineLimit，把小图转 base64，大图走压缩+WebP
不复杂但容易忽略。真正起效的不是堆砌配置，而是每次发版前用 webpack-bundle-analyzer 快速过一遍体积构成，盯着 top 3 大模块动手——往往一次重构就能压掉 300KB+。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
