跳到主要内容

vite✅

vite 和 webpack 区别​

答案
对比项ViteWebpack
开发模式直接启动服务器，请求时按需编译, 采用浏览器原生支持的 ESM 特性先打包，再启动开发服务器
构建速度开发环境极快（基于 Go 的 esbuild）较慢，特别是大型项目
热更新模块级别更新，精准快速文件修改后续重新构建
生产构建基于 ESM 的构建，可能产生较多小文件基于 chunk 的构建，更灵活
配置复杂度简单，倾向于零配置复杂，需较多配置
浏览器支持现代浏览器（需支持 ESM）通过 polyfill 支持旧浏览器

核心区别：Vite 利用浏览器原生 ES 模块和 esbuild 实现极速开发体验，而 Webpack 通过全量构建提供更全面的兼容性和灵活性。

延伸阅读

vite 为什么开发和构建会采用不同工具链？​

答案

  1. 为什么采用双架构

    • 优化对立目标: 开发环境追求速度和即时反馈，生产环境追求性能和体积优化
    • 场景差异化: 开发时需要快速热更新和按需编译，生产需要完整打包和优化
    • 各取所长: 利用不同工具的优势解决不同阶段的问题

  2. 实现方式

    • 开发环境: 使用 esbuild (Go编写) 进行极速编译，结合浏览器原生ESM实现无需打包
    • 生产环境: 使用 Rollup 进行更全面的代码优化、Tree-shaking 和代码分割
    • 工具分工: esbuild 负责快速转换，Rollup 负责优化打包
    • 中间层抽象: Vite 在两套工具链之上提供统一API和配置界面

  3. 局限性

    • 环境一致性: 开发和生产环境可能存在差异，导致"线上才出现的问题"
    • 配置复杂性: 需要维护和协调两套工具的配置
    • 边界场景: 某些高级功能在两种模式下可能有不同行为

Vite 选择这种架构是为了在不牺牲开发体验的前提下提供高质量的生产构建，权衡速度与优化的需求。

vite dev 是如何工作的, 为什么快，有什么缺点?​

答案
  1. 全部都以 esm 模式 处理
  2. js 直接加载
  3. 其他类型文件通过及时编译处理后加载
    1. less 编译后，转为 css 插入 style
    2. TypeScript 编译后，转为 js 插入 script
    3. tsx 编译后，转为 jsx 转为 createElement 的 js 插入
22%