由上篇文章我们可以知道，我的项目，打包后的 js 是 7M 的，首屏就加载 7M 的文件虽然没什么特别大的缺点，但总不是最优的解决办法

因此我们用到了 react-router4 的 react-loadable ,以路由的方式进行代码分割。

使用方法很简单：

　　1、首先需要一个 loading 组建，用于加载前的展示

　　2、然后修改组建的加载入口

　　

　　

基本的操作就如上图所示。

由上面文章我们可以知道，我的项目打包到同一个 js 里面，有 7M 的大小

然后通过 coding split 之后呢，看看我们的文件吧：

这样带来的坏处就是，可能我的不同组件引入了相同的代码，会导致多次打包。

原理➡️

react-loadable 进行代码分割的基本使用的更多相关文章

  1. React中的代码分割

    代码分割想要解决的问题是:经打包工具

  2. React配合Webpack实现代码分割与异步加载

    这是Webpack+React系列配置过程记录的第四篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  3. 【Web前端Talk】React-loadable 进行代码分割的基本使用

    随着项目功能的扩充.版本迭代,我们与Webpack捆绑起来的的项目越来越大,大到开始影响加载速度了.这时我们就该考虑如何对代码进行拆分了. 这次我们一起学习一下如何对React项目中的代码进行Code ...

  4. react-router 4实现代码分割（code spliting）

    官方一开始推荐的使用bundle-loader来做代码分割的方式感觉有点麻烦,而且代码看起来有点不舒服.而且需要一直依赖bunder-loader 一开始我想为什么不能像vue一样,直接使用ES的新特 ...

  5. react-router4.x 实用例子(路由过渡动画、代码分割)

    react-router4.2.0实用例子 代码分割 官网上面写的代码分割是不支持create-react-app脚手架的,要使用import实现 创建一个bundle.js文件 import { C ...

  6. webpack练手项目之easySlide（二）：代码分割（转）

    在上一篇 webpack练手项目之easySlide(一):初探webpack  中我们一起为大家介绍了webpack的基本用法,使用webpack对前端代码进行模块化打包. 但是乍一看webpack ...

  7. webpack 代码分割一点事

    webpack 俨然已经成为前端最主流的构建工具,其功能多种多样,我们今天就来分析下关于代码分割这部分的一点事,并在最后讲述如何实现在webpack编译出的代码里手动添加一个异步chunk. 什么是c ...

  8. webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载

    本节课讲解webpack4打包单页应用过程中的代码分割和代码懒加载.不同于多页面应用的提取公共代码,单页面的代码分割和懒加载不是通过webpack配置来实现的,而是通过webpack的写法和内置函数实 ...

  9. 王家林系列之scala--第69讲：Scala并发编程react、loop代码实战详解

    刚才看了一下,群里王家林老师又更新课程了,真为王老师的勤奋感到佩服,于是迫不及待的下载下来观看学习.本期讲的是关于scala并发编程的react.loop代码实战. 信息来源于 DT大数据梦工厂微信公 ...

  10. webpack：代码分割与按需加载

    代码分割就是我们根据实际业务需求将代码进行分割,然后在合适的时候在将其加载进入文档中. 代码中总有些东西我们希望拆分开来,比如: 使用概率较低的模块,希望后期使用的时候异步加载 框架代码,希望能利用浏 ...

随机推荐

  1. mysql5.7zip安装

    一.下载mysql zip文件 二.解压.(我的目录A:\mysql\mysql-5.7.23-winx64) 三.配置环境变量   Path后面追加%A:\mysql\mysql-5.7.23-wi ...

  2. 【BZOJ 2761】 不重复数字 （哈希算法）

    链接 http://www.lydsy.com/JudgeOnline/problem.php?id=2761 Description 给出N个数,要求把其中重复的去掉,只保留第一次出现的数. 例如, ...

  3. Android开发——遍历读写U盘、SD卡等外部存储

    1.首先需要得到挂载在手机上的有哪些盘符 String[] result = null; StorageManager storageManager = (StorageManager)getSyst ...

  4. Struts2执行原理

    [原理图] [MVC] [执行过程(重要!!!!!)] 1) 客户端浏览器发出请求时,被Tomcat服务器所接收.Tomcat容器将用户的请求封装为HttpServletRequest对象 2) 请求 ...

  5. C++中的左移、右移运算

    移位运算包含“逻辑移位”(logical shift)和“算术移位”(arithmetic shift). 逻辑移位:移出去的位丢弃,空缺位(vacant bit)用 0 填充. 算术移位:移出去的位 ...

  6. POJ1703-Find them, Catch them 并查集构造

                                             Find them, Catch them 好久没有做并查集的题,竟然快把并查集忘完了. 题意:大致是有两个监狱,n个 ...

  7. 【转】关于大型网站技术演进的思考（二十）--网站静态化处理—web前端优化—中（12）

    Web前端很多优化原则都是从如何提升网络通讯效率的角度提出的,但是这些原则使用的时候还是有很多陷阱在里面,如果我们不能深入理解这些优化原则背后所隐藏的技术原理,很有可能掉进这些陷阱里,最终没有达到最佳 ...

  8. 实体类与实体DTO类之间的转换

    实体类与实体DTO类之间的转换 实体类与实体DTO类之间的转换 1.通过使用第三方序列化反序列化工具Newtonsoft.Json 2.通过反射实现 3.通过表达式目录树加字典缓存实现 4. 通过表达 ...

  9. 魔咒词典（hdu 1880）

    Problem Description 哈利波特在魔法学校的必修课之一就是学习魔咒.据说魔法世界有100000种不同的魔咒,哈利很难全部记住,但是为了对抗强敌,他必须在危急时刻能够调用任何一个需要的魔 ...

  10. 【UOJ179】线性规划（单纯形）

    题意: 思路:单纯形模板 ..,..]of double; idx,idy,q:..]of longint; c:..]of double; n,m,i,j,op,x,y:longint; eps,m ...