前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >关于在reactjs项目中如何用webpack配置组件按需加载

关于在reactjs项目中如何用webpack配置组件按需加载

作者头像
杭州前端工程师
发布于 2018-06-15 04:09:00
发布于 2018-06-15 04:09:00
95900
代码可运行
举报
文章被收录于专栏:前端大白专栏前端大白专栏
运行总次数:0
代码可运行

在使用

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import {Button} from 'antd'

的时候

打开控制台,会出现这样的警告

You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.

实际我们在用antd的时候,只需要一个Button组件,它给完全加载进项目了,要知道antd 8W多行代码,执行完之后得花一些时间吧.

于是官方就提供了下面的解决方案:

第一:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import Button from 'antd/lib/button';
import 'antd/lib/button/style'; // 或者 antd/lib/button/style/css 加载 css 文件

按需引入组件,我反正不喜欢这种,要写的代码有点多.

第二:

一劳永逸.配置babel-loader

在webpack中自行配置:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
        test: /\.js|jsx$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015','react'],
          plugins: [["import", { libraryName: "antd", style: "css"}]]
        }
      },

只需按照我的配置形式就可以了.

以上是我的解决方案,欢迎纠错.

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
【玩转腾讯云】用eclipse跑通腾讯云JavaSDK
https://www.oracle.com/java/technologies/javase-jdk13-downloads.html
大大大黑白格子
2020/03/27
15.4K0
【玩转腾讯云】用eclipse跑通腾讯云JavaSDK
k8s的持续集成(jenkins+gitlab+k8s)
root@k8s-master1 docker.yml# kubectl get node
不凡
2021/08/19
3.7K1
Maven打包
assembly插件的打包方式是通过descriptor(描述符)来定义的。Maven预先定义好的描述符有bin,src,project,jar-with-dependencies等。比较常用的是jar-with-dependencies,它是将所有外部依赖JAR都加入生成的JAR包中,比较傻瓜化。但要真正达到自定义打包的效果,就需要自己写描述符文件,格式为XML。下面是我们的项目中常用的一种配置。
来自银河系的员程序
2022/01/24
1.4K0
Maven打包
在Mac电脑上用VMware Fusion安装Windows7虚拟机
链接: https://pan.baidu.com/s/1Ov033tnnYl-LoQcJrpU8DA
Action
2021/03/26
3.8K0
在Mac电脑上用VMware Fusion安装Windows7虚拟机
【玩转腾讯云】导入镜像-Windows 2008 R2 Datacenter
【腾讯云】关于Windows Server 2008 R2 企业版 SP1 64位公共镜像下线通知
大大大黑白格子
2020/03/26
10.3K18
【玩转腾讯云】导入镜像-Windows 2008 R2 Datacenter
若依前后台框架,下载运行,若依系统生成代码
1、前置工具安装 jdk 1.8 redis (缓存数据库) mysql idea (后端开发工具) nodejs (js前端开发平台,本文主要用到包管理工具 npm) vscode (前端开发工具) git (版本管理工具) 下载 [https://gitee.com/y\_project/RuoYi-Vue](https://gitee.com/y_project/RuoYi-Vue) 2、运作方式 [image.png] 3、后台导入,设置 [image.png] [image.png] [image
用户7957495
2021/08/09
1.6K0
若依前后台框架,下载运行,若依系统生成代码
excel 的条件格式(三)
在 excel 中,使用色阶可以很方便地对一定区域内单元格的值进行可视化,渐变的颜色表示单元格中值的大小。照着以下步骤,便可以添加色阶。
mr.songw
2021/02/07
2.3K0
excel 的条件格式(三)
Android模仿微博的LazyFragment懒加载
本文会从头开始一步一步带你去写一个LazyFragment,根据写的过程中一步一步记录,你也可以自己试一试,跟着一起写写。最后也根据遇到的问题去完善了,网上搜的都是不完善的,还是自己写一个吧!
分你一些日落
2021/12/08
4710
Android模仿微博的LazyFragment懒加载
2021年度Leetcode算法类型高频题总结&(附答案解析)
昨晚逛了逛GitHub,无意中看到一位P8大佬的算法刷题笔记,感觉发现了宝藏!有些小伙伴可能已经发现了,但咱这里还是忍不住安利一波,怕有些小伙伴没有看到。
Java程序猿
2021/12/24
9460
2021年度Leetcode算法类型高频题总结&(附答案解析)
【技术创作101训练营】- 前后端分离模式下如何保证开发人员不打架?
上传ppt很多颜色被改变了,如果评委老师想看原版的话,可以看pdf,麻烦了,谢谢。
手撕代码八百里
2021/01/20
1K3
【技术创作101训练营】- 前后端分离模式下如何保证开发人员不打架?
MySQL 索引(中)
聚簇索引是按照每张表的主键构造的一棵 B+ 树,叶子节点中存放的即为整张表的行记录数据,聚簇索引的叶子节点也称为数据页。非聚簇索引叶子节点并不包含行记录的全部数据。叶子节点除了包含键值以外,每个叶子节点中的索引行中还包含一个书签。该书签用来告诉 InnoDB 存储引擎哪里可以找到与索引相对应的行数据。由于 InnoDB 存储引擎表是索引组织表,因此 InnoDB 存储引擎的非聚簇索引的书签就是相应的行数据的聚簇索引键。那么基于聚簇索引和非聚簇索引的查询的区别在哪里呢?先通过一个例子来直观感受下:查询 emp_no 为 401060 的记录,通过字段 emp_no 来查询,sql 如下。
mr.songw
2021/01/15
1.5K0
MySQL 索引(中)
竞技世界面试官:说一下公平锁和非公平锁的区别?
上次我们提到了乐观锁和悲观锁,那我们知道锁的类型还有很多种,我们今天简单聊一下,公平锁和非公平锁两口子,以及他们在我们代码中的实践。
Java程序猿
2021/07/18
3840
关于Safari 访问springboot server项目异常问题
后端大哥不作为,埋点数据啥的搞得杂七乱八,自己用springboot 写了一个接受post日志的服务,数据入腾讯云ckafka,消费到elasticsearchhttps://console.cloud.tencent.com/es。(也无聊的用自带的云函数做了个备份将数据copy到了cos对象存储)并在springboot上面加了允许跨域等设置,代码是网上copy来的:
对你无可奈何
2021/02/04
7210
TKE nginx-ingress 开启ip白名单限制和透传client源IP
最近TKE迎来了nginx-ingress 插件的到来,此篇文章将结合TKE nginx-ingress插件,实现IP白名单配置和service透传client源IP的功能
惠绍奇
2020/12/30
4.8K0
MySQL 索引(下)
从结果中看出,索引失效了,这是因为我们需要把索引字段的值都取出来,然后依次进行表达式的计算来进行条件判断,因此采用的就是全表扫描的方式,运行时间也会慢好多。
mr.songw
2021/01/15
6940
MySQL 索引(下)
journalctl命令-系统调试中一个常用的命令
centos7开始j系统使用2个日志服务用于系统日志,一个服务是systemd-journald,这个服务把日志存放到内存中。另一个服务是rsyslogd,它可以从systemd-journald获取日志并把日志存放在磁盘上。journalctl命令主要开始承担了查看日志还有一些日志的配置功能,经常需要用到这个命名去查看日志和设置日志的一些参数。借用他山之石(系统centos7,腾讯云cvm,故日志中会有qcloud ntp还有云监控agent的一些log)总结一下:
对你无可奈何
2021/02/05
3.6K0
安装添加access数据库
access版本目前已经更新出了很多,包括access2016,2010;2019,2021;
用户9693436
2022/04/24
5.4K0
Python完成英雄联盟原话千图成像,这也太酷了
很久前在刷微博的时候看到了这条,被他给震撼到了,图片是由LOL近千张皮肤图片组合构成的(难道这是用ps做的,还是一张张拼的,应该不可能吧),就在昨天突然就想起了这个事,就决定也做一个,随即便展开了行动。搜到了这篇文章,看了下图片的构成,决定先取得所有皮肤的图片再说吧!便又开始了爬虫!
查理不是猹
2021/12/21
3680
Python完成英雄联盟原话千图成像,这也太酷了
利用云函数接收兔小巢的 WebHooks ,并通知到对应邮箱
兔小巢是一款免费的反馈互动社区产品,在网站上插入几行代码即可拥有和腾讯网一样的互动社区,让反馈变得便捷,轻巧。
jwj
2022/03/28
1.9K0
利用云函数接收兔小巢的 WebHooks ,并通知到对应邮箱
protobuf编译、安装和简单使用C++(Windows+VS平台)
将刚才编译后的libprotobufd.lib和protoc.exe拷贝到自己创建的项目下,按住shift+右键,选择打开CMD,输入protoc --cpp_out=./ Account.proto,发现目录中多了两个文件,一个.h头文件一个.cc源文件
WindSun
2020/03/21
8.9K2
推荐阅读
相关推荐
【玩转腾讯云】用eclipse跑通腾讯云JavaSDK
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档