由上篇文章我们可以知道，我的项目，打包后的 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. 关于inet_ntop、inet_pton中的n和p分别代表的意义

    函数名中的p和n非别代表表达(presentation)和数值(numeric).地址的表达格式通常是ASCII字符串,数值格式则是存放到套接字地址结构中的二进制值. 参考自:https://blog ...

  2. Python自动化测试框架——生成测试报告

    如何才能让用例自动运行完之后,生成一张直观可看易懂的测试报告呢? 小编使用的是unittest的一个扩展HTMLTestRunner 环境准备 使用之前,我们需要下载HTMLTestRunner.py ...

  3. Docker客户端连接Docker Daemon的方式

    Docker为C/S架构,服务端为docker daemon,客户端为docker.service,支持本地unix socket域套接字通信与远程socket通信. 默认为本地unix socket ...

  4. tornado框架基础08-sqlalchemy表关系和简单登录注册

    01 一对一表关系 Module 需要先创建对应的 Module ,这里采用之前建立好的 User 和 UserDetails relationship from sqlalchemy.orm imp ...

  5. 有关OEP脱壳

    首先补充: OEP:(Original Entry Point),程序的入口点,软件加壳就是隐藏了OEP(或者用了假的OEP), 只要我们找到程序真正的OEP,就可以立刻脱壳. PUSHAD (压栈) ...

  6. 【HDU 3037】Saving Beans（卢卡斯模板）

    Problem Description Although winter is far away, squirrels have to work day and night to save beans. ...

  7. 【HIHOCODER 1526】 序列的值（二进制DP）

    时间限制:20000ms 单点时限:1000ms 内存限制:256MB 描述 给定一个长度为 n 的序列 a[1..n],定义函数 f(b[1..m]) 的值为在 [0,m-1] 内满足如下条件的 i ...

  8. .net中的协变和逆变

    百度:委托中的协变和逆变. 百度:.net中的协变和逆变. 协变是从子类转为父类. 逆变是从父类到子类. 这样理解不一定严谨或者正确.需要具体看代码研究.

  9. 生产环境下lnmp的权限说明

    https://www.cnblogs.com/zrp2013/p/4183546.html 有关权限说明:-rwxrw-r‐-1 root root 1213 Feb 2 09:39 50.html ...

  10. 七牛云 X 英语流利说：教育 3.0 时代的智能突破

    美国当地时间 2018 年 9 月 27 日,国内领先的人工智能驱动的教育科技公司「英语流利说」正式挂牌纽交所,以其独创的教育 3.0 模式,成为中国「AI+ 教育」第一股. 教育 3.0 时代的智能 ...