react配置antd按需加载的使用
我目前使用的antd版本是2.13。现在最新的是3.0.1。
脚手架工具就是create-react-app。创建完成项目后,需添加配置,执行yarn eject
也就是打开配置的文档。
然后安装第三方依赖yarn add babel-plugin-import --save-dev
找到config文件夹。里面有2个配置文档,
webpack.config.dev.js和webpack.config.prod.js
添加配置时一定要保持文档的一致性。我就是犯了错误,值配置了开发的没有配置正式文档导致错误。
首先打开webpack.config.dev.js
在147行添加这段代码
plugins: [ ['import', [{ libraryName: "antd", style: 'css' }]], ],
同样的配置在webpack.config.prod.js里面也需要添加。
这样就真正实现了按需加载,就不会再报黄色的警告。
还有第二种简单的方式,就是在package.json里面直接添加这行代码。当然前提也是需要先安装依赖:yarn add babel-plugin-import --save-dev
"babel": { "presets": [ "react-app" ], "plugins": [ [ "import", { "libraryName": "antd", "style": "css" } ] ]
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
详解在create-react-app使用less与antd按需加载
使用antd按需加载 使用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", - &quo
-
react配置antd按需加载的使用
我目前使用的antd版本是2.13.现在最新的是3.0.1. 脚手架工具就是create-react-app.创建完成项目后,需添加配置,执行yarn eject 也就是打开配置的文档. 然后安装第三方依赖yarn add babel-plugin-import --save-dev 找到config文件夹.里面有2个配置文档, webpack.config.dev.js和webpack.config.prod.js 添加配置时一定要保持文档的一致性.我就是犯了错误,值配置了开发的没有配置正式文
-
create-react-app使用antd按需加载的样式无效问题的解决
官网给出的按需加载解决方案,先安装 babel-plugin-import 因为antd默认引入样式是less,所以需要手动配置为CSS,配置方法如下: 第一种方法:在package.json中配置,这种方法成功的前提是webpack里query下配置babelrc:true, 这样就会使用babelrc文件中的配置 "babel": { "presets": [ "react-app" ], "plugins": [ [ &
-
react中路由和按需加载的问题
目录 react路由和按需加载问题 1 基本的路由设置 2 如何完成路由的菜单部分 3 如何将每个路由的js文件分开输出 4 react-router按需加载配置 5 最后效果 react路由的基本使用 1.先下包 2.导入并使用 3.使用HashRouter包裹整个应用 4.使用Link指定导航链接 5.使用Route指定路由规则(哪个路径展示哪个组件) 6.精确匹配 :exact 7.Switch 8.处理404页 Redirect react路由和按需加载问题 1 基本的路由设置 reac
-
react脚手架如何配置less和ant按需加载的方法步骤
前言 create-react-app是由React官方提供并推荐使用构建新的React单页面应用程序的最佳方式,其构建的项目默认是不支持less的,需要我们手动集成 一.react脚手架搭建 1.先全局安装create-react-app(提前需要安装node) npm install -g create-react-app 2.然后通过create-react-app创建项目my-app create-react-app my-app 3.最后通过cd进入项目文件夹并启动 cd my-app
-
react 实现页面代码分割、按需加载的方法
虽然一直有做 react 相关的优化,按需加载.dll 分离.服务端渲染,但是从来没有从路由代码分割这一块入手过,昨天在本地开发时没有测试成功,今天又搞了下,已经部署到线上环境了,今天就这个记录一下. 修改配置 开发环境:webpack@v3 .react-router@v4 安装依赖: $ yarn add babel-plugin-syntax-dynamic-import -dev 修改 .babelrc 文件:在 plugins 中添加 "syntax-dynamic-import&qu
-
基于vue和react的spa进行按需加载的实现方法
基于vue和react的spa进行按需加载 由于最近打算将所有的管理系统采用同一套登陆方法,然后在登陆后进行系统的切换选择,不需要每个系统都去重新登陆一次,所以前端这边思考将所有的系统用一套spa的应用进行构建,但是各个系统的合并之后,打包后的代码应该是相当大的,单页需要一次性加载所有系统的资源,显得不合实际,所以打算将不同系统的资源进行分离,再选择后在加载该系统的相应资源.自己发现这个业务和每个系统的路由比较类似,因此将系统的配置基于vue-router或者react-router的基础进行按
-
详解React开发中使用require.ensure()按需加载ES6组件
首先介绍下动态加载函数: require.ensure([], (require)=>{ let A = require('./a.js').default; }) 如果想要动态加载出es6代码组件,直接require一个es6风格的组件是不行的,因为一般的语言编译工具(如babel),不支持直接require一个es6风格的组件. 那么有种办法可以解决:在es6方式书写的组件底部增加一句:module.exports = YouclassName; import React, {Compone
-
react-router实现按需加载
本文使用的 React-router 版本为 2.8.1 React Router自己就有一套按需加载解决方案,将代码拆分成多个小包,在浏览过程中实现按需加载: 如过你的项目搭配了webpack打包工具,那么需要在webpack.config.js的output内加上chunkFilename output: { path: path.join(__dirname, '/../dist/assets'), filename: 'app.js', publicPath: defaultSettin
-
React-router 4 按需加载的实现方式及原理详解
React-router 4 介绍了在router4以后,如何去实现按需加载Component,在router4以前,我们是使用getComponent的的方式来实现按需加载的,router4中,getComponent方法已经被移除,下面就介绍一下react-router4是入围和来实现按需加载的. 1.router3的按需加载方式 route3中实现按需加载只需要按照下面代码的方式实现就可以了. const about = (location, cb) => { require.ensure
随机推荐
- struts2+jquery+json实现异步加载数据(自写)
- Apache、Nginx下Font Awesome在 Firefox 中不显示问题解决方法
- java中的数学计算函数的总结
- Laravel5中防止XSS跨站攻击的方法
- Android的activity学习笔记
- 在PHP3中实现SESSION的功能(三)
- 读取目录下的所有文件(包括子目录下的所有文件)
- 对于ASP编码问题的深入研究与最终解决方案
- jQuery团购倒计时特效实现方法
- PowerShell实现获取进程所有者
- PowerShell使用Remove-Item命令删除文件、注册表项介绍
- jquery中使用ajax获取远程页面信息
- jquery封装的对话框简单实现
- BootStrapTable服务器分页实例解析
- Linux中环境变量配置的步骤详解
- C语言使用libZPlay录制声音并写到文件的方法
- php中动态变量用法实例
- 16种C语言编译警告(Warning)类型的解决方法
- python爬取内容存入Excel实例
- JVM:早期(编译期)优化的深入理解