create-react-app同时对多个框架(antd+antd-mobile)作按需加载的方法

在React项目开发中，常常须要引用一些实用的第三方框架。在使用一些比较庞大的第三方框架时，框架内的各类资源文件数量巨大，这时，若是咱们在每次使用框架时，都将框架内全部资源都所有加载的话，这将使得页面的性能大大下降。这时，咱们就须要对这些庞大的第三方框架作按需加载了。

首先介绍下对单个框架作按需加载的方法

其实在使用create-react-app脚手架的状况下，对单个框架作按需加载的方法，网上的相关文章已经不少了，我这里只简单的介绍下。经常使用的方法就是经过babel-plugin-import来实现按需加载，并经过react-app-rewired来重写项目配置文件，将babel-plugin-import写入配置。

一、安装

cnpm install babel-plugin-import --dev

cnpm install react-app-rewired --dev

二、修改package.json

"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

三、在项目的根目录下建立一个 config-overrides.js 用于修改默认配置

const {injectBabelPlugin} = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');
const path = require('path')

module.exports = function override(config, env) {
    config = injectBabelPlugin(
        ['import',
            {
                libraryName: 'antd',
                libraryDirectory: 'es',
                style: true
            }
        ],
        config
    );

    config = rewireLess.withLoaderOptions({
        modifyVars: {"@primary-color": "#4197FC"},
        javascriptEnabled: true,
    })(config, env);

    return config;
};

这样就完成了对antd的按需加载

那么对多个框架作按需加载应该怎么作呢？

对多个框架作按需加载的方法

这里拿antd和antd-mobile两个框架来举例子

首先仍是要按照上面的步骤安装babel-plugin-import和react-app-rewired，并修改默认配置，区别只是在最后一步上。在调用babel-plugin-import的injectBabelPlugin方法时，须要调用两次，并注明相对应的框架名。具体代码以下：

const {injectBabelPlugin} = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');
const path = require('path')

module.exports = function override(config, env) {

    config = injectBabelPlugin(
        ['import',
            {
                libraryName: 'antd',
                libraryDirectory: 'es',
                style: true
            }, 'ant'
        ],
        config
    );

    config = injectBabelPlugin(
        ['import',
            {
                libraryName: "antd-mobile",
                libraryDirectory: 'lib',
                style: true
            }, 'ant-mobile'
        ],
        config
    );

    config = rewireLess.withLoaderOptions({
        modifyVars: {"@primary-color": "#4197FC"},
        javascriptEnabled: true,
    })(config, env);

    return config;
};