Vite

​ 与webpack相同，Vite也是前端的构建工具。

与webpack的不同

  • 开发时使用ESM的方式来运行项目，而不对代码进行打包。
  • 生产时使用Rollup打包方式
  • 可自动处理常见静态资源，无需像webpack一样配置loader。
  • 配置简单，开箱即用，无需手动配置。

Plugins(插件)

​ Vite也可使用plugins，使用方法与webpack类似。

​ 配置文件格式为：

1
2
3
4
5
6
7
// vite.config.js
import { defineConfig } from "vite"; // 可有可无，若不添加则写为 export default{}
// 使用es6的模块化来暴露文件
export default defineConfig({
    // ...
    plugins: [],
})

​ 如要使传统浏览器支持可使用@vitejs/plugin-legacy：

​ 安装：

1
npm add -D @vitejs/plugin-legacy

​ 使用：

1
2
3
4
5
6
7
8
9
import { defineConfig } from "vite";
import legacy from`@vitejs/plugin-legacy`
export default defineConfig({
  plugins: [
    legacy({
      targets:['defaults',"ie 11"]
    })
  ]
})

优点

启动速度快

  • Vite：使用ESM功能，启动时无需打包。
  • Webpack：启动时需重新构建整个模块依赖图，即使是微小变动也需要重新打包。

高效能热更新

  • Vite：使用模块级热更新，仅更新被修改的模块。
  • Webpack：每次修改都会触发重打包。

原生ESM支持

  • 浏览器原生ESM是未来主流，Vite便基于此设计。

不足

  • 作为新兴构建工具，插件生态不如webpack丰富。
  • 对老旧浏览器支持不佳。
  • 不适合高度定制化构建流程的大型项目。