⽆包构建

Webpack、Rollup 等都是基于⼀个或多个⼊⼝点模块，通过依赖分析将有依赖关系的模块打包到⼀起，最后形成少数⼏个产物代码包，因此这些⼯具也被称为打包式构建⼯具。
⽆包构建是指这样⼀类构建⽅式：在构建时只需处理模块的编译⽽⽆须打包，把模块间的依赖关系完全交给浏览器来处理。浏览器会加载⼊⼝模块，分析依赖后，再通过⽹络请求加载被依赖的模块。通过这样的⽅式简化构建时的处理过程，提升构建效率。这种通过浏览器原⽣的模块进⾏解析的⽅式⼜称为 Native-ESM（Native ES Module）。

Vite

Vite 是 Vue 框架的作者尤⾬溪最新推出的基于 Native-ESM 的 Web 构建⼯具。它在开发环境下基于 Native-ESM 处理构建过程，只编译不打包，在⽣产环境下则基于 Rollup 打包。

Snowpack

Snowpack 在⽣产环境下默认使⽤⽆包构建⽽⾮打包模式（可以通过引⼊打包插件例如 @snowpack/plugin-webpack 来实现打包模式），⽽ Vite 仅在开发模式下使⽤。

与 Vite 的差异点

• 相同的功能，实现细节不同：例如对 Bare Module 的处理，除了转换后前缀名称不同外（Vite 使⽤ /@module/ 前缀，⽽ Snowpack 使⽤ /web_modules/ 前缀)，Vite ⽀持类似 "AAA/BBB" 类型的⼦模块引⽤⽅式，⽽ Snowpack ⽬前尚不⽀持。
• ⼯具稳定性。
• 插件体系：除了版本差异外，Snowpack 提供了较完善的插件体系，⽀持⽤户和社区发布⾃定义插件，⽽ Vite 虽然也内置了许多插件，但⽬前并没有提供⾃定义插件的相关⽂档。
• 打包⼯具：在⽣产环境下，Vite 使⽤ Rollup 作为打包⼯具，⽽ Snowpack 则需要引⼊插件来实现打包功能，官⽅⽀持的打包插件有 @snowpack/plugin-webpack 和 @snowpack/plugin-parcel，暂未提供 Rollup 对应的插件。
• 特殊优化：Vite 中内置了对 Vue 的⼤量构建优化，因此对 Vue 项⽬⽽⾔，选择 Vite 通常可以获得更好的开发体验。

⽆包构建的优点

⽆包构建的最⼤优势在于构建速度快，尤其是启动服务的初次构建速度要⽐⽬前主流的打包构建⼯具要快很多，原因如下：

• 初次构建启动快：打包构建流程在初次启动时需要进⾏⼀系列的模块依赖分析与编译，⽽在⽆包构建流程中，这些⼯作都是在浏览器渲染⻚⾯时异步处理的，启动服务时只需要做少量的优化处理即可（例如缓存项⽬依赖的 Bare Modules），所以启动⾮常快。
• 按需编译：在打包构建流程中，启动服务时即需要完整编译打包所有模块，⽽⽆包构建流程是在浏览器渲染时，根据⼊⼝模块分析加载所需模块，编译过程按需处理，因此相⽐之下处理内容更少，速度也会更快。
• 增量构建速度快：在修改代码后的 rebuild 过程中，主流的打包构建中仍然包含编译被修改的模块和打包产物这两个主要流程，因此相⽐之下，只需处理编译单个模块的⽆包构建在速度上也会更胜⼀筹（尽管在打包构建⼯具中，也可以通过分包等⽅式尽可能地减少两者的差距）。

⽆包构建的缺点

• 浏览器⽹络请求数量剧增：⽆包构建最主要⾯对的问题是，它的运⾏模式决定了在⼀般项⽬⾥，渲染⻚⾯所需发起的请求数远⽐打包构建要多得多，使得打开⻚⾯会产⽣瀑布式的⼤量⽹络请求，将对⻚⾯的渲染造成延迟。这对于服务稳定性和访问性能要求更⾼的⽣产环境⽽⾔，通常是不太能接受的，尤其对不⽀持 HTTP/2 的服务器⽽⾔，这种处理更是灾难性的。因此，⼀般是在开发环境下才使⽤⽆包构建，在⽣产环境下则仍旧使⽤打包构建。
• 浏览器的兼容性：⽆包构建要求浏览器⽀持 JavaScript module 特性，尽管⽬前的主流浏览器已⼤多⽀持，但是对于需要兼容旧浏览器的项⽬⽽⾔，仍然不可能在⽣产环境下使⽤。⽽在开发环境下则通常没有这种顾虑。