vite相关面试题

• 如何指定vite插件的执行顺序

  enforce：pre | post | 默认

  • Alias
  • 带有pre的用户插件
  • vite的核心插件
  • enforce=’默认’或者没有enforce字段的用户插件
  • vite构建用的插件
  • enforce=post的用户插件
  • vite的后置构建插件（ 最小化、manifest、报告）

• vite常见的hook函数

  1. config：在解析vite配置前调用。用户可以通过这个hook修改config
  2. configResolved：在解析vite配置后调用。可以在这个钩子函数里面获取解析完毕的config，不建议在这里面修稿config配置
  3. configureServer：配置开发服务器的钩子，常用于dev server中添加中间件(middleware)
  4. configurePreviewServer：和configureServer相似，只不过这是预览服务器
  5. transformIndexHtml：转换index.html的专用钩子。可以返回 ：转换后的html字符串；注入到现有HTML中的标签描述符对象数组{ tag, attrs, children }；• 一个包含 {html, tags } 的对象
  6. handleHotUpdate：执行自定义的热更新处理

• Vite是否支持 commonjs 写法

  vite默认是不支持commonJs的写法的，因为vite利用浏览器原生的ES模块，只支持ES6的模块规范。可以在vite的配置文件中引入@vitejs/plugin-commonjs，这样就可以在vite中使用CommonJS 模块

• 为什么说 vite 比 webpack 要快

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

• vite和webpack优缺点对比e

  优点：

  1. 更快的启动时间和更新速度
  2. 更好的开发体验：自动打开浏览器、自动刷新页面
  3. 配置简单。不需要过多的配置就可以搭建基本的开发环境
  4. 更少的依赖。借助原生的ES模块，避免了过多的额外依赖

  缺点：

  1. vite的构建技术主要用于中小型项目，对于大型项目的支持不如webpack
  2. vite主要是针对vue3的单页面应用，对于多页面应用、ssr应用、自定义流程应用不如webpack
  3. 开发环境首屏加载慢，懒加载慢
  4. vite由于基于原生ES模块，不支持commonJs；webpack关注兼容性，vite关注浏览器端的开发体验，vite的生态还不如webpack