关闭

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

时间: 2019-02-14阅读: 1325标签: react

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


来自:https://segmentfault.com/a/1190000018164498


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/2033

关闭

React 开发者常见的 3 个错误

关于前端开发,我最开心的事情就是总有新的东西可以学习。但我们可能一辈子都在掌握各种编程语言、库和框架,但仍然一无所知。因为我们都在学习,这也意味着我们都容易犯错误

深入解析React中的元素、组件、实例和节点

eact 中的元素、组件、实例和节点,是React中关系密切的4个概念,也是很容易让React 初学者迷惑的4个概念。现在,我就来详细地介绍这4个概念,以及它们之间的联系和区别,满足喜欢咬文嚼字、刨根问底的同学的好奇心。

React中的处理事件_React如何处理事件

主要说一下React是如何处理事件的。事件的处理是前端开发过程中非常重要的一部分,通过事件处理,我们可以响应用户的各种操作,从而实现一个富交互的应用。

react中PureComponent浅对比策略

PureComponent实现了Component中没有实现的shouComponentUpdata()方法,会对state和props进行一次浅对比,本文介绍一下浅对比策略,源码中,实现浅对比的函数是:shallowEqual()

选择 Reac​​tJS 的五大理由

ReactJS是一个开源的JavaScript库,并且由Facebook和Instagram这样的顶尖IT企业以及开发者社区所维护。该框架广泛使用于为web应用程序开发用户界面的时候。这个特殊的框架被发明时带有这样一个目的:

React常用hook的优化useEffect浅比较

先说说react原版的useEffect使用起来不便的地方,这里的effect每次更新都会执行,因为第三个参数一直是不等的,第二是在deps依赖很多的时候是真的麻烦

为什么 React 源码不用 TypeScript 来写?

Facebook 是一家技术很厉害的公司,能够超前做一些外界没有的东西,但等外界把这个东西做出来了, Facebook 就发现自己迁移不过去了,被自己过去超前做的技术锁定了,因为迁移成本太高

react-redux 的使用

类似于 Vue,React 中组件之间的状态管理 第三方包为:react-redux。react-redux 其实是 Redux的官方React绑定库,它能够使你的React组件从Redux store中读取数据,并且向store分发actions以更新数据。

如何扩展 Create React App 的 Webpack 配置

Create React App(以下简称 CRA)是创建 React 应用的一个脚手架,它与其他脚手架不同的一个地方就是将一些复杂工具(比如 webpack)的配置封装了起来,让使用者不用关心这些工具的具体配置,从而降低了工具的使用难度。

ReactJS 生命周期、数据流与事件

React是一个JavaScript库文件,使用它的目的在于能够解决构建大的应用和数据的实时变更。该设计使用JSX允许你在构建标签结构时充分利用JavaScript的强大能力,而不必在笨拙的模板语言上浪费时间

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!