由上篇文章我们可以知道，我的项目，打包后的 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. maven打包oracle jdbc驱动

    背景 由于版权问题,maven中央仓库缺少oracle jdbc的驱动,这个给开发带来了很多不便利性.也出现各种各样的解决方案,基本就两种思路: 将oracle驱动安装到本地仓库,这个需要大家统一好名 ...

  2. python基础知识12-异常

    几个命令: sudo apt install tree tree 当前目录以树形结构展示出来. tree a 查看a内的所有目录.也可以跟绝对路径. a = input('请输入您的密码') 将用户输 ...

  3. Android设置透明状态

    xml中: android:background="@android:color/transparent" 半透明: android:background="#e0000 ...

  4. LeetCode（169）Majority Element

    题目 Given an array of size n, find the majority element. The majority element is the element that app ...

  5. 杭电 4004 The Frog's Games 青蛙跳水 （二分法，贪心）

    Description The annual Games in frogs' kingdom started again. The most famous game is the Ironfrog T ...

  6. POJ 1655 Balancing Act （树形DP求树的重心）

    题意: 求一棵树中以某个点为重心最小的子树集, 就是去掉这个点, 图中节点最多的联通块节点最少. 分析: 想知道这个点是不是最优的点, 只要比较它子树的数量和除去这部分其他的数量(它的父节点那部分树) ...

  7. python的cache修饰器

    简单的memory cache.可以用来内存缓存任意函数方法. #!/usr/bin/python import functools from threading import RLock impor ...

  8. POJ 3680: Intervals【最小费用最大流】

    题目大意:你有N个开区间,每个区间有个重量wi,你要选择一些区间,使得满足:每个点被不超过K个区间覆盖的前提下,重量最大 思路:感觉是很好想的费用流,把每个区间首尾相连,费用为该区间的重量的相反数(由 ...

  9. JS获取服务器时间并且计算距离当前指定时间差的函数

    项目中遇到了从服务器获取时间,现在记录一下方便以后查询: 1.后台代码:(创建一个date对象并以JSON的形式返回去) // 获取服务器时间 public String getNowServerTi ...

  10. PHP 基础复习 2018-06-17

    (1)AJAX Asynchronous JavaScript And XML(异步 JavaScript 及 XML) (2)创建 XMLHttpRequest 对象 不同的浏览器使用不同的方法来创 ...