Vite和Webpack如何开启ESM

vite为什么比webpack快

Vite之所以比Webpack快，主要是因为它们采用了不同的构建机制和优化策略。以下是几个主要原因：

1、利用现代浏览器的ESM支持

Vite利用了现代浏览器对ES Modules（ESM）的原生支持。在开发环境下，Vite可以直接运行源代码，而无需像Webpack那样先进行打包。由于省去了打包的过程，Vite的启动速度非常快。

2、按需编译

Vite采用了按需编译的策略，只有当请求某个模块时，才会对该模块进行编译。这种按需加载的方式极大地缩减了编译时间。而Webpack在构建时会对整个项目进行扫描和分析，无论模块是否被使用，都会被打包进最终的输出文件中，这会增加构建的时间。

3、不同的构建机制

Webpack是基于Node.js实现的，而Vite则是使用Esbuild预构建依赖。Esbuild是一个使用Go语言编写的打包工具，其构建速度比以Node.js编写的打包器要快得多。这是因为Go语言在编译和执行速度上具有优势，使得Esbuild能够更快速地完成依赖的预构建。

为什么Webpack不基于ES Module

这主要涉及到Webpack的设计初衷和历史背景。Webpack最初设计时，ES Module还未被广泛支持，且JavaScript模块化的方案主要是CommonJS。因此，Webpack在构建过程中需要对模块进行转换和打包，以适配不同的浏览器和JavaScript运行环境。

随着ES Module的普及和浏览器对其原生支持的增强，Webpack也在不断更新和优化，以更好地支持ES Module。然而，Webpack的设计和架构决定了它仍然需要进行一定程度的打包和转换工作，以确保代码能够在不同的环境中正确运行。

此外，Webpack拥有更为丰富的插件系统和配置选项，这使得它可以灵活地处理各种复杂的前端构建需求。因此，在选择构建工具时，需要根据项目的具体需求和场景进行权衡。

总之，Vite之所以比Webpack快，主要是因为其采用了不同的构建机制和优化策略，特别是利用了现代浏览器对ES Module的原生支持和按需编译的策略。而Webpack的设计初衷和历史背景决定了它需要进行一定程度的打包和转换工作，以适应不同的构建需求和环境。

在 Webpack 开启 ESM

1. 配置 `package.json`

确保在 `package.json` 中指定 `"type": "module"`，这将使 Node.js 识别为 ESM 模块。

{
  "type": "module"
}

设置 `"type": "module"` 后，项目的模块系统将以 ES模块为主，提供更好的语法和功能支持。

2.Webpack 配置

export default {
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    module: true,
  },
  experiments: {
    outputModule: true,
  },
};

配置完成后，在代码中就可以使用 `import` 和 `export` 语法。

在Webpack中，`module: true` + `outputModule: true` 通常用于配置代码模块化的设置，这意味着该模块将以 ES 模块的形式输出，便于导入和使用。

在 Vite 开启 ESM

Vite 默认支持 ESM，无需额外配置。只需创建一个 Vite 项目，使用 `import` 和 `export` 即可。

使用 Vite 创建新项目时，选择支持 ESM 的模板。

npm create vite@latest

Vite 的配置文件 `vite.config.js` 或 `vite.config.ts` 中可以直接使用 ES Module 语法：

import { defineConfig } from 'vite';
export default defineConfig({
  // 配置项
});

总之，Webpack 需要一些额外配置，而 Vite 默认支持 ESM，使用起来更为简单。