102-advanced-代码分割
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-代码分割的更多相关文章
- webpack练手项目之easySlide(二):代码分割(转)
在上一篇 webpack练手项目之easySlide(一):初探webpack 中我们一起为大家介绍了webpack的基本用法,使用webpack对前端代码进行模块化打包. 但是乍一看webpack ...
- React配合Webpack实现代码分割与异步加载
这是Webpack+React系列配置过程记录的第四篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
- react-router 4实现代码分割(code spliting)
官方一开始推荐的使用bundle-loader来做代码分割的方式感觉有点麻烦,而且代码看起来有点不舒服.而且需要一直依赖bunder-loader 一开始我想为什么不能像vue一样,直接使用ES的新特 ...
- webpack 代码分割一点事
webpack 俨然已经成为前端最主流的构建工具,其功能多种多样,我们今天就来分析下关于代码分割这部分的一点事,并在最后讲述如何实现在webpack编译出的代码里手动添加一个异步chunk. 什么是c ...
- webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载
本节课讲解webpack4打包单页应用过程中的代码分割和代码懒加载.不同于多页面应用的提取公共代码,单页面的代码分割和懒加载不是通过webpack配置来实现的,而是通过webpack的写法和内置函数实 ...
- webpack:代码分割与按需加载
代码分割就是我们根据实际业务需求将代码进行分割,然后在合适的时候在将其加载进入文档中. 代码中总有些东西我们希望拆分开来,比如: 使用概率较低的模块,希望后期使用的时候异步加载 框架代码,希望能利用浏 ...
- webpack的代码分割/离
两种方法: 1.webpack的methods----require.ensure 2.ES 2015的Loader spec //require.ensure语法 require.ensure [] ...
- react-router4.x 实用例子(路由过渡动画、代码分割)
react-router4.2.0实用例子 代码分割 官网上面写的代码分割是不支持create-react-app脚手架的,要使用import实现 创建一个bundle.js文件 import { C ...
- React中的代码分割
代码分割想要解决的问题是:经打包工具
- JS打包与代码分割
参考来源:https://github.com/ruanyf/webpack-demos#demo01-entry-file-source 后面的代码:https://github.com/94713 ...
随机推荐
- 抽象工厂模式(abstract factory pattern)------创造型模式
创建型模式:抽象工厂模式 引入概念: 1.产品等级结构:当抽象的产品由具体的工厂生产出不同的产品时,这些归属与同一类的抽象产品就构成了产品等级结构: 2.产品族:具体的工厂可以生产出来的不同产品就构成 ...
- HTML表单的应用
<html> <head> <title>HTML表单的应用</title> </head> <body> <!-- bo ...
- HDFS原理解析(总体架构,读写操作流程)
前言 HDFS 是一个能够面向大规模数据使用的,可进行扩展的文件存储与传递系统.是一种允许文件通过网络在多台主机上分享的文件系统,可让多机器上的多用户分享文件和 存储空间.让实际上是通过网络来访问文件 ...
- Dubbo(二) -- Simple Monitor
一.简介 dubbo-monitor-simple是dubbo提供的简单监控中心,可以用来显示接口暴露,注册情况,也可以看接口的调用明细,调用时间等. Simple Monitor挂掉不会影响到Con ...
- Android中Bitmap和Drawable详解
一.相关概念 1.Drawable就是一个可画的对象,其可能是一张位图(BitmapDrawable),也可能是一个图形(ShapeDrawable),还有可能是一个图层(LayerDrawable) ...
- STM32学习之路之入门篇
2006年ARM公司推出了基于ARMV7架构的cortex系列的标准体系结构,以满足各种技术得不同性能要求,包含了A,R,M三个分工明确的系列 其中A系列面向复杂的尖端应用程序,用于运行开放式的复杂操 ...
- Oracle分页查询sql语句
1. select * from ( select t.*, rownum RN from TABLE_NAME t ) where RN > 0 and RN <= 15 2. se ...
- JS常用函数与方法
//当页面关闭时触发 window.onbeforeunload = function() { alert('关闭了吧'); } //关闭窗口(弹出式窗口) parent.window.close() ...
- android基础---->音频和视频的使用
Android 在播放音频和视频方面也是做了相当不错的支持,它提供了一套较为完整的API,使得开发者可以很轻松地编写出一个简易的音频或视频播放器.今天我们开始android中音频和视频使用的学习. 目 ...
- Excel 2010 Alt+; (分号) --- “只选定当前选定区域中的可视单元格”
excel怎样把筛选出来的加上颜色? 1.选中筛选结果数据区域: 2.同时按下Alt+; (分号)键,选中筛选出的数据: 3.鼠标右键,设置单元格格式: 4.在弹出的对话框中,设置字体.背景颜色,即可 ...