Tree Shaking 通过静态分析移除未使用的导出代码，需使用 ES6 模块语法并声明无副作用；代码分割则利用动态导入和 SplitChunks 将代码拆分为按需加载的 chunk，提升首屏性能。两者结合可显著减小包体积并优化加载时机，使应用更轻更快。
Tree Shaking 和代码分割是 JavaScript 打包优化中的两个核心手段，能显著减少生产环境的资源体积、提升加载性能。它们解决的问题不同但互补：Tree Shaking 消除无用代码，代码分割则合理组织代码的加载时机。
Tree Shaking：移除未使用的导出
Tree Shaking 是一种“死代码消除”技术，依赖 ES6 的静态模块语法（import / export）在构建时分析哪些函数或变量从未被使用，从而从最终打包结果中剔除。
要让 Tree Shaking 正常工作，需满足几个条件：
- 使用 ES6 模块语法，避免 require 或 module.exports
- 打包工具需支持（如 Webpack、Rollup、Vite）且运行在生产模式下
- 确保没有副作用（side effects），或在 package.json 中明确声明
例如，你引入一个工具库但只用了其中一个方法：
立即学习“Java免费学习笔记（深入）”；
import { debounce } from 'lodash-es';Tree Shaking 能确保只有 debounce 被打包，而不是整个 lodash 库。
若你的模块执行了全局操作（如修改原型、注册事件），需在 package.json 中设置：
"sideEffects": false或列出有副作用的文件：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
代码分割：按需加载，提升首屏速度
代码分割将打包后的 bundle 拆分为多个较小的文件，按路由、功能或优先级异步加载，避免用户首次访问时下载全部代码。
常见实现方式包括：
- 入口点分割：手动配置多个 entry，在多页应用中常用
- 动态导入（Dynamic import）：使用 import() 语法实现懒加载
- 自动分割（SplitChunks）：Webpack 中通过 splitChunks 提取公共模块
比如在路由组件中：
const About = () => import('./About.vue');这样该组件的代码会被单独打包，在导航到对应页面时才加载。
SplitChunks 插件可配置提取：
- 第三方库（node_modules）到 vendor chunk
- 多个页面共用的模块到 common chunk
- 超过一定体积的模块进行拆分
实际优化建议
结合两者能达到最佳效果：
- 使用 ES6 模块写法，确保 Tree Shaking 生效
- 通过动态导入对路由或大功能模块做代码分割
- 配置 SplitChunks 缓存组，分离框架、UI 库和业务逻辑
- 利用 prefetch 或 preload 提示浏览器预加载关键资源
- 定期分析 bundle 构成（如 webpack-bundle-analyzer）找出冗余
基本上就这些。Tree Shaking 减体积，代码分割控加载节奏，两者配合能让前端应用更轻更快。
