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

在使用

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多行代码,执行完之后得花一些时间吧.

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

第一:

import Button from 'antd/lib/button';
import 'antd/lib/button/style'; // 或者 antd/lib/button/style/css 加载 css 文件

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

第二:

一劳永逸.配置babel-loader

在webpack中自行配置:

{
        test: /\.js|jsx$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015','react'],
          plugins: [["import", { libraryName: "antd", style: "css"}]]
        }
      },

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏闰土大叔

入职第一天:前端leader手把手教我入门Vue服务器端渲染(SSR)

继前段时间西安电面之后顺利拿到了OFFER,今天(5月2号)是我入职第一天,在简短的内部培训了一上午后,前端leader让我先了解下什么是vue的服务器端渲染(...

1312
来自专栏破晓之歌

移动web开发适配秘籍Rem(推荐) 原

561
来自专栏卡少编程之旅

新主题博客诞生之路

3359
来自专栏GIS讲堂

Openlayers4中地图的导出

本文讲述Openlayers4中地图的导出,包括调用天地图切片跨域、Geoserver11 WMS跨域等。

872
来自专栏IT民工生存指南

从0开始Vue.js 和 Webpack 4 [1]

1325
来自专栏Youngxj

Lyplayer蓝叶音乐视频播放器-emlog插件

1885
来自专栏前端小叙

如何把大段文字转为带html标签的文字

开发网页的时候,有时候会遇到大段的隐私声明,用户协议等等,我们呀要复制粘贴展示出来,必须加大量的p标签,h1,h2,空格符,br标签,这对我们来说无疑是泪崩的,...

991
来自专栏前端vue

4.添加导航、分栏布局,配置路由及对应页面、登陆、404

侧边栏的导航与页面相对应,根据导航栏新建对应页面(含登陆、404) src目录下新建views文件夹用来放视图文件

914
来自专栏Golang语言社区

关于Golang语言,自定义结构体标签的一个妙用

运行结果是: 编码前: {fyxichen 24} 编码后: {"Age":24}在这里name的值并未被编码,原因接收首字母是小写,外部不能调用导致的. 当...

2525
来自专栏向治洪

微信小程序开发入门篇

本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果。 开发准备工作 获取微信小程序的 AppID 登录 https://mp.wei...

2686

扫码关注云+社区