内容简介:在React项目开发中,经常需要引用一些实用的第三方框架。在使用一些比较庞大的第三方框架时,框架内的各种资源文件数量巨大,这时,如果我们在每次使用框架时,都将框架内所有资源都全部加载的话,这将使得页面的性能大大降低。这时,我们就需要对这些庞大的第三方框架做按需加载了。首先介绍下对单个框架做按需加载的方法其实在使用create-react-app脚手架的情况下,对单个框架做按需加载的方法,网上的相关文章已经很多了,我这里只简单的介绍下。常用的方法就是通过
在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; };
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- Android 图片加载框架
- SpringCache框架加载/拦截原理
- Glide 图片加载框架源码解析
- 自定义MVC框架-自动加载类
- 优雅地实现Android主流图片加载框架封装,可无侵入切换框架
- SDWebImage 4.3.1 发布,iOS 图片加载框架
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
JavaScript and Ajax for the Web, Sixth Edition
Tom Negrino、Dori Smith / Peachpit Press / August 28, 2006 / $24.99
Book Description Need to learn JavaScript fast? This best-selling reference’s visual format and step-by-step, task-based instructions will have you up and running with JavaScript in no time. In thi......一起来看看 《JavaScript and Ajax for the Web, Sixth Edition》 这本书的介绍吧!