Javascript 如何在AMD环境中减少AntD捆绑包的大小?

Javascript 如何在AMD环境中减少AntD捆绑包的大小?,javascript,reactjs,antd,amd,Javascript,Reactjs,Antd,Amd,我试图维护一个前端为React 15.4.2和AntD 3.23.5的项目 虽然我想转而使用React 16和AntD 4,并使用babel插件导入,但我对管理这类项目还不熟悉,因此对打破依赖关系感到紧张——也许改天再使用最新版本 与此同时,我仍然试图认真对待我的浏览器的警告,即我不应该使用整个AntD(非常正确)-减少模块中AntD的重量似乎是减少模块构建尺寸的第一个好方法,因为模块太重了 如果这个项目已经是ES6,我会在网上得到很多帮助。相反,我想知道是否有人能告诉我如何在我目前的环境中实现

我试图维护一个前端为React 15.4.2和AntD 3.23.5的项目

虽然我想转而使用React 16和AntD 4,并使用babel插件导入,但我对管理这类项目还不熟悉,因此对打破依赖关系感到紧张——也许改天再使用最新版本

与此同时,我仍然试图认真对待我的浏览器的警告,即我不应该使用整个AntD(非常正确)-减少模块中AntD的重量似乎是减少模块构建尺寸的第一个好方法,因为模块太重了

如果这个项目已经是ES6,我会在网上得到很多帮助。相反,我想知道是否有人能告诉我如何在我目前的环境中实现这一点,大致如下

package.json依赖项部分如下所示:

  "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"
  },
我的小部件的代码通常是这样开始的(为了参数起见,我们可以将这一个称为DeviceArchitectWidget.js):

在define中,可以看到对nmodule/myproject/rc/Libs/antd的引用。此文件(antd.js)包含以下内容:

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;
    }
);
我不使用antd中的那么多库:通常只使用按钮、工具提示、输入、模态和表格。因此,我很乐意以任何合理的方式修改上述文件,以便模块化我对antd的使用(即使这意味着改变我现有的所有JSX antd声明),从而减少被拉入我构建模块的antd库的数量

有人能给我解释一下,为了达到这个目的,我有哪些选项来编辑上述文件?正如您可能从我的描述中看到的,我仍然是将JS语言语法与模块化和依赖关系管理相结合的新手

谢谢你的期待

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;
    }
);