react中使用antd按需加载(第一部)
什么是react按需加载?简单来说就是当我们引用antd的时候需要引入全局css样式,这会对性能造成一定的影响,那么使用按需加载以后就不需要引入css全局样式了,直接引入功能模块即可,既然需要设置按需加载就要对webpack文件进行修改,需要我们执行npm run eject命令来展开项目的隐藏文件,如果只是简单的修改,我们可以使用react-app-rewired定义全局变量,react-app-rewired的作用就是在不eject的情况下,覆盖create-react-app的配置。具体如下:
使用 react-app-rewired 对 create-react-app 的默认配置进行自定义
1.yarn add react-app-rewired --dev
/* 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 --env=jsdom", + "test": "react-app-rewired test --env=jsdom", }
2.然后在项目根目录创建一个config-overrides.js用于修改默认配置
module.exports = function override(config, env) {// do stuff with the webpack config...return config; };
使用babel-plugin-import
babel-plugin-import 是一个用于按需加载组件代码和样式babel 插件(原理),现在我们尝试安装它并修改config-overrides.js
文件
1.yarn add babel-plugin-import --dev
+ const { injectBabelPlugin } = require('react-app-rewired');module.exports = function override(config, env) { + config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);return config;};
或者也可以修改
{test: /\.(js|jsx|mjs)$/,include: paths.appSrc,loader: require.resolve('babel-loader'),options: {plugins: [// 引入样式为 'css'// style为true 则默认引入less['import', { libraryName: 'antd', style: true }],],// This is a feature of `babel-loader` for webpack (not Babel itself).// It enables caching results in ./node_modules/.cache/babel-loader/// directory for faster rebuilds.cacheDirectory: true,}, },
参考链接:https://ant.design/docs/react/use-with-create-react-app-cn
转载于:https://www.cnblogs.com/lanshu123/p/10660704.html
react中使用antd按需加载(第一部)相关推荐
- create-react-app中配置antd按需加载、less、proxy、路径别名
配置antd.less.路径别名 第一步 // 安装一下需要的插 yarn add antd react-app-rewired customize-cra babel-plugin-import l ...
- antd 按需加载,antd定制主题,antd上传组件,在线换肤
antd 按需加载组件,antd按需加载样式 使用 babel-plugin-import,babel模块化导入插件,兼容antd,antd-mobile,lodash等库 配置:{ "li ...
- html5 语音包,在vue中使用vue-i18n按需加载语言包
1.新建目录结构如下: . ├── App.vue ├── assets │ └── langs │ ├── en │ │ └── index.js │ ├── zh │ │ └── inde ...
- React之antd按需加载
虽然antd官网有提供按需加载的方法: 但这种方法需要执行eject命令,而eject是不可逆的,会更改package文件,并且将所有的依赖都暴露在外面.我将自己的项目eject后,找不到packag ...
- antd mysql_create-react-app使用antd按需加载的样式无效问题的解决
官网给出的按需加载解决方案,先安装 babel-plugin-import 因为antd默认引入样式是less,所以需要手动配置为CSS,配置方法如下: 第一种方法:在package.json中配置, ...
- 快速搭建react项目骨架(按需加载、redux、axios、项目级目录等等)
一.前言 最近整理了一下项目骨架,顺便自定义了一个脚手架,方便日后使用.我会从头开始,步骤一步步写明白,如果还有不清楚的可以评论区留言.先大致介绍一下这个骨架,我们采用 create-react-ap ...
- echarts中蜡烛图按需加载
1.下载依赖 npm i echarts --save 2.main.js中引入 //引入基本模板 let echarts = require('echarts/lib/echarts')Vue.pr ...
- react按需加载(getComponent优美写法),并指定输出模块名称解决缓存(getComponent与chunkFilename)...
react配合webpack进行按需加载的方法很简单,Route的component改为getComponent,组件用require.ensure的方式获取,并在webpack中配置chunkFil ...
- Vue按需加载提升用户体验
Vue官方文档异步组件: 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了让事情更简单, Vue.js 允许将组件定义为一个工厂函数,动态地解析组件的定义.Vue.js 只在组 ...
- react 中使用import()实现按需加载报错 解决方法 --‘import’ and ‘export’ may only appear at the top level
react 中使用import()实现按需加载报错 解决方法 --'import' and 'export' may only appear at the top level 参考文章: (1)rea ...
最新文章
- 2017计算机nit考试时间,关于2017年专接本NIT考试,你知道多少呢???
- 让 Spring Boot 启动更快一点
- 【Cucumber】【命令行】
- 博弈论的局限性(博弈论的诡计)
- metamask中的import account的代码实现
- 数据库 case when then 的用法 (举个栗子~~~)
- C++编译器与链接器工作原理
- python中size_x的意思,对pytorch中x = x.view(x.size(0), -1) 的理解说明
- redis源码剖析(1):基础数据结构SDS
- 2.《JSP应用开发案例教程》第1章 JSP概述
- Wed Jul 22 00:00:00 CST 2020 java转成指定日期格式的字符串
- [USACO20JAN]Loan Repayment S
- 微信影视小程序是如何赚钱的?效果怎么样?
- 英文网站针对google优化用阿里云dns好吗?
- 大数据杀熟 算法_大数据杀熟如何防范?
- matlab注释分析高斯混合模型
- win7 系统下实现音量控制
- 百度地图API_BMap接口的使用形式
- 用java判断一个数是否为质数
- 电信无线猫连接无线路由器