Vite与Webpack

vite:统一使用es6 modules模块化，更加关注浏览器，不会将所有的依赖模块打包成一个或多个文件，而是将每个模块作为一个单独的文件进行处理。当开发者在浏览器中访问应用时，Vite 会根据需要动态地加载和编译这些模块。
webpack:兼容es6 modules和common js，更加关注兼容性（浏览器和服务端），每次都需要打包构建，生成一个bundle

由于webpack支持多种模块化，因此最终需要将所有模块化统一，也就需要加载所有模块。而vite不需要，因此vite构建更快可以按需加载

Vite

依赖预构建

预构建通过 esbuild 执行，所以它通常非常快。

Vite 会分析项目的依赖关系，并将这些依赖模块提前进行编译和构建，生成优化后的代码（找到对应的库转化为es6 modules规范然后放到vite/deps下，同时对es模块进行统一集成，也就是把es请求的依赖直接放在文件中，把依赖的依赖放在依赖中，而非再次请求）。这样，在开发者第一次访问应用时，Vite 可以直接提供已经构建好的依赖模块，而不需要再进行实时的编译和构建过程。

解决了

不同包的导出规范不同
方便路径重写
网路多包传输的性能（无论依赖有多少额外的import，最终只会生成一个模块）

配置插件

vite的功能拓展只需要配置插件

// vite.config.js
import legacy from '@vitejs/plugin-legacy'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'],
    }),
  ],
})