使用 Vite 和 CDN 加速 React 应用

随着前端应用的复杂性不断增加，性能优化变得越来越重要。本文将介绍如何使用 Vite 和 CDN 来提高 React 应用的加载速度。

什么是 Vite？

Vite 是一个基于浏览器原生 ESM 的开发服务器和构建工具。它利用了浏览器对 ES 模块的原生支持，实现了快速的开发服务器和高效的构建流程。Vite 具有以下特点：

• 快速的冷启动和热更新
• 基于 Rollup 的高效构建
• 插件生态，可与现有的 Rollup 插件兼容
• 支持 Vue、React、Preact 等多种框架

使用 Vite 构建 React 应用

要使用 Vite 构建 React 应用，首先需要创建一个新项目：

npx create-vite my-react-app --template react
cd my-react-app
npm install
npm run dev

接下来，我们将创建一个 Vite 插件，用于将 React 和 ReactDOM 从构建产物中移除，并通过 CDN 加载它们。

创建 Vite 插件

在项目根目录下创建一个名为 vite-plugin-react-cdn 的文件夹，并在其中创建一个名为 index.js 的文件。编写以下代码：

// vite-plugin-react-cdn/index.js
function vitePluginReactCdn() {
  return {
    name: 'vite-plugin-react-cdn',
    enforce: 'pre',
    config(config) {
      const { build } = config;
      if (build) {
        // 设置 React 和 ReactDOM 为 external，不打包到最终的代码中
        build.rollupOptions = {
          ...build.rollupOptions,
          external: ['react', 'react-dom'],
        };
      }
    },
    transformIndexHtml: {
      enforce: 'post',
      transform(html) {
        // 在 index.html 的 head 中插入 React 和 ReactDOM 的 CDN 链接
        return html.replace(
          '</head>',
          `
          <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
          <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
          </head>
        `
        );
      },
    },
  };
}

module.exports = vitePluginReactCdn;

然后在项目的 vite.config.js 文件中引入并使用这个插件：

// vite.config.js
const vitePluginReactCdn = require('./vite-plugin-react-cdn');

export default {
  plugins: [vitePluginReactCdn()],
};

现在，当你使用 Vite 打包 React 项目时，React 和 ReactDOM 将不会被打包到最终的代码中，而是通过 CDN 链接引入。这将有助于减小包的大小。

结论

通过使用 Vite 和 CDN，我们可以有效地减小 React 应用的构建产物大小，从而提高加载速度。这种方法适用于任何需要优化性能的前端项目。希望本文能帮助你在构建高性能的 React 应用时找到一些灵感！