前端工程化：从 Webpack 到 Vite

浏览器只认 HTML / CSS / JS，但我们写的是 TypeScript、SCSS、带 import 的模块。构建工具干的事，就是把「开发者友好的代码」翻译成「浏览器能跑的代码」。

一、为什么需要构建工具

• 模块化：把代码拆成多个文件，用 import/export 管理依赖；
• 转译：把 TS、新语法转成兼容性更好的 JS；
• 打包与优化：合并文件、压缩体积、做代码分割提升加载速度。

二、Webpack 的核心概念

Webpack 是「配置驱动」的代表，四个概念要记牢：

• entry：从哪个文件开始打包；
• output：产物输出到哪；
• loader：告诉 Webpack 怎么处理非 JS 文件（如 css、图片）；
• plugin：在打包各阶段插入自定义逻辑。

三、Vite 为什么快

Vite 开发时不再预先打包整个项目，而是利用浏览器原生 ES Module 按需编译，只处理当前页面用到的文件，所以启动是秒级的。它只对依赖做预构建（用 esbuild），对源码走按需编译。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: { target: 'es2020' },
})

四、模块化实践

用 ES Module 组织代码，依赖关系一目了然，也方便做 Tree-Shaking（只打包用到的代码）：

export const add = (a, b) => a + b
export const sub = (a, b) => a - b

// main.js
import { add } from './math.js'
console.log(add(2, 3))

五、优化清单

1. 开启代码分割（code splitting），按路由懒加载；
2. 图片走压缩与按需加载；
3. 生产构建开启压缩与缓存哈希；
4. 用 source-map 方便定位线上问题。