1、Bundling

  大多数React应用程序将使用Webpack或Browserify等工具“捆绑”文件。捆绑是跟踪导入的文件并将它们合并到单个文件中的过程:“捆绑”。然后,该包可以包含在网页中以一次加载整个应用程序。

  示例【app】

// app.js
import { add } from './math.js';
console.log(add(16, 26)); //
// math.js
export function add(a, b) {
return a + b;
}

  Bundle:

function add(a, b) {
return a + b;
} console.log(add(16, 26)); //

  如果您使用的是创建React应用程序,Next.js,Gatsby或类似工具,那么您将拥有一个开箱即用的Webpack设置来捆绑您的应用程序。

2、Code-Splitting

  是Webpack和Browserify等捆绑软件支持的一项功能,它可以创建多个可在运行时动态加载的bundle。代码分割您的应用程序可以帮助您“延迟加载”用户当前需要的内容,这可以显着提高应用程序的性能。

2.1、import

  将代码分割引入您的应用程序的最佳方式是通过动态import()语法。

以前使用

import { add } from './math';

console.log(add(16, 26));

现在可以使用

import("./math").then(math => {
console.log(math.add(16, 26));
});

但目前只是提议

  当Webpack遇到这种语法时,它会自动启动代码分割您的应用程序。如果您正在使用创建React应用程序,则已经为您配置了该应用程序,您可以立即开始使用它。它在Next.js中也支持开箱即用。

  在使用Babel时,您需要确保Babel能够解析动态导入语法,但不会对其进行转换。为此,您需要使用babel-plugin-syntax-dynamic-import。

2.2、React Loadable

包装动态导入,React Loadable可帮助您创建加载状态,错误状态,超时,预加载等。它甚至可以帮助您在服务器端渲染包含大量代码分割的应用程序。

之前:

import OtherComponent from './OtherComponent';

const MyComponent = () => (
<OtherComponent/>
);

现在

import Loadable from 'react-loadable';

const LoadableOtherComponent = Loadable({
loader: () => import('./OtherComponent'),
loading: () => <div>Loading...</div>,
}); const MyComponent = () => (
<LoadableOtherComponent/>
);

3、基于路由的代码分割

  以下是如何使用React Router和React Loadable等库设置基于路由的代码分割到您的应用程序的示例。

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Loadable from 'react-loadable'; const Loading = () => <div>Loading...</div>; const Home = Loadable({
loader: () => import('./routes/Home'),
loading: Loading,
}); const About = Loadable({
loader: () => import('./routes/About'),
loading: Loading,
}); const App = () => (
<Router>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
</Switch>
</Router>
);

102-advanced-代码分割的更多相关文章

  1. webpack练手项目之easySlide(二):代码分割(转)

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

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

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

  3. react-router 4实现代码分割(code spliting)

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

  4. webpack 代码分割一点事

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

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

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

  6. webpack:代码分割与按需加载

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

  7. webpack的代码分割/离

    两种方法: 1.webpack的methods----require.ensure 2.ES 2015的Loader spec //require.ensure语法 require.ensure [] ...

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

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

  9. React中的代码分割

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

  10. JS打包与代码分割

    参考来源:https://github.com/ruanyf/webpack-demos#demo01-entry-file-source 后面的代码:https://github.com/94713 ...

随机推荐

  1. 抽象工厂模式(abstract factory pattern)------创造型模式

    创建型模式:抽象工厂模式 引入概念: 1.产品等级结构:当抽象的产品由具体的工厂生产出不同的产品时,这些归属与同一类的抽象产品就构成了产品等级结构: 2.产品族:具体的工厂可以生产出来的不同产品就构成 ...

  2. HTML表单的应用

    <html> <head> <title>HTML表单的应用</title> </head> <body> <!-- bo ...

  3. HDFS原理解析(总体架构,读写操作流程)

    前言 HDFS 是一个能够面向大规模数据使用的,可进行扩展的文件存储与传递系统.是一种允许文件通过网络在多台主机上分享的文件系统,可让多机器上的多用户分享文件和 存储空间.让实际上是通过网络来访问文件 ...

  4. Dubbo(二) -- Simple Monitor

    一.简介 dubbo-monitor-simple是dubbo提供的简单监控中心,可以用来显示接口暴露,注册情况,也可以看接口的调用明细,调用时间等. Simple Monitor挂掉不会影响到Con ...

  5. Android中Bitmap和Drawable详解

    一.相关概念 1.Drawable就是一个可画的对象,其可能是一张位图(BitmapDrawable),也可能是一个图形(ShapeDrawable),还有可能是一个图层(LayerDrawable) ...

  6. STM32学习之路之入门篇

    2006年ARM公司推出了基于ARMV7架构的cortex系列的标准体系结构,以满足各种技术得不同性能要求,包含了A,R,M三个分工明确的系列 其中A系列面向复杂的尖端应用程序,用于运行开放式的复杂操 ...

  7. Oracle分页查询sql语句

    1. select * from ( select  t.*, rownum RN from TABLE_NAME  t ) where RN > 0 and RN <= 15 2. se ...

  8. JS常用函数与方法

    //当页面关闭时触发 window.onbeforeunload = function() { alert('关闭了吧'); } //关闭窗口(弹出式窗口) parent.window.close() ...

  9. android基础---->音频和视频的使用

    Android 在播放音频和视频方面也是做了相当不错的支持,它提供了一套较为完整的API,使得开发者可以很轻松地编写出一个简易的音频或视频播放器.今天我们开始android中音频和视频使用的学习. 目 ...

  10. Excel 2010 Alt+; (分号) --- “只选定当前选定区域中的可视单元格”

    excel怎样把筛选出来的加上颜色? 1.选中筛选结果数据区域: 2.同时按下Alt+; (分号)键,选中筛选出的数据: 3.鼠标右键,设置单元格格式: 4.在弹出的对话框中,设置字体.背景颜色,即可 ...