构建与工具

打包工具(bundler)

打包工具(bundler)会把你那一大堆源文件——JavaScript、CSS、图片,以及它们引入的各种库——拼接成几个又小又优化的文件,让浏览器能快速下载并运行。你把代码拆在几十个清爽的小文件里写,打包工具则把它们打包好、准备上路。

它一路上还会顺手收拾:删掉没用到的代码、压缩文件体积、把较新的语法翻译成老浏览器也能看懂的写法。结果是下载次数大大减少,页面加载更快。

如今常见的有 Vite、webpack 和 esbuild。你多半是通过一个「构建(build)」步骤接触到打包工具——它把你易读的项目,变成真正发布出去的那份精简包。

$ npx vite build
dist/assets/index-4f9a.js   142 kB │ gzip: 46 kB

几十个源文件变成了一个又小又优化的包。

它的诞生,是因为浏览器并非总能高效地加载大量小模块。

又称
vitewebpackesbuildrollupbuild tool