前端资源管理的痛点

项目里的 JS、CSS、图片越来越多，直接用 script 标签堆在一起：文件多、加载慢、变量冲突、依赖顺序难维护。构建工具把源码打包成少量优化过的静态文件，让浏览器加载更快。Vite 是新一代前端构建工具，用原生 ES 模块做开发服务器，启动与热更新都很快，上手也简单。

本文核心知识点
  • HMR改代码立即热更新，不用刷新。
  • 预构建依赖提前编译成 ESM。
  • 代码分割按路由拆包，按需加载。
  • 指纹产物文件名带哈希利于缓存。
Vite 构建工具配图：蓝色渐变背景左侧堆叠代码文档方块经中央闪电发光方块处理，右侧流出打包产物方块并带封条，扁平科技插画
源码经过构建工具处理后产出打包产物，正是构建的意象。

Vite 开发服务器与 HMR

Vite 开发时不做整体打包，直接把源码按 ES 模块提供给浏览器，启动几乎秒开。改代码时 Vite 只更新变化的模块，热更新瞬间完成，状态还能保留，不用整页刷新。它按需编译，打开哪个页面才编译哪个，项目再大也不怕。

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

HMR 对组件框架有专门支持，改样式文件基本无感；遇到模块不兼容或边界情况会退化成整页刷新，属于正常现象。

依赖预构建

第三方依赖大多是 CommonJS 格式，浏览器不认识；而且依赖内部 import 很多，请求数爆炸。Vite 启动时把依赖预构建成 ESM 并缓存在 node_modules 里，浏览器只需请求少量预构建文件，加载又快又稳。依赖升级后 Vite 会自动重新预构建。

// vite.config.js
export default {
  optimizeDeps: {
    include: ["lodash-es", "react"]
  }
};

预构建缓存放在 node_modules/.vite 下，出现诡异加载问题先清缓存再试；依赖版本尽量锁定，避免预构建反复触发。

生产构建与代码分割

生产构建用 Rollup 把代码打包并压缩，产物默认带内容哈希文件名，方便缓存。Vite 默认按动态 import 做代码分割：路由懒加载的页面打成独立 chunk，首屏只加载需要的部分，其余按需请求。

const Home = lazy(function(){ return import("./Home.jsx"); });

构建后看产物体积报告，体积过大的 chunk 要排查：大依赖单独分包、公共代码提取、按需引入替代整包引入，都是常用手段。

静态资源处理

图片、字体、SVG 这类静态资源，Vite 会按引用方式处理：小于阈值的转成内联 base64 减少请求，大于阈值的输出成独立文件并加哈希。资源要放在 src 下通过 import 或相对路径引用，才能进构建管线；public 目录的文件原样拷贝不过处理。

import heroImg from "./assets/hero.png";
// 产物：/assets/hero-2a3f8c.png

图片优化建议配合构建流程：先压缩再入库，构建只负责搬运与哈希，别指望构建工具替你压缩图片。