🔥 vite + React + ArcoDesign UI库按需加载

1.说明

Arco Design - 企业级产品的完整设计和开发解决方案，由字节跳动开源

• github:arco-design
• 官方文档：arco-design

2.安装相关依赖

2.1 安装 arco-design

npm i @arco-design/web-react
# or
yarn add @arco-design/web-react

2.2 安装 vite-plugin-imp

用于按需加载样式

npm i vite-plugin-imp -D
# or 
yarn add vite-plugin-imp -D

2.3 安装 less

由于arco-design是基于less开发，所以建议使用less,安装如下：

npm i less -D
# or
yarn add less -D

3.vite.config.js配置

安装完相关依赖后，接下来我们进行按需加载配置，具体配置如下：

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// 引入按需加载插件
import vitePluginImp from "vite-plugin-imp";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    vitePluginImp({
      libList: [
        {
          libName: "@arco-design/web-react",
          style: (name) => {
            return [
              // 加载框架的主要样式文件 index.less
              "@arco-design/web-react/lib/style/index.less",
              // 根据name值按需加载相关组件样式
              `@arco-design/web-react/lib/${name}/style/index.less`,
            ];
          },
        },
      ],
    }),
  ],
  css: {
    preprocessorOptions: {
      less: {
        // 支持内联 JavaScript
        javascriptEnabled: true,
      },
    },
  },
});

因为上述配置我们使用的是 less，并且我们需要配置 javascriptEnabled 为 true，支持 less 内联 JS。

4.使用

iport React from "react";
import ReactDOM from "react-dom";
import { Button } from "@arco-design/web-react";

ReactDOM.render(
  <Button type="primary">Hello Arco</Button>,
  document.querySelector("#root")
);

重新运行yarn dev可以看到效果！

5.打包

yarn build
# or
npm run build

从打包信息可以看出css文件大小为40.02KiB,完美解决按需加载问题！！！