vite相关面试题

时间：2025-04-08 07:36:57

  • 如何指定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：转换的专用钩子。可以返回 ：转换后的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

    • 相关文章