CODEWITHSUNDEEP
webpackbabeljsantd
vijayst
vijayst

Reputation: 21846

Partial import of antd package not working

I am importing antd package using the babel-plugin-import plugin. However, I am getting the warning that the whole bundle is imported.

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

My webpack config for jsx is as follows:

{
    test: /\.jsx$/,
    loader: 'babel-loader',
    exclude: [nodeModulesDir],
    options: {
        cacheDirectory: true,
        plugins: [
            'transform-decorators-legacy',
            'add-module-exports',
            ["import", { "libraryName": "antd", "style": true }],
            ["react-transform", {
                transforms: [
                    {
                        transform: 'react-transform-hmr',
                        imports: ['react'],
                        locals: ['module']
                    }
                ]
            }]
        ],
        presets: ['es2015', 'stage-0', 'react']
    }
},

For some reason, the entire antd bundle is being imported.

Upvotes: 3

Views: 1529

Answers (1)

vijayst
vijayst

Reputation: 21846

I figured out the problem. I created a package searchtabular-antd. The package used babel transpiler to output javascript. The below line in the package caused the problem:

import { DatePicker, Checkbox, Input, InputNumber } from 'antd';

The components should be manually imported from lib as follows:

import DatePicker from 'antd/lib/date-picker';

This fixed the antd size in the main app which used searchtabular-antd.

Upvotes: 2

Related Questions