手帐 Blog

主题

04 · 前端工程化：Vite、分包、Tree-shaking ​

目标：说清 Vite 开发态与生产构建差异；会看 bundle；知道按需加载与副作用边界。
官方：Vite Guide · Build Options

1. 背景与目标 ​

「页面能跑」不等于「可维护地变快、变小」。工程化进阶的验收是：能量化体积，并留下砍掉了什么。

2. 核心概念 ​

概念直觉
Dev（esbuild 预构建 + 原生 ESM）改一处几乎秒更新；不等于生产结果
Build（Rollup）Tree-shake、分包、压缩；面试谈的多是这里
Tree-shaking删掉未被静态引用的导出；依赖 ESM + 无破坏性副作用
Code splitting动态 import() / 路由级拆包，换「首屏小、后续按需」
sideEffectspackage.json 声明是否可安全摇树；乱标会摇坏 CSS 副作用包
text
分析体积 → 找大依赖 → 动态 import / 换库 / 去副作用
      → 再测体积 → 记录「砍掉了什么」

3. 最小实践 ​

3.1 看构成 ​

Vite 项目可加 rollup-plugin-visualizer（或构建后用其他分析器）：

js
// vite.config.js 示意
import { visualizer } from 'rollup-plugin-visualizer'

export default {
  plugins: [
    visualizer({ open: true, gzipSize: true }),
  ],
}

跑 pnpm build，盯：框架、UI 库、图标全集、moment 类库、整包 lodash。

3.2 动态拆包 ​

js
// 重页不要塞进主包
const ExportPreview = defineAsyncComponent(() =>
  import('@/components/export-image-preview/...')
)

或路由懒加载。对照 Network：首屏少下一大 chunk。

3.3 Tree-shaking 友好写法 ​

js
// ✅
import { debounce } from 'lodash-es'
// ❌ 易拖进整包（视打包器与包形态而定）
import _ from 'lodash'

自写工具库：用命名导出；避免顶层乱执行副作用。

4. 踩坑与取舍 ​

  1. 误伤 tree-shaking：顶层 polyfill、隐式副作用、错误 sideEffects: false。
  2. 拆太碎：请求瀑布、HTTP/1.1 下更伤；拆「重且低频」即可。
  3. 只优化总分：Lighthouse 好看但业务首屏仍慢——以真实路径为准。
  4. 把 Vite 当魔法：配置再多，大图片 / 未压缩字体 / 全量组件库仍会爆。

默认做法：先分析 → 再动手；每砍一刀写一行笔记。

5. 验收清单 ​

  • [ ] 能口述 Vite dev 与 build 的主要差异
  • [ ] 对一个小项目做过一次体积分析（截图或笔记）
  • [ ] 至少做一处动态 import 或换掉一个大依赖
  • [ ] 留下「砍掉了什么 / 大约少了多少」记录

6. 下一步 ​

→ 05 · 性能优化：渲染路径、长列表、虚拟滚动

参考链接 ​