tree shaking 是前端打包优化的核心技术，依赖 es 模块静态分析剔除未引用代码；需统一使用 import/export、声明 sideeffects、选用 esm 第三方库（如 lodash-es）、配合 production 模式与 terser 压缩，方可实现体积显著缩减。

精简前端应用打包后的冗余代码，核心是让构建工具“看清”哪些代码真正在用、哪些可以删、哪些不该一起加载。不是靠手动删逻辑，而是靠配置+规范+现代语法协同发力。

启用 Tree Shaking 剔除未引用代码

Tree Shaking 依赖静态分析，只对 ES 模块（import/export）生效，CommonJS（require/module.exports）会直接被跳过。

• 确保项目中所有模块都使用 import 和 export，避免混用 require
• 在 package.json 中声明 "sideEffects": false，告诉打包工具：本包无副作用，可安全剔除未引用导出
• 使用提供 ESM 版本的第三方库，例如 lodash-es 替代 lodash，date-fns 替代 moment
• 检查 node_modules 中的库是否含 "module" 字段，这是 ESM 入口标识

做精准的代码分割与懒加载

不把所有 JS 打成一个大文件，而是按需切分，首次访问只加载当前页必需的部分。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• 路由级懒加载：用 React.lazy + Suspense 或 Vue 的 defineAsyncComponent
• 组件级拆分：对非首屏模块（如弹窗、图表、编辑器）使用 import() 动态导入
• 提取公共依赖：通过 splitChunks 将 react、vue、lodash-es 等稳定库单独打包为 vendors chunk
• 避免重复打包：多个入口共用的工具函数，应抽离为独立模块并纳入 cacheGroups 统一提取

压缩、混淆与运行时瘦身

压缩是最后一步“挤水分”，但前提是前面结构已合理；运行时代码常被忽略，却可能占 bundle 体积近三成。

• 启用 TerserPlugin（Webpack 默认开启），配置 drop_console: true 和 drop_debugger: true 移除调试语句
• 生产环境关闭 devtool 或设为 hidden-source-map，防止 source map 文件泄露或增大体积
• 精简 Webpack Runtime：通过 webpack --json | jq 分析 runtime 模块清单，禁用非必要模块（如兼容旧浏览器的 CompatGetDefaultExportRuntimeModule）
• 移除未使用的 polyfill：用 @babel/preset-env 配合 targets 按需注入，而非全量引入 @babel/polyfill

持续验证与定位问题

优化不能凭感觉，必须量化。每次改动后看体积变化是否符合预期。

• 用 webpack-bundle-analyzer 生成可视化报告，直观看到每个 chunk 的组成和大小
• Vite 项目可用 vite-bundle-visualizer，效果类似
• 对比构建产物中的 .js 文件，重点关注体积突增的模块，检查是否误引整包或未拆分
• Lighthouse 审计中关注 JavaScript boot-up time 和 Unused JavaScript 两项指标

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南