What is Vite?

Vite is a cutting-edge development server and build tool that capitalizes on the native browser support for ES modules (ESM). This unique approach enables it to offer a rapid development server and an extremely efficient build process. The key features of Vite include:

  • Lightning-fast Cold Start and Seamless Hot Updates: Vite can start up your development environment in an instant and provides real-time updates as you code, eliminating long waiting times.
  • High-Efficiency Build with Rollup: Leveraging the power of Rollup, Vite ensures optimized and efficient production builds.
  • Rich Plugin Ecosystem: It is compatible with existing Rollup plugins, allowing developers to easily extend its functionality.
  • Multi-framework Support: Vite is flexible enough to support various popular frameworks such as Vue, React, and Preact.

Building a React Application with Vite

To kick-start a React application using Vite, follow these steps to create a new project:

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

After setting up the project, we'll create an enhanced Vite plugin to exclude React and ReactDOM from the build output and load them via CDN. This not only reduces the bundle size but also allows for more flexibility in managing dependencies.

Creating a Vite Plugin

First, create a folder named vite-plugin-react-cdn-advanced in the root directory of your project. Inside this folder, create a file named index.js with the following code:

// vite-plugin-react-cdn-advanced/index.js
function vitePluginReactCdnAdvanced(options = {}) {
  const { reactVersion = "18", reactDOMVersion = "18" } = options;
  return {
    name: "vite-plugin-react-cdn-advanced",
    enforce: "pre",
    config(config) {
      const { build } = config;
      if (build) {
        build.rollupOptions = {
          ...build.rollupOptions,
          external: ["react", "react-dom"],
        };
      }
    },
    transformIndexHtml: {
      enforce: "post",
      transform(html) {
        const reactCDN = `https://unpkg.com/react@${reactVersion}/umd/react.production.min.js`;
        const reactDOMCDN = `https://unpkg.com/react-dom@${reactDOMVersion}/umd/react-dom.production.min.js`;
        return html.replace(
          "</head>",
          `
                    <script crossorigin src="${reactCDN}"></script>
                    <script crossorigin src="${reactDOMCDN}"></script>
                    </head>
                `
        );
      },
    },
  };
}
module.exports = vitePluginReactCdnAdvanced;

This updated plugin allows you to specify the versions of React and ReactDOM via options. It sets them as external dependencies during the build process and inserts the appropriate CDN links into the index.html file.

Then, import and use this plugin in your project's vite.config.js file:

// vite.config.js
const vitePluginReactCdnAdvanced = require("./vite-plugin-react-cdn-advanced");
export default {
  plugins: [
    vitePluginReactCdnAdvanced({
      reactVersion: "18.2.0",
      reactDOMVersion: "18.2.0",
    }),
  ],
};

In this vite.config.js example, we've specified the versions of React and ReactDOM to be used from the CDN. You can adjust these versions according to your project's requirements.

Now, when you build your React project with Vite, React and ReactDOM will be excluded from the final bundle and instead loaded via the CDN links. This significantly reduces the size of the build output, leading to faster loading times for your application.

Conclusion

By harnessing the power of Vite and CDN, you can effectively optimize the build output of React applications. This approach not only reduces the bundle size but also improves the overall loading speed, making it an ideal solution for any front-end project aiming for high-performance. I hope this article provides you with valuable insights and inspiration for building high-quality React applications.