认识 vite

什么是 vite ？

vite 是由 尤雨溪 开发的一款前端构建工具，最初是为 Vue 定制的，后来已经支持多种框架（如：React、Svelte）和通用的 JavaScript 项目。

Vite 的核心目标就是 极快的开发体验 和 高效的构建性能，解决传统工具（如：Webpack）在大项目中的性能瓶颈。

vite 为什么比 webpack 快？

在开发环境中：

• webpack：

  • 开发服务器启动时，webpack 会将所有的文件都构建一遍，从入口文件去索引整个项目，编译成一个或者多个单独的 js 文件，不管模块是否被执行，都要编译/打包到这个 bundle 中。而随着项目越来越复杂，模块越来越多，bundle 越来越大，打包的速度自然就越来越慢了，
  • 在热更新方面，当改动某个模块后，webpack 会将所有模块都重新编译一遍。

• vite：

  • 开发服务器启动时，不会进行打包/编译，而当浏览器请求某个模块时，根据需要对模块内容进行编译。其原理就是由于现在浏览器支持了 ESM，会自动向依赖的模块发送请求，这种“按需动态编译”极大地缩短了编译时间。
  • 在热更新模块时，当改动某个模块后，仅需让浏览器重新请求该模块即可。
  • 在底层实现上，开发环境借助了 esbuild，而 esbuild 是使用 go 语言编写的，速度极快。

在生产环境中：

• webpack：

  • webpack 在打包时，需要额外的兼容性工作，消耗了更多的时间。

• vite：

  • 在底层实现上，生产环境下借助了 rollup。rollup 擅长于处理 ESM 格式的模块。
  • 由于 rollup 专注于 ESM 模块，它的 tree shaking 更加高效。

vite 之所以快能够秒启动，根本原因是？

开发模式下，vite 没有预先打包过程，直接启动的服务器。而后续是 按需编译/动态编译，根据访问地址，再去打包/编译需要的东西。