专栏首页前端大白专栏关于在reactjs项目中如何用webpack配置组件按需加载

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

相关文章

  • 带来一个react插件的使用方式---- video-react

    杭州前端工程师
  • vue与react哪种好?

    vue与react,到目前为止两个我都用来写了好多项目,vue用的脚手架是vue-cli,react用的是dva,两者都对其进行了很好的封装,只需要简单的几步就...

    杭州前端工程师
  • 基于mpvue开发微信小程序(项目已开源)

    花了两周时间,我的微信小程序终于开发完了(平时上班,基本上都是业余时间开发的). 下面来介绍一下项目的功能以及结构. 用到的技术栈 vue2+weui+es6;...

    杭州前端工程师
  • 另外的视角来看 antd 这件事儿

    今天圣诞节,所以在 type 是 primary 的 Button 上都加上了雪花。

    桃翁
  • 快速学习Ant Design-入门

    Ant Design 是一个服务于企业级产品的设计体系,组件库是它的 React 实现,antd 被发布为一个 npm 包方便开发者安装并使用。

    cwl_java
  • BERT适应业务遇难题?这是小米NLP的实战探索

    近年来,预训练模型在自然语言处理(Natural Language Processing, NLP)领域大放异彩,其中最重要的工作之一就是 Google 于 2...

    yuquanle
  • BERT适应业务遇难题?这是小米NLP的实战探索

    近年来,预训练模型在自然语言处理(Natural Language Processing, NLP)领域大放异彩,其中最重要的工作之一就是 Google 于 2...

    机器之心
  • 理清 Activity、View 及 Window 之间关系

    View、Window以及Activity主要是用于显示并与用户交互的。这让我们在初学的时候很容易弄混,而且无法理解他们区别以及联系。本文是笔者查阅相关资料后,...

    非著名程序员
  • Matlab中窗函数的简单使用

    这里主要是对窗函数的简单应用做些介绍,是在已知滤波器阶数的情况下,设计滤波器。多数情况下,在不能直接知道滤波器阶数的时候,可参考“http://www.cnb...

    AIHGF
  • Python多线程之线程创建和终止

    python主要是通过thread和threading这两个模块来实现多线程支持。python的thread模块是比较底层的模块,python的threadin...

    py3study

扫码关注云+社区

领取腾讯云代金券