How to reduce AntD bundle size in CommonJS/AMD environment ?

Hi,

I'm trying to maintain a project that has a bit of 'legacy'. It has a front-end of React 15.4.2 and AntD 3.23.5.

Whilst I'd like to move to React 16 and AntD 4, and use babel-plugin-import, I have to admit to being pretty nervous about that because of the potential to break dependencies - perhaps for another time.

In the meanwhile, I'm still trying to take my browser's warning seriously that I shouldn't be using whole of AntD (quite rightly) - my module is massive and it feels like reducing the weight of AntD inside it is a good place to start as 'low-hanging fruit'.

If the project was already ES6, I'd have plenty of assistance to go at on the web. Instead, I wonder if someone could talk me through how to achieve this in my current environment, which is broadly as follows.

The package.json dependencies section is this:

  "dependencies": {
    "antd": "^3.23.5",
    "es5-shim": "^4.5.9",
    "es6-shim": "^0.35.3",
    "moment": "^2.17.1",
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },

The code for my widgets typically begins like this (we can call this one DeviceArchitectWidget.js for argument's sake):

define(
    [
        'jquery',
        'react',
        'react-dom',

        'nmodule/myproject/rc/Libs/antd',
        'nmodule/myproject/rc/widgetJS/js/DeviceArchitect',

        'css!nmodule/myproject/rc/DeviceArchitect/DeviceArchitect',
    ],
    function(
        $,
        react,
        reactDOM,
        antd,
        deviceArchitectFileRenderDOM
    ) {

In the define, you can see the reference to nmodule/myproject/rc/Libs/antd. This file (antd.js) has the following content:

require.config({
    paths: {
        'moment': '/module/myproject/rc/node_modules/moment/min/moment.min',
        'antd': '/module/myproject/rc/node_modules/antd/dist/antd',
        'es5shim': '/module/myproject/rc/node_modules/es5-shim/es5-shim.min',
        'es5sham': '/module/myproject/rc/node_modules/es5-shim/es5-sham.min',
        'es6shim': '/module/myproject/rc/node_modules/es6-shim/es6-shim.min',
        'es6sham': '/module/myproject/rc/node_modules/es6-shim/es6-sham.min'
    },
    shim: {
        "antd": ['es5shim', 'es5sham', 'es6shim', 'es6sham','moment']
    }
});

define(
    ['antd','css!nmodule/myproject/rc/node_modules/antd/dist/antd'],
    function (antd) {
        return antd;
    }
);

I don't use that many of the libraries within antd: typically just buttons, tooltips, inputs, modals, tables. So I'm happy to amend the above files in any way that's reasonable in order to modularize my use of antd (even if it means changing all my existing JSX antd declarations) and thus to cut right back on the number of antd libraries that get pulled into my built module.

Could someone please explain to me what options I have for editing the above files to achieve this ? As you can probably tell by my descriptions, I'm still novice at combining JS language syntax with modularisation and dependency management.

Thanks in anticipation.

Comments

[Nested Software]

Explainlikeimfive is intended for more conceptual and basic questions. I suggest changing your tags to something like help, antd, react, JavaScript...

[GaryRoussak]

Thanks for setting me straight. I have changed those tags as you suggested.