create-react-app同時對多個框架(antd+antd-mobile)做按需載入的方法

RaoMeng發表於2019-02-22
ReactAPP框架

在React專案開發中，經常需要引用一些實用的第三方框架。在使用一些比較龐大的第三方框架時，框架內的各種資原始檔數量巨大，這時，如果我們在每次使用框架時，都將框架內所有資源都全部載入的話，這將使得頁面的效能大大降低。這時，我們就需要對這些龐大的第三方框架做按需載入了。

首先介紹下對單個框架做按需載入的方法

其實在使用create-react-app腳手架的情況下，對單個框架做按需載入的方法，網上的相關文章已經很多了，我這裡只簡單的介紹下。常用的方法就是通過babel-plugin-import來實現按需載入，並通過react-app-rewired來重寫專案配置檔案，將babel-plugin-import寫入配置。

1、安裝

cnpm install babel-plugin-import --dev

cnpm install react-app-rewired --dev
複製程式碼

2、修改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",
}
複製程式碼

3、在專案的根目錄下建立一個 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;
};
複製程式碼

相關文章