vite基础

原理：vite利用浏览器原生的ES模块，本质就是让浏览器接管部分打包工作。当浏览器请求资源时，按需为浏览器提供对应模块，浏览器接收到就会执行

浏览器原生的ES模块的能力：允许在不将代码打包到一起的情况下运行js应用

• vite由两部分组成

  • 开发服务器（浏览器原生的ES模块），有丰富的内建能力，快速的热更新（HMR)和降低了启动时间
  • 构建指令（底层rollup打包），零配置就可以输出用于生产环境的高度优化的静态代码

• 热更新

  1. webpack：当一个文件变化时，会重新构建整个包文件，随着项目体积的增大，构建速度就会越来越慢
  2. vite：当一个文件变化时，只需要构建相应的模块，无论项目体积多大，更新速度就很快
  3. vite：合理利用浏览器的缓存来加速页面的更新。源码模块会根据 304 Not Modified进行协商缓存，依赖模块会根据Cache-Control: max-age=31536000,immutable 进行强缓存，因此一旦缓存，不会再次请求。

• vite生产环境也需要打包

  1. 如果生产环境借助浏览器的ESM，就会产生大量的额外网络请求
  2. 不使用esbuild，而是rollup，这是因为esbuild在代码分割，css处理还有不足

• 依赖预构建

  vite在首次启动时，会进行依赖于构建

  • CommonJs 和 UMD 的兼容性：在开发阶段，vite的开发服务器会把所有源码视为原生的ES模块。vite必须把CommonJs和UMD发布的依赖全部转换为ES
  • vite将含有所有内部模块的依赖视为一个模块，提升页面加载性能。比如lodash-es应有600多个内置模块，当import {debounce} from 'lodash-es'; 时，浏览器就会同时发起600多个请求，因此预构建为一个模块，就只需发起一个请求