React第三方组件1(路由管理之Router的使用⑤按需加载-下)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!

1、React第三方组件1(路由管理之Router的使用①简单使用)---2018.01.22

2、React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)---2018.01.23

3、React第三方组件1(路由管理之Router的使用③传参)---2018.01.24

4、React第三方组件1(路由管理之Router的使用④按需加载-上)---2018.01.25

5、React第三方组件1(路由管理之Router的使用⑤按需加载-下)---2018.01.26

开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2

如果我们的路由比较多,比如单页面应用,可能路由有几十个!那么首次加载把整个js都拉取回来,其实有点浪费,也影响速度,所有我们要实现按需加载,就是拆分js包,请求哪个路由就获取哪个路由的js小包!

那么怎么拆分呢!这就是我们今天要讲的!

上节课我们已经做了些准备,这节课我们要在demo页面下,把demo1,demo2,拆分开来!

我们开始拆分行动!

1、先来安装依赖

npm i -D bundle-loader

2、新建Bundle.jsx

在app -> component -> common 目录下

import React, { Component } from 'react'

class Bundle extends Component {
    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() {
        return this.state.mod ? this.props.children(this.state.mod) : null
    }
}

export default Bundle

我们修改下 webpack.dev.conf.js

{
    test: /\.bundle\.jsx$/,
    use: {
        loader: 'bundle-loader',
        options: {
            name: '[name]'
        }
    }
}

响应的 也要修改下 webpack.prod.conf.js 文件

这里的test正则表达式是要命中带用budle.jsx的文件

那么我们要修改下 demo1 下的Index.jsx文件改成 Index.bundle.jsx

然后修改 demo 下的Index.jsx文件 ,完整代码 如下

import React from 'react';
import {HashRouter, Route, NavLink,Redirect} from 'react-router-dom'
import Bundle from '../common/Bundle'
import Dome1 from './demo1/Index.bundle'
import Dome2 from '../demo/demo2/Index'
import '../../public/css/demo.pcss'
const Index = () =>
    <HashRouter>
        <div className="content">
            <div className="nav">
                <NavLink to="/Dome1" activeClassName="selected" exact>demo1</NavLink>
                <NavLink to="/Dome2" activeClassName="selected">demo2</NavLink>
            </div>
            <Route exact path="/"
                   render={() => (<Redirect to="/Dome1"/>)}/>
            <Route path="/Dome1"
                   component={
                       () =>
                           <Bundle load={Dome1}>
                               {(Dome1) => <Dome1/>}
                           </Bundle>
                   }
            />
            <Route path="/Dome2" component={Dome2} />
        </div>
    </HashRouter>
;

export default Index;

我们执行下

npm run dev

看下浏览器效果

已经成功拆分开了,但是名字起的不好,拆开后是 Index.bundle-0.js

我们需要改下名称,后面等的0 是 id的意思这个配置是在这里:

我们改下名字

再看浏览器

已经改过来了!

我们下面拆分demo2

同样的要修改 demo2 下面 Index.jsx 文件名

Demo2.bundle.jsx

然后修改 demo 下Index.jsx文件,完整代码

import React from 'react';
import {HashRouter, Route, NavLink,Redirect} from 'react-router-dom'
import Bundle from '../common/Bundle'
import Dome1 from './demo1/Demo1.bundle'
import Dome2 from './demo2/Demo2.bundle'
import '../../public/css/demo.pcss'
const Index = () =>
    <HashRouter>
        <div className="content">
            <div className="nav">
                <NavLink to="/Dome1" activeClassName="selected" exact>demo1</NavLink>
                <NavLink to="/Dome2" activeClassName="selected">demo2</NavLink>
            </div>
            <Route exact path="/"
                   render={() => (<Redirect to="/Dome1"/>)}/>
            <Route path="/Dome1"
                   component={
                       () =>
                           <Bundle load={Dome1}>
                               {(Dome1) => <Dome1/>}
                           </Bundle>
                   }
            />
            <Route path="/Dome2"
                   component={
                       (props) =>
                           <Bundle load={Dome2}>
                               {(Dome2) => <Dome2 {...props}/>}
                           </Bundle>
                   }
            />
        </div>
    </HashRouter>
;

export default Index;

然后看下浏览器效果

我们看到 点击 demo演示

默认跳转到 demo1,并且能看到 发生了两个js请求,Demo1.bundle.js,

demo2.bundle.js,

这不是我们想要的啊,我们希望是,

demo1 就请求 Demo1.bundle.js,

demo2 就请求 Demo2.bundle.js,

那怎么办呢?

拆分完,正真按需加载其实就是懒加载,我们只需要在webpack中配置下就可以了。

options: {
    lazy: true,
    name: '[name]'
}

同样的我们也要修改下

webpack.pro.conf.js文件

我们再重新执行

npm run dev

看下效果

完美实现了 按需加载

demo1 就请求 Demo1.bundle.js,

demo2 就请求 Demo2.bundle.js,

我们回过头来,优化下代码!

修改 Bundle.jsx

const BundleFun = (Component,props) =>
    <Bundle load={Component}>
        {(Component) => <Component {...props}/>}
    </Bundle>
;
export {
    Bundle, BundleFun
}

就该这块!

然后修改 demo 下的 Index.jsx

<Route path="/Dome1" component={() => BundleFun(Dome1)}/>
<Route path="/Dome2" component={(props) => BundleFun(Dome2, props)}/>

这两句修改下!

如果你有什么问题,可以在下方留言给我们!

原文发布于微信公众号 - 前端人人(frontend_everyone)

原文发表时间:2018-01-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏转载gongluck的CSDN博客

OCX 入门

OCX入门:http://blog.csdn.net/hkcsdn/article/details/52908748 前言 ActiveX是Microsof...

47060
来自专栏向治洪

react native实现上拉加载下拉刷新

前言 我们在做原生app开发的时候,很多场景都会用到下拉刷新、上拉加载的操作,Android中如PullToRefreshListView,ios中如MJRef...

30780
来自专栏Core Net

微信小程序:动画(Animation)

官方文档是这样说的:①创建一个动画实例 animation。②调用实例的方法来描述动画。③最后通过动画实例的 export 方法导出动画数据传递给组件的 ani...

2.5K10
来自专栏从零开始学 Web 前端

从零开始学 Web 之 移动Web(三)Zepto

Zepto是一个轻量级的针对现代高级浏览器的 JavaScript库, 它与jquery有着类似的api。

21020
来自专栏Android干货

Android项目实战(十一):moveTaskToBack(boolean ) 方法的使用

30050
来自专栏CRPER折腾记

React 折腾记 - (2) 实现路由动效过渡,并解决过程中奇奇怪怪的问题

注意: 这里的样式用的style-components来写的,感兴趣的可以自行了解下

14510
来自专栏北京马哥教育

[来稿]pycharm快捷键、tips、常用设置及版本控制 制

在PyCharm安装目录 /opt/pycharm-3.4.1/help目录下可以找到ReferenceCard.pdf快捷键英文版说明 or 打开pychar...

52080
来自专栏前端下午茶

Vue项目预渲染机制引入实践

周末想顺便把已经做好静态页面的webApp项目做一下SEO优化,由于不想写蹩脚的SSR代码,所以准备采用预渲染,本来想着网上有这么多预渲染的文章,随便找个来跟着...

71420
来自专栏美丽应用

PPIICC:简洁易用的长截图工具

13220
来自专栏GreenLeaves

iframe 解析

简介:iframe在日常的开发中经常用到,本随笔在参考http://blog.csdn.net/cuew1987/article/details/1126515...

275100

扫码关注云+社区

领取腾讯云代金券