关于在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"}]]
        }
      },

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!