UI库——react中antd不用弹射按需加载

最新推荐文章于 2024-07-26 14:11:15 发布

quietness_1

最新推荐文章于 2024-07-26 14:11:15 发布

阅读量515

点赞数 1

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/qq_45351419/article/details/104653175

版权

React 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

有三部分（不弹射按需加载、主题、减少包的大小）

注：这样配置代理会出问题，可以去（npm超市逛http-proxy-middleware）

一、按需加载

1、npm install react-app-rewired 轻微改webpack
2、npm install customize-cra 自定义脚手架环境
3、npm install babel-plugin-import 配置按需文件
这样配合使用：
去npm超市找它俩的用法，防止随时更改
（1）修改package文件：scripts：“start改成rewired那个”
（2）在根目录下创建config-overrides.js文件，把代码赋值过去

const { override, fixBabelImports } = require('customize-cra');
 module.exports = override(
     fixBabelImports('import', {
       libraryName: 'antd',
       libraryDirectory: 'es',
       style: 'css',
     }),
   );

接下来就可以用了：

 import { Button } from 'antd';
   <Button type="primary">Button</Button>

二、配置主题（更改颜色）

**：
1、npm install less less-loader
2、配置文件：config-overrides.js

 const { override, fixBabelImports, addLessLoader } = require('customize-cra');
 module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
   	style: true,
  }),
 addLessLoader({
   javascriptEnabled: true,
   modifyVars: { '@primary-color': '#1DA57A' },
 }),
);

三、减少包的体积

1、npm install antd-dayjs-webpack-plugin

const { override, addWebpackPlugin } = require('customize-cra');
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');

module.exports = override(addWebpackPlugin(new AntdDayjsWebpackPlugin()));