webpack v3 结合 react-router v4 做 dynamic import — 按需加载(懒加载)
为什么要做dynamic import?
dynamic import不知道为什么有很多叫法,什么按需加载,懒加载,Code Splitting,代码分页等。 总之,就是在SPA,把JS代码分成N个页面份数的文件,不在用户刚进来就全部引入,而是等用户跳转路由的时候,再加载对应的JS文件。 这样做的好处就是加速首屏显示速度,同时也减少了资源的浪费。
为什么选择 webpack 3?
- 更高的性能
- 有scope hosting功能,不再需要rollup来处理代码冗余
- 可与react-router结合,更优雅的做dynamic import
- 最重要的一点是,我正经学webpack的时候3已结出了- -
完整的 react spa 项目地址
GitHub项目地址
这个一个完整的项目,这节相关的内容可在router/routerMap.jsx中找到。
第一步:安装 babel-plugin-syntax-dynamic-import
babel用的是babel-env,使用方法可以去babel官方学习,实践可看我项目的源代码。
npm i -D babel-plugin-syntax-dynamic-import
以后, 在.babelrc文件的plungins中加上"syntax-dynamic-import"
。
第二步:安装 react-loadable
npm i -S react-loadable
以后,我们就能愉快得做dynamic import了。
第三步: 编辑routerMap
import React from 'react';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';
const history = createHistory();import App from 'containers';// 按路由拆分代码
import Loadable from 'react-loadable';
const MyLoadingComponent = ({ isLoading, error }) => {// Handle the loading stateif (isLoading) {return <div>Loading...</div>;}// Handle the error stateelse if (error) {return <div>Sorry, there was a problem loading the page.</div>;}else {return null;}
};
const AsyncHome = Loadable({loader: () => import('../containers/Home'),loading: MyLoadingComponent
});
const AsyncCity = Loadable({loader: () => import('../containers/City'),loading: MyLoadingComponent
});
const AsyncDetail = Loadable({loader: () => import('../containers/Detail'),loading: MyLoadingComponent
});
const AsyncSearch = Loadable({loader: () => import('../containers/Search'),loading: MyLoadingComponent
});
const AsyncUser = Loadable({loader: () => import('../containers/User'),loading: MyLoadingComponent
});
const AsyncNotFound = Loadable({loader: () => import('../containers/404'),loading: MyLoadingComponent
});// 路由配置
class RouteMap extends React.Component {render() {return (<Router history={history}><App><Switch><Route path="/" exact component={AsyncHome} /><Route path="/city" component={AsyncCity} /><Route path="/search/:category/:keywords?" component={AsyncSearch} /><Route path="/detail/:id" component={AsyncDetail} /><Route path="/user" component={AsyncUser} /><Route path="/empty" component={null} key="empty" /><Route component={AsyncNotFound} /></Switch></App></Router>);// 说明// empty Route// https://github.com/ReactTraining/react-router/issues/1982 解决人:PFight// 解决react-router v4改变查询参数并不会刷新或者说重载组件的问题 }
}export default RouteMap;
复制代码
大功告成
我们可以运行webpack,然后就能看到效果(图仅为dev环境,build才会再打包一个vendor.js,为什么要有vendor.js,请见devDependencies和dependencies的区别 >>)
原文地址
github.com/CodeLittleP…
参考文章
Code Splitting in Create React App
Q&A
有同学表示,我的方法做页面分离并没有什么好处,因为每个页面都依赖了三方库的代码,所以其实页面有很多冗余代码,能想到这点很棒,已经开始有架构思维了。不过,注意这个想法在dev
环境下,这个同学是对的。
那到了build
环境,或者说到了发布环境,又是怎么样的呢?的确,这篇文章我没有提到,请见我的另一篇文章devDependencies和dependencies的区别。这篇文章主要解释了npm的package.json中devDependencies和dependencies区别是什么。
看完以后,我们就可以知道,为什么我之前说“注意这个想法在dev
环境下,这个同学是对的”了。因为,我们npm run build
以后,webpack会把三方包打包到vendor.js文件,页面逻辑代码不会牵涉其中,每个页面都会引用vendor.js这个文件,这样的话,就不会出现重复引入冗余代码的情况了。
webpack v3 结合 react-router v4 做 dynamic import — 按需加载(懒加载)相关推荐
- webpack v3 结合 react-router v4 做 dynamic import — 按需加载(懒加载)
为什么要做dynamic import? dynamic import不知道为什么有很多叫法,什么按需加载,懒加载,Code Splitting,代码分页等. 总之,就是在SPA,把JS代码分成N个页 ...
- react router v4 简介
最近使用react router 遇到一个问题:当对某个路由添加参数的时候/list/:app 这列路由,点击这个路由以后再点击其他路由,location地址就追加到后面,问不是replace. /l ...
- hitchhiker部署_Hitchhiker的React Router v4指南:无限远的递归路径!
hitchhiker部署 Welcome to the third part of the Hitchhiker's Guide to React Router v4. In this article ...
- 使用React Router v4的嵌套路由
React Router v4 introduced a new declarative, component based approach to routing. With that approac ...
- React 折腾记 - (1) React Router V4 和antd侧边栏的正确关联及动态title的实现
前言 一如既往,实战出真理. 有兴趣的可以瞧瞧,没兴趣的大佬请止步于此. 免得浪费您的时间 效果图 基于antd的sidebar组件封装 折腾记的技术栈选型 Mobx & mobx-react ...
- React 16.x折腾记 - (1) React Router V4 和antd侧边栏的正确关联及动态title的实现
前言 一如既往,实战出真理,有兴趣的可以瞧瞧,没兴趣的大佬请止步于此. 效果图 基于antd的sidebar组件封装 折腾记的技术栈选型 Mobx & mobx-react(用起来感觉良好的状 ...
- hitchhiker部署_Hitchhiker的React Router v4指南:20分钟内完成Grok React Router
hitchhiker部署 Hi fellow React Hitchhiker! Want a ride into React Router? Jump in. Let's go! 大家好,React ...
- hitchhiker部署_Hitchhiker的React Router v4指南:[比赛,位置,历史] –您最好的朋友!...
hitchhiker部署 嘿! 欢迎来到< React Router v4旅行者指南>,第二部分! (Hey! Welcome to the Hitchhiker's Guide to R ...
- hitchhiker部署_《 Hitchhiker的React Router v4指南》:路由配置的隐藏值
hitchhiker部署 Welcome to the Hitchhiker's Guide to React Router v4, Part IV! 欢迎来到< React Router v4 ...
最新文章
- pythongui登录界面密码显示_python的GUI之一个简单的登录界面
- 刘铁岩:如何四两拨千斤,高效地预训练NLP模型?
- springBoot单元测试-模拟MVC测试
- java 富文本编辑器的标签处理数据 从数据库中取出 并返回前台
- Php正则替换字符串
- 什么是H标签?H1,H2,H3标签?以及和strong标签使用的方法及重要性
- c# 从地址拷贝byte_面试必备的 “零拷贝” 问题!从头给你说!
- QML工作笔记-NumberAnimation、RotationAnimation、Timer综合使用
- SpringCloud微服务(03):Hystrix组件,实现服务熔断
- php 上传 blob,Laravel框架+Blob实现的多图上传功能示例
- 3D空间中射线与三角形的交叉检测算法
- Java成神之路——一文搞懂CAS
- c语言求最后一个单词的长度,试题2:计算字符串最后一个单词的长度
- PTA是什么?BT-WIFI共存 转帖
- C# Winform关于控件TabControl闪烁的问题
- SVN快速上手使用(适用于新入职同事)
- 深度学习CNN算法原理
- 使用迅雷等下载工具下载Android SDK快速安装
- 铁道部售票网站怎么啦?
- 周记——20150907