react-router v4 按需加载的配置方法

时间: 2018-05-26阅读: 2777标签: react

react项目开发中,当访问默认页面时会一次性请求所有的js资源,这会大大影响页面的加载速度和用户体验。所以添加按需加载功能是必要的,以下是配置按需加载的方法:

安装bundle-loader

npm install --save-dev bundle-loader


定义Bundle.js

import react, { Component } from 'react';
    export default class Bundle extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                // short for "module" but that's a keyword in js, so "mod"
                mod: null
            }
        }
 
        componentWillMount() {
            this.load(this.props)
        }
 
        componentWillReceiveProps(nextProps) {
            if (nextProps.load !== this.props.load) {
                this.load(nextProps)
            }
        }
 
        load(props) {
            this.setState({
                mod: null
            })
            props.load((mod) => {
                this.setState({
                    // handle both es imports and cjs
                    mod: mod.default ? mod.default : mod
                })
            })
        }
 
        render() {
            if (!this.state.mod)
                return false
            return this.props.children(this.state.mod)
        }
    }


app.jsx配置

import React from 'react';
    import ReactDOM from 'react-dom';
    import { HashRouter, Route } from 'react-router-dom';
    import * as routePaths from './js/constants/routePaths';
    import Bundle from './js/constants/Bundle.js';
    //默认打开页面直接引入
    import Index from './js/pages/Index';
    //其他页面异步引入
    import CardContainer from 'bundle-loader?lazy&name=app-[name]!./js/pages/Card';
    import './assets/css/index.scss';
 
    const Card = () => (
        <Bundle load={CardContainer}>
            {(Card) => <Card />}
        </Bundle>
    )
 
    ReactDOM.render((
        <HashRouter>
            <div className="container">
                <Route path={routePaths.INDEX} exact component={Index} />
                <Route path='/card' component={Card} />
            </div>
        </HashRouter>
        ),
        document.getElementById('app')
    );


webpack.config.js 修改

webpackConfig.output = {
       path: path.resolve(__dirname, 'build/' + config.ftpTarget),
       publicPath: config.publicPath + '/',
       filename: 'js/[name].js',
       chunkFilename: 'js/[id].js'
   }


这样就可以实现页面js资源按需加载了,打包后的文件命名可以根据自己需要设置。

react-router v4 中文官网:http://reacttraining.cn/web/guides/quick-start

来源:https://www.cnblogs.com/sunLemon/archive/2018/05/25/9090031.html

站长推荐

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

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

react 源码之setState

与multirepo 相对。 monorepo是单代码仓库, 是把所有相关项目都集中在一个代码仓库中,每个module独立发布,每个module都有自己的依赖项(package.json),能够作为独立的npm package发布,只是源码放在一起维护。

React创建组件的三种方式及其区别

React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归;具体的三种方式:函数式定义的无状态组件、es5原生方式React.createClass定义的组件、es6形式的extends React.Component定义的组件

一文看懂React Hooks

React Hooks是从React 16.8版本推出的新特性,目的是解决React的状态共享以及组件生命周期管理混乱的问题。React Hooks的出现标志着,React不会再存在无状态组件的情况,React将只有类组件和函数组件的概念

React 是否保持 state 更新的顺序?

我知道 React 的状态更新是异步执行的,为了性能优化,状态是批量更新的。所以你永远不能确信在调用 setState 后状态是否更新了。但是你是否可以确认 setState 调用后状态的更新顺序呢?

grpc-web与react的集成

使用create-react-app脚手架生成react相关部分,脚手架内部会通过node自动起一个客户端,然后和普通的ajax请求一样,和远端服务器进行通信,只不过这里采用支持rpc通信的grpc-web来发起请求,远端采用docker容器的node服务器,node服务器端使用envoy作为代理

使用React严格模式避免过时的代码和副作用

严格模式是用于突出显示应用程序中潜在问题的工具,它不会呈现任何可见的UI。它只用于激活对其后代的额外检查和警告。严格模式不会影响生产环境。

React事件绑定几种方法测试

es6写法的类方法默认没有绑定this,不手动绑定this值为undefined。因此讨论以下几种绑定方式。构造函数constructor中用bind绑定、在调用的时候使用bind绑定this、在调用的时候使用箭头函数绑定this、使用属性初始化器语法绑定this

react-navigation 监听顶部导航栏点击/滑动状态

使用createMaterialTopTabNavigator创建顶部导航栏,希望实现切换到指定的Tab再获取数据,查看官方文档只能找到tabBarOnPress 方法监听点击回调,但是无法监听滑动切换

如何写出漂亮的 React 组件

在Walmart Labs的产品开发中,我们进行了大量的Code Review工作,这也保证了我有机会从很多优秀的工程师的代码中学习他们的代码风格与样式。在这篇博文里我会分享出我最欣赏的五种组件模式与代码片。不过我首先还是要谈谈为什么我们需要执着于提高代码的阅读体验

react-redux 的使用

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

点击更多...

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