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

第一种:ReactTraining/react-router 介绍的基于 webpackbabel-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

第二种:SF网友介绍的Bundle组件配合webpack组件bundle-loader

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

https://segmentfault.com/a/1190000009539836

但是我尝试的时候发现总是报错说不要在import中引入webpack的loader。。。

然后我继续查,发现第三种实现

第三种:简书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

这种方式我试了下,确实能分片,但是讨论里有人指出性能上不如Bundle组件,那个人好像还是Create-react-app的主要贡献者

四种方式我都试过,期间。。这个过程略痛苦。。。不过结论是:第三种是目前我认为最好的,基于create-react-app,且实现最简单。

但是较大的项目,一般我们都会eject出来自己配置webpack啦,其实影响也不大。

React-Router4 按需加载的4种实现的更多相关文章

  1. route按需加载的3种方式:vue异步组件、es提案的import()、webpack的require.ensure()

    1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件.举例如下: { path: '/promisedemo' ...

  2. react路由按需加载方法

    使用router4之后以前的按需加载方法require.ensure 是不好使了. 所以我们改用react-loadable插件做按需加载. 第一步: yarn add react-loadable ...

  3. React Router 按需加载+服务器渲染的闪屏问题

    伴随着React协议的『妥协』(v16采用MIT),React为项目的主体,这个在短期内是不会改变的了,在平时使用过程中发现了如下这个问题: 在服务器渲染的时候,刷新页面会出现闪屏的现象(白屏一闪而过 ...

  4. vue中路由按需加载的几种方式

    使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import ...

  5. vue 动态路由按需加载的三种方式

    在Vue项目中,一般使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hell ...

  6. vue项目实现按需加载的3种方式:vue异步组件技术、es提案的import()、webpack提供的require.ensure()

    1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件. 举例如下: { path: '/promisedemo ...

  7. vue项目实现路由按需加载的3种方式

    vue异步组件技术 ==== 异步加载vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件 /* vue异步组件技术 */ { ...

  8. vue项目实现按需加载的3种方式

    vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载.这种方式下一个组件生成一个js文件 用例: { path: '/promisedemo', name: ' ...

  9. vue项目按需加载的3种方式

    本文重要是路由打包优化: 原理:利用webpack对代码进行分割是懒加载的前提,懒加载就是异步调用组件,需要时候才下载. 1.vue异步组件技术 vue-router配置路由,使用vue的异步组件技术 ...

随机推荐

  1. opencv-0-项目启程

    opencv-0-项目启程 opencvC++QT 开始 无数次说要开始 opencv 的系列, 但是都由于各种原因没有坚持下去, 这次我做最后一次尝试, 也做最后一次坚持, 如果不做下去, 我就再也 ...

  2. java 8 Streams简介

    目录 简介 Functional Interface Function:一个参数一个返回值 BiFunction:接收两个参数,一个返回值 Supplier:无参的Function Consumer: ...

  3. LaTex中文article模板(支持代码、数学、TikZ)

    代码 请使用XeLatex编译 main.tex \documentclass{article} \usepackage{ctex} %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% ...

  4. JAVA 之 JSTL

    一.什么是JSTL JSP标准标签库(JSTL)是一个JSP标签集合,它封装了JSP应用的通用核心功能. JSTL支持通用的.结构化的任务,比如迭代,条件判断,XML文档操作,国际化标签,SQL标签. ...

  5. 标准库shutil

    shutil模块是高级的 文件.文件夹.压缩包 处理模块. 下面是关于其中各种方法的使用介绍: 1.shutil.copyfileobj(fsrc, fdst[, length])将文件内容拷贝到另一 ...

  6. SaltStack数据系统之Grains、Pillar

    SaltStack数据系统之Grains.Pillar 1.什么是Grains? Grains是saltstack的组件,用于收集salt-minion在启动时候的信息,又称为静态信息.Grains是 ...

  7. LeetCode 25. K 个一组翻转链表 | Python

    25. K 个一组翻转链表 题目来源:https://leetcode-cn.com/problems/reverse-nodes-in-k-group 题目 给你一个链表,每 k 个节点一组进行翻转 ...

  8. Keepalived搭建LVS高可用性集群系统

    ! Configuration File for keepalived global_defs { notification_email { acassen@firewall.loc failover ...

  9. 请不要浪费你的生命,一文多发推广就用它(OpenWrite)

    你我的共同困惑 你是否跟我一样?刚开始尝试写作,自己没有名气,有以下几个困惑: 想要推广自己,想在多个平台发文? 多平台发文之后,想要看各个平台的流量如何? 有了流量,想要引流用户到自己的网站? 网站 ...

  10. TestNG测试用例重跑详解及实践优化

    测试用例运行稳定性是自动化质量的一个重要指标,在运行中需要尽可能的剔除非bug造成的测试用例执行失败,对于失败用例进行重跑是常用策略之一.一种重跑策略是所有用例运行结束后对失败用例重跑,另一种重跑策略 ...