预构建助飞：深入解析 Vite 的免打包机制（二）

引言

在 第一部分 中，我们揭开了 Vite 免打包机制的序幕，探究了模块联邦和 HMR 的奥秘。然而，故事并未就此结束。Vite 还有另一项杀手锏——预构建，它将我们带入了下一阶段的探索之旅。

预构建的真谛

预构建是 Vite 免打包的关键步骤，它在打包过程中发挥着至关重要的作用。其核心思想在于：提前解析和编译代码，生成更小的模块，从而减轻运行时的处理负担。

揭秘 Vite 预构建的实现

Vite 的预构建过程基于 esbuild，一个高效的 JavaScript 构建工具。esbuild 负责解析和编译代码，生成优化的模块。具体流程如下：

1. Vite 识别需要预构建的代码，通常是第三方库或大型应用程序模块。
2. esbuild 介入，解析这些代码并将其转换为更小的模块。
3. 编译后的模块存储在 Vite 的缓存中，以便在需要时快速加载。

预构建的好处

预构建带来了诸多好处，包括：

• 更快的首次加载时间： 预构建的模块更小，可以在首次加载时快速传输和解析。
• 更低的内存占用： 预构建模块占用更少的内存，有助于提高应用程序的性能。
• 更好的 HMR 体验： 预构建模块可实现更快的 HMR 更新，减少等待时间。

如何使用 Vite 预构建

启用 Vite 预构建非常简单，只需在 vite.config.js 文件中添加以下配置：

export default {
  optimizeDeps: {
    include: ['lodash', 'moment'],
  },
};

在这个示例中，我们指定了要预构建的两个库：Lodash 和 Moment。

示例：在 Vue Dev Server 中实现预构建

为了更好地理解预构建的实际应用，让我们在 Vue Dev Server 中创建一个示例。

步骤 1：安装 Vite 和 esbuild

npm install --save-dev vite esbuild

步骤 2：创建 vite.config.js 文件

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  optimizeDeps: {
    include: ['lodash', 'moment'],
  },
});

步骤 3：创建 App.vue 文件

<!-- App.vue -->
<template>
  <h1>Hello World!</h1>
</template>

<script>
import { chunk } from 'lodash';
import moment from 'moment';

console.log(chunk(['a', 'b', 'c', 'd'], 2));
console.log(moment().format('MMMM Do YYYY, h:mm:ss a'));
</script>

步骤 4：运行开发服务器

npm run dev

现在，预构建的 Lodash 和 Moment 模块将在开发服务器启动时加载。

结论

预构建是 Vite 免打包机制不可或缺的一部分，它通过提前编译代码来提高应用程序的加载速度和性能。通过使用 Vite 和 esbuild，我们可以轻松地启用预构建，为我们的应用程序带来显著的改进。