no-bundle构建
no-bundle 什么意思
无包构建
为什么需要构建工具
- 处理其他类型文件使其能被浏览器正常加载 —— 许多其他类型的文件需要编译处理为 ES6 模块才能被浏览器正常加载（JSX、Vue、TS、CSS、Image 等）。
- 解决引用路径的问题 —— 许多第三方依赖包在通过第三方 URL 引用时，不仅过程烦琐，而且往往难以进行灵活的版本控制与更新，因此需要构建工具来解决这类问题。
- 为开发提供辅助工具 —— 对于现实中的项目开发而言，一些便利的辅助开发技术，例如热更新、sourceMap 等还是需要由构建工具来提供。
什么是无包构建
它的构建方式是：
- 在构建时只需处理模块的编译而无须打包，把模块间的相互依赖关系完全交给浏览器来处理。
- 浏览器会加载入口模块，分析依赖后，再通过网络请求加载被依赖的模块。
这种通过浏览器原生的模块进行解析的方式又称为 Native-ESM（Native ES Module）。
无包构建工具
Vite
基于 Native-ESM 的 Web 构建工具。
在开发环境下基于 Native-ESM 处理构建过程，只编译不打包，在生产环境下则基于 Rollup 打包。
无包构建 VS 打包构建
无包构建的优点
- 初次构建启动快： 无包构建流程中，模块依赖分析与编译都是在浏览器渲染页面时异步处理的
- 按需编译： 在浏览器渲染时，根据入口模块分析加载所需模块，编译过程按需处理，因此相比之下处理内容更少，速度也会更快。
- 增量构建速度快： rebuild 过程中，只需处理编译单个模块。
无包构建的缺点
- 浏览器网络请求数量剧增： 无包构建最主要面对的问题是，它的运行模式决定了在一般项目里，渲染页面所需发起的请求数远比打包构建要多得多，使得打开页面会产生瀑布式的大量网络请求，将对页面的渲染造成延迟。这也是 Vite 在开发环境下才使用无包构建，在生产环境下则仍旧使用打包构建的原因吧。
- 浏览器的兼容性：
can i use: JavaScript modules via script tag
尽管目前的主流浏览器已大多支持，但是对于需要兼容旧浏览器的项目而言，仍然不可能在生产环境下使用。