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
随机推荐
- .NET 正则表达式使用高级技巧之替换类介绍
- Android中backgroundDimEnabled的作用
- Mysql从5.6.14安全升级至mysql5.6.25的方法
- flash与js通讯方法
- jQuery基于当前元素进行下一步的遍历
- Android中获取状态栏高度的两种方法分享
- Android中banner的使用步骤
- Java中Spring获取bean方法小结
- javascript设计模式--策略模式之输入验证
- JavaScript实现自动跳转文本功能
- PHP数据库连接mysql与mysqli对比分析
- Docker创建一个mysql容器并保存为本地镜像
- Android RecyclerView滑动删除和拖动排序
- mysql如何将多行数据合并成一行
- Linux 4.9内核正式发布!来看看更新了什么?
- 存储过程实现(可带查询条件/万能分页/通用)
- mysql如何让自增id归0解决方案
- jQuery弹簧插件编写基础之“又见弹窗”
- linux redhat 登陆界面切换
- C++直接初始化与复制初始化的区别深入解析