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;
};
複製代碼