关于在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 条评论
登录 后参与评论

相关文章

来自专栏ASP.NET MVC5 后台权限管理系统

ASP.NET MVC5+EF6+EasyUI 后台管理系统(70)-微信公众平台开发-成为开发者

前言: 一、阅读这段系列之前,你必须花半天时间大致阅读微信公众平台的API文档,我尽量以简短快速的语言与大家分享一个过程 二、借助微信公众平台SDK Sen...

2016
来自专栏ASP.NET MVC5 后台权限管理系统

ASP.NET MVC5+EF6+EasyUI 后台管理系统(70)-微信公众平台开发-成为开发者

前言: 一、阅读这段系列之前,你必须花半天时间大致阅读微信公众平台的API文档,我尽量以简短快速的语言与大家分享一个过程 二、借助微信公众平台SDK Sen...

2116
来自专栏向治洪

apktool动态破解apk

那么今天我们就用另外一种方式来破解apk:动态方式,关于动态方式其实很广义的,因为动态方式相对于静态方式来说,难度大一点,但是他比静态方式高效点,能够针对更过...

3506
来自专栏三丰SanFeng

计算CPU利用率

一般来说对于需要大量cpu计算的进程,当前端压力越大时,CPU利用率越高。但对于I/O网络密集型的进程,即使请求很多,服务器的CPU也不一定很到,这时的服务瓶颈...

30210
来自专栏Albert陈凯

2018-06-20 HTTP相关知识关于Content-TypePOST常见数据提交类型关于HTTP关于MIME类型

原文地址:https://blog.csdn.net/woaixiaoyu520/article/details/76690686

862
来自专栏安富莱嵌入式技术分享

【安富莱TCPnet网络教程】HTTP通信实例

本章节为大家讲解HTTP(HyperText Transfer Protocol,超文本传输协议),从本章节开始,正式进入嵌入式Web的设计和学习。

942
来自专栏向治洪

Android监听自身卸载,弹出用户反馈调查

1,情景分析         在上上篇博客中我写了一下NDK开发实践项目,使用开源的LAME库转码MP3,作为前面几篇基础博客的加深理解使用的,但是这样的项目用...

2405
来自专栏Android知识点总结

3--安卓网络编程之Socket编程

833
来自专栏刘望舒

带你彻底了解Android Jetpack组件的Paging库

初次接除 paging, 可能会一脸懵逼,感觉出来了很多 API, 不知道从哪里下手。我们先对 paging 的组成部分进行一个了解。

862
来自专栏Linyb极客之路

网络编程之HTTP header请求头详解

(3)HTTP/1.1: URI(Uniform Resource Identifier,统一资源标识符)及其版本

942

扫码关注云+社区