关闭

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

时间: 2018-05-26阅读: 2635标签: 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-navigation 监听顶部导航栏点击/滑动状态

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

新手学习 react 迷惑的点

网上各种言论说 React 上手比 Vue 难,可能难就难不能深刻理解 JSX,或者对 ES6 的一些特性理解得不够深刻,导致觉得有些点难以理解,然后说 React 比较难上手,还反人类啥的

在react jsx中,为什么使用箭头函数和bind容易出现问题

因为()=>this.deleteUser(user.id)每执行一次就会生成一个新的函数,当然bind也是这样干的,所以在PureComponent的shallowCompare中认为onDeleteClick的值已经被修改,所以触发了重新渲染。看吧,使用箭头函数和bind会造成性能浪费,作为一个节约的程序员应该避免如此。

React事件处理函数必须使用bind(this)的原因

学习React的过程中发现调用函数的时候必须使用bind(this),之后直接在class中声明函数即可正常使用,但是为什么呢,博主进行了一番查阅,总结如下。

react如何通过shouldComponentUpdate来减少重复渲染

在react开发中,经常会遇到组件重复渲染的问题,父组件一个state的变化,就会导致以该组件的所有子组件都重写render,尽管绝大多数子组件的props没有变化

react-redux 的使用

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

React中编写CSS的姿势

在任何环境之下其实没有最佳,最有最适合,那么在React中编写CSS也是类似的。在React中有很多编写CSS的方式,在社区中讨论最多的应该是CSS In JS 和 CSS Modules

如果没有virtual dom,react会怎样?

如果react火起来的时候,没有virtual dom,会怎样?你还会选择使用react吗?这是一个历史假设问题。但今天来看,这个问题却非常有趣,因为,在经历对react的狂热追捧之后

React 服务端渲染完美的解决方案

使用 React 构建客户端应用程序,默认情况下,可以在浏览器中输出 React 组件,进行生成 DOM 和操作 DOM。React 也可以在服务端通过 Node.js 转换成 HTML,直接在浏览器端“呈现”处理好的 HTML 字符串,这个过程可以被认为 “同构”

如何优雅的设计 React 组件

如今的 Web 前端已被 React、Vue 和 Angular 三分天下,尽管现在的 jQuery 已不再那么流行,但 jQuery 的设计思想还是非常值得致敬和学习的,特别是 jQuery 的插件化。

点击更多...

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