Detailed explanation of the solution for migrating antd+react projects to vite

Antd+react+webpack is often the standard combination of front-end projects based on the react technology stack. All three have mature ecosystems and stable performance. However, with the continuous innovation of front-end technology and the release of vite2, the so-called next-generation build platform, webpack does not seem to be so popular. Why do I say that? Because vite is too fast. After a period of experimentation, I decided to replace webpack with vite in the project, so I wrote this article to share with you.

What is Vite

As the protagonist of this article, let me first briefly introduce the build tool Vite. This tool is the [next-generation front-end development and build tool] launched by You Yuxi. Vite is actually not a new tool. As early as more than a year ago, many versions have been launched. Until the launch of version 2.x, it caused a big enough shock in the front-end circle, marking the maturity and power of Vite. I don’t intend to introduce Vite in detail here. You can refer to the official website https://cn.vitejs.dev/ for more information.

Migration Process

After understanding the vite tool, we can start preparing for the migration;

1. Install vite dependencies

npm i vite antd-vite-import-plugin @vitejs/plugin-react-refresh vite-plugin-html -D

2. Update the original dependencies of the project

Here our project uses dva+antd3.x as the basic development framework. Here I have upgraded the main dependencies of the system to the latest version. For example, I use dva version 2.6.0-beta.22. Other related dependencies such as react, react-dom, react-router-dom and @babel/plugin-transform-runtime have been updated (antd is still version 3.x and has not yet been updated to the 4.x version). This depends on your actual needs;

3. Add the vite.config.js configuration file to the project root directory

Compared with the configuration file of webpack, vite is much simpler, and many functions are built-in, such as the processing of static resources, and the function activation is also relatively simple, as follows:

import { defineConfig } from 'vite';
import vitePluginHtml from 'vite-plugin-html';
import reactRefresh from '@vitejs/plugin-react-refresh';

export default defineConfig({
    css: {
        preprocessorOptions: {
            less: {
                javascriptEnabled: true,
            },
        }
    },
    publicDir: './src/configs',
    plugins: [
        reactRefresh(),
        antdViteImportPlugin(),
        vitePluginHtml({
            minify: true,
            inject: {
                injectData: {
                    title: 'vite-react-example',
                    injectScript: '<script src="/configs.js"></script>', // publicDir as the root directory},
                injectOptions: {
                    filename: './index.html', // template page}
            },
        }),
    ],
    server: {
        open: true,
        port: 10010,
    }
});

Here we use the vite-plugin-html plug-in as an alternative to html-webpack-plugin. Pay attention to the injectData and injectOptions options. injectData can easily insert custom data into our template page, and injectOptions can specify the template page. For other configuration items, please refer to https://www.npmjs.com/package/vite-plugin-html. The index.html page needs to be modified accordingly:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title><%- title %></title>
    ......
</head>
<body>
    <div id="app"></div>
    <script>
        var global = globalThis || window; // Prevent startup errors</script>
    <%- injectScript %>
    <script type="module" src="/src/index.jsx"></script>
</body>
</html>

The difference from webpack is that here we need to manually specify the entry file, and the script tag type is module.

4. Modify the file suffix

The files here are react components with js as the suffix. Under the webpack construction platform, js(x) and ts(x) are fine, but if you use vite, then it is best to use files with the suffixes of ts, jsx, or tsx. For this issue, you can refer to this issue: https://github.com/vitejs/vite/issues/1552. Finally, the author complained that it is so difficult to change the suffix in batches. Forget it, just change it. If you find it troublesome to change it manually, it is not difficult to write a script.

5. Add startup script

"scripts": {
 "dev": "vite",
 "build": "vite build",
 ......
}

That should be about it, but things are not going so smoothly. The project can't even run. Well, nothing goes so smoothly. Next, let's take a look at the problems we encountered.

Problems encountered

1. Decorators not supported

In the business code, we use the connect provided by dva to bind the status, as follows:

@connect(state => state.foo)
class Foo extends React.PureComponent {
 ....
}

However, decorators syntax is not supported by Vite. There is an issue about this problem: https://github.com/vitejs/vite/issues/2349. There is no good solution at present, so we have to remove decorators and use regular function binding instead.

2.antd Unknown theme type: undefined, name: undefined

Our project is currently using version 3.x of antd. This error occurred at startup. In fact, it is mainly because the antd/es/icon/index.js file is loaded when the antd component is initialized:

import * as allIcons from '@ant-design/icons/lib/dist';
......
ReactIcon.add.apply(ReactIcon, _toConsumableArray(Object.keys(allIcons).map(function (key) {
  return allIcons[key];
})));
......

The object exported by '@ant-design/icons/lib/dist' is { default: {...} }. The correct access form is allIcons.default, not allIcons. As a result, the correct export object of icon cannot be obtained. For this problem, you can see this issue: https://github.com/ant-design/ant-design/issues/19002. One point to note here is that antd4.x version will not appear, but for our project, it will not be upgraded to the 4 major version at present. So how to solve it? In fact, as long as the components under antd/lib are referenced, there will be no such problem. We can see antd/lib/icon/index.js:

......
var allIcons = _interopRequireWildcard(require("@ant-design/icons/lib/dist"));

function _interopRequireWildcard(obj) { if (obj &amp;&amp; obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" &amp;&amp; typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache &amp;&amp; cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty &amp;&amp; Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc &amp;&amp; (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
......

Here, the _interopRequireWildcard method helps us deal with the export problem, so wouldn’t it be better if we modify the configuration of babel-plugin-import? Well, it’s not that easy. Vite does not support babel-plugin-import very well. First, I’ll look for it in Vite’s issues. There is a similar question: https://github.com/vitejs/vite/issues/1389. I looked at it and found that it did not solve my problem. The several plug-ins mentioned in it gave me some ideas. I’ll write a Vite plug-in to meet our needs. The idea of the plugin is very simple, which is to uniformly modify the way antd components are introduced:

---Before modification---
import { Button } from 'antd';

---After modification---
import Button from 'antd/lib/button';
import 'antd/lib/button/style/index.css';

What needs to be explained here is the introduction of CSS styles. If style/index or style/css is introduced, the problem of require is not defined will appear, because require is used in these two js files, but vite is not a node environment during pre-compilation, so of course an error will be reported.
For the usage of this plugin, please refer to https://www.npmjs.com/package/antd-vite-import-plugin .

3.'default' is not exported

Sometimes errors may occur when loading third-party dependencies, such as 'default' is not exported, etc. You can refer to https://github.com/vitejs/vite/issues/2679

In the actual development process, it is inevitable to encounter some strange problems. This is the price of trying new things.

Speed race

One of the advantages of vite is that it is fast. So how big is the gap compared to webpack? Here we use webpack and vite to start the same local project respectively:

Build Tools	Startup time (ms)
vite	702ms
webpack	7093ms

This is just a rough comparison. From the data, there is a ten-fold difference. In terms of speed alone, Vite is very fast. According to the explanation on the official website, Vite will use esbuild to pre-build dependencies. Esbuild is written in Go and can build dependencies 10-100 times faster than bundlers written in JavaScript.

at last

After some trouble, I feel that vite2 lacks maturity and can be tried in some small projects. For me, I decided to use webpack first. After all, webpack has developed over the years and has few pitfalls, while vite is still not perfect for react.

This is the end of this article about the solution of migrating antd+react projects to vite. For more relevant content about antd react migrating to vite, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in: