React-Router4按需加载

其实几种实现都是近似的，但具体上不太一样，其中有些不需要用到bundle-loader

第一种：ReactTraining/react-router 介绍的基于 webpack, babel-plugin-syntax-dynamic-import, 和 react-loadable.

主要是利用了react-loadable这个高级组件，他是专门用来异步加载（也可以预加载）组件的。

https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/guides/code-splitting.md

第二种：Bundle组件配合webpack组件bundle-loader

bundle-loader效用其实和require.ensure()一样，把组件分片成单独的chunk，在Bundle组件中引入

https://segmentfault.com/a/1190000009539836

第三种：简书AlienZHOU介绍的同样基于create-react-app的方式，在Bundle组件中props入一个()=>import('path')函数

http://www.jianshu.com/p/547aa7b92d8c

第四种，create-react-app文档给的react-router按需加载实现：用一个类Bundle组件的异步函数

https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html

结论是：第三种是目前我认为最好的，实现最简单。

转载于:https://www.cnblogs.com/cosyer/p/8571964.html

React-Router4按需加载相关推荐

React Native按需加载手Q狼人杀探索之路
本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/mUzq4NaBHeF3T-NStLzuRw 作者:pe ...
React Native 按需加载手Q狼人杀探索之路
导语:最近特别火的狼人杀和最近特别火的React Native会擦出什么样的火花呢?本文和您一同探讨RN性能优化的现实场景. 项目简介: 狼人杀游戏是多人实时性游戏,对流畅度等性能都有要求.作为大型游 ...
react路由按需加载方法
使用router4之后以前的按需加载方法require.ensure 是不好使了. 所以我们改用react-loadable插件做按需加载. 第一步: yarn add react-loadable ...
React-router 4 按需加载的实现方式及原理(Code Splitting)
React-router 4 介绍了在router4以后,如何去实现按需加载Component,在router4以前,我们是使用getComponent的的方式来实现按需加载的,router4中,ge ...
react按需加载(getComponent优美写法),并指定输出模块名称解决缓存(getComponent与chunkFilename)...
react配合webpack进行按需加载的方法很简单,Route的component改为getComponent,组件用require.ensure的方式获取,并在webpack中配置chunkFil ...
react 动态路嵌套动子路由_react 路由动态加载组件，实现按需加载
默认情况下,当在项目根路径下执行npm run build时,create-react- app内部使用webpack将src/路径下的所有代码打包成一个JS文件和一个 CSS文件. 当项目代码量不多 ...
React单页如何规划路由、设计Store、划分模块、按需加载
本项目地址:react-coat-helloworld react-coat 同时支持浏览器渲染(SPA)和服务器渲染(SSR),本 Demo 仅演示浏览器渲染,请先了解一下:react-coat 第 ...
react项目如何按需加载antdDesign组件
react项目如何按需加载antdDesign组件分为两种情况: 第一种手写的,不使用脚手架: 1.安装: npm install ant --save 2.引用: import { Alert, F ...
快速搭建react项目骨架（按需加载、redux、axios、项目级目录等等）
一.前言最近整理了一下项目骨架,顺便自定义了一个脚手架,方便日后使用.我会从头开始,步骤一步步写明白,如果还有不清楚的可以评论区留言.先大致介绍一下这个骨架,我们采用 create-react-ap ...
react 中使用import()实现按需加载报错解决方法 --‘import’ and ‘export’ may only appear at the top level
react 中使用import()实现按需加载报错解决方法 --'import' and 'export' may only appear at the top level 参考文章: (1)rea ...

React-Router4按需加载

React-Router4按需加载相关推荐

最新文章

热门文章