react 使用antd 按需加载
使用 react-app-rewired
1. 安装react-app-rewired:
由于新的 react-app-rewired@2.x 版本的关系,你还需要安装 customize-cra。
yarn add react-app-rewired customize-cra
//
npm install react-app-rewired customize-cra
2. 修改package.json:
/* package.json 的配置需要做如下修改*/
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test",
}
使用 babel-plugin-import#
babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件(原理),现在我们尝试安装它并修改 config-overrides.js
文件。
yarn add babel-plugin-import
//
npm install babel-plugin-import
3. 然后在项目的根目录下创建一个 config-overrides.js 用于修改默认配置:
const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}),
);
4. 使用组件:
import { Button } from 'antd';
最后重启 yarn start
访问页面,antd 组件的 js 和 css 代码都会按需加载,你在控制台也不会看到这样的警告信息。关于按需加载的原理和其他方式可以阅读这里。
官网地址:antd高级配置
react 使用antd 按需加载的更多相关文章
- React引入AntD按需加载报错
背景:React使用create-react-app脚手架创建,然后yarn run eject暴露了配置之后修改less配置, 需求:实现antd组件按需加载与修改主题. 一开始是按照webpack ...
- react CRA antd 按需加载配置 lessloader
webpack配置 webpack.config.dev.js, webpack.config.prod同理. 'use strict'; const autoprefixer = require(' ...
- 在create-react-app使用less与antd按需加载
使用antd按需加载 使用react-app-rewired对 create-react-app 的默认配置进行自定义 yarn add react-app-rewired --dev /* pack ...
- react中使用antd按需加载(第一部)
什么是react按需加载?简单来说就是当我们引用antd的时候需要引入全局css样式,这会对性能造成一定的影响,那么使用按需加载以后就不需要引入css全局样式了,直接引入功能模块即可,既然需要设置按需 ...
- 【react学习二】create-react-app 接入antd 并按需加载组件
1.安装 cnpm i babel-plugin-import --save-dev 2.使用 在根目录下的package.json下的bable中添加相应代码 "babel": ...
- antd按需加载,配置babel-plugin-import插件,编译后报错.bezierEasingMixin()解决方案
报错如下: ./node_modules/antd/lib/button/style/index.less (./node_modules/css-loader??ref--6-oneOf-7-1!. ...
- react 实现路由按需加载
import() 方法: async.js 文件内容: import React from 'react'; // import "babel-polyfill"; //compo ...
- 配置react / antd 按需加载 并且使用less(react v16)
1.开启项目 并且执行 yarn eject 下载好我们需要的插件(babel-plugin-import less less-loader antd react-loadable ...
- react中create-react-app配置antd按需加载(方法二)
1.yarn add babel-plugin-import 2.在根目录下的package.json下的bable中添加相应代码 "babel": { "presets ...
随机推荐
- git 打包报错:Maven Build时提示:Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.12.4:test
1.使用git 升级 服务命令 mvn deploy -e 之后报错: Failed to execute goal org.apache.maven.plugins:maven-surefire- ...
- selenium+python smtp邮件
#code:utf-8 import smtplib from email.mime.text import MIMEText from email.mime.multipart import MIM ...
- [EffectiveC++]item06:若不想使用编译器自动生成的函数,就该明确决绝
- oracle imp 报12154错误解决办法
imp test/test@orcl file=/backup.dmp full=y --报错 imp test/test@127.0.0.1/orcl file=/backup.dmp full ...
- 关于Struts2通配符无效的说明
在struts2.3之前的版本,正常的配置就可以了,但在struts2.3版本之后,使用通配符调用方法时,内部会验证是否允许访问该方法. 1.struts2.5 为了增加安全性,在 struts.xm ...
- 关于C++学习笔记
以清华大学出版社<C++语言程序设计> 第四版,郑莉,董渊,何江舟 三位老师编著为蓝本. 写这学习笔记,是为了自己清晰梳理C++.重粘代码也是为了方便更容易认清结构.
- - (void)addConstraints:(NSArray<__kindof NSLayoutConstraint *> *)constraints
Adds multiple constraints on the layout of the receiving view or its subviews. All constraints mus ...
- 「bzoj 4180: 字符串计数」
题目 真是一道好题 首先根据一个非常显然的贪心,如果给出了一个串\(S\),我们如何算最小操作次数呢 非常简单,我们直接把\(S\)拉到\(T\)的\(SAM\)上去跑,如果跑不动了就停下来,重新回到 ...
- adb命令篇 (转载)
转自:https://www.cnblogs.com/ailiailan/p/7896534.html 1.抓log方法 (bat文件) mkdir D:\logcat set /p miaosh ...
- Kali-linux Arpspoof工具
Arpspoof是一个非常好的ARP欺骗的源代码程序.它的运行不会影响整个网络的通信,该工具通过替换传输中的数据从而达到对目标的欺骗.本节将介绍Arpspoof工具的 使用. 9.8.1 URL流量操 ...