为什么需要按需加载

随着互联网的发展,一个网页需要承载的功能越来越多。 对于采用单页应用作为前端架构的网站来说,会面临着一个网页需要加载的代码量很大的问题,因为许多功能都集中的做到了一个 HTML 里。 这会导致网页加载缓慢、交互卡顿,用户体验将非常糟糕。

导致这个问题的根本原因在于一次性的加载所有功能对应的代码,但其实用户每一阶段只可能使用其中一部分功能。 所以解决以上问题的方法就是用户当前需要用什么功能就只加载这个功能对应的代码,也就是所谓的按需加载。

如何使用按需加载

在给单页应用做按需加载优化时,一般采用以下原则:

  • 把整个网站划分成一个个小功能,再按照每个功能的相关程度把它们分成几类。
  • 把每一类合并为一个 Chunk,按需加载对应的 Chunk。
  • 对于用户首次打开你的网站时需要看到的画面所对应的功能,不要对它们做按需加载,而是放到执行入口所在的 Chunk 中,以降低用户能感知的网页加载时间。
  • 对于个别依赖大量代码的功能点,例如依赖 Chart.js 去画图表、依赖 flv.js 去播放视频的功能点,可再对其进行按需加载。

被分割出去的代码的加载需要一定的时机去触发,也就是当用户操作到了或者即将操作到对应的功能时再去加载对应的代码。 被分割出去的代码的加载时机需要开发者自己去根据网页的需求去衡量和确定。

由于被分割出去进行按需加载的代码在加载的过程中也需要耗时,你可以预言用户接下来可能会进行的操作,并提前加载好对应的代码,从而让用户感知不到网络加载时间。

用 Webpack 实现按需加载

Webpack 内置了强大的分割代码的功能去实现按需加载,实现起来非常简单。

举个例子,现在需要做这样一个进行了按需加载优化的网页:

  • 网页首次加载时只加载  main.js  文件,网页会展示一个按钮, main.js  文件中只包含监听按钮事件和加载按需加载的代码。
  • 当按钮被点击时才去加载被分割出去的  show.js  文件,加载成功后再执行  show.js  里的函数。

其中  main.js  文件内容如下:

window.document.getElementById('btn').addEventListener('click', function () {
// 当按钮被点击后才去加载 show.js 文件,文件加载成功后执行文件导出的函数
import(/* webpackChunkName: "show" */ './show').then((show) => {
show('Webpack');
})
});
show.js 文件内容如下:
module.exports = function (content) {
window.alert('Hello ' + content);
};

代码中最关键的一句是  import(/* webpackChunkName: "show" */ './show') ,Webpack 内置了对  import(*)  语句的支持,当 Webpack 遇到了类似的语句时会这样处理:

  • 以  ./show.js  为入口新生成一个 Chunk;
  • 当代码执行到  import  所在语句时才会去加载由 Chunk 对应生成的文件。
  • import 返回一个 Promise,当文件加载成功时可以在 Promise 的  then  方法中获取到  show.js  导出的内容。
  • 在使用 import() 分割代码后,你的浏览器并且要支持 Promise API 才能让代码正常运行, 因为 import() 返回一个 Promise,它依赖 Promise。对于不原生支持 Promise 的浏览器,你可以注入 Promise polyfill。

/* webpackChunkName: "show" */  的含义是为动态生成的 Chunk 赋予一个名称,以方便我们追踪和调试代码。 如果不指定动态生成的 Chunk 的名称,默认名称将会是  [id].js。 /* webpackChunkName: "show" */  是在 Webpack3 中引入的新特性,在 Webpack3 之前是无法为动态生成的 Chunk 赋予名称的。

为了正确的输出在  /* webpackChunkName: "show" */  中配置的 ChunkName,还需要配置下 Webpack,配置如下:

module.exports = {
// JS 执行入口文件
entry: {
main: './main.js',
},
output: {
// 为从 entry 中配置生成的 Chunk 配置输出文件的名称
filename: '[name].js',
// 为动态加载的 Chunk 配置输出文件的名称
chunkFilename: '[name].js',
}
};

其中最关键的一行是  chunkFilename: '[name].js ',,它专门指定动态生成的 Chunk 在输出时的文件名称。 如果没有这行,分割出的代码的文件名称将会是  [id].js 。 chunkFilename 具体含义见2-2 配置-Output。本实例提供项目完整代码

按需加载与 ReactRouter

在实战中,不可能会有上面那么简单的场景,接下来举一个实战中的例子:对采用了 ReactRouter 的应用进行按需加载优化。 这个例子由一个单页应用构成,这个单页应用由两个子页面构成,通过 ReactRouter 在两个子页面之间切换和管理路由。

这个单页应用的入口文件  main.js  如下:

import React, {PureComponent, createElement} from 'react';
import {render} from 'react-dom';
import {HashRouter, Route, Link} from 'react-router-dom';
import PageHome from './pages/home'; /**
* 异步加载组件
* @param load 组件加载函数,load 函数会返回一个 Promise,在文件加载完成时 resolve
* @returns {AsyncComponent} 返回一个高阶组件用于封装需要异步加载的组件
*/
function getAsyncComponent(load) {
return class AsyncComponent extends PureComponent { componentDidMount() {
// 在高阶组件 DidMount 时才去执行网络加载步骤
load().then(({default: component}) => {
// 代码加载成功,获取到了代码导出的值,调用 setState 通知高阶组件重新渲染子组件
this.setState({
component,
})
});
} render() {
const {component} = this.state || {};
// component 是 React.Component 类型,需要通过 React.createElement 生产一个组件实例
return component ? createElement(component) : null;
}
}
} // 根组件
function App() {
return (
<HashRouter>
<div>
<nav>
<Link to='/'>Home</Link> | <Link to='/about'>About</Link> | <Link to='/login'>Login</Link>
</nav>
<hr/>
<Route exact path='/' component={PageHome}/>
<Route path='/about' component={getAsyncComponent(
// 异步加载函数,异步地加载 PageAbout 组件
() => import(/* webpackChunkName: 'page-about' */'./pages/about')
)}
/>
<Route path='/login' component={getAsyncComponent(
// 异步加载函数,异步地加载 PageAbout 组件
() => import(/* webpackChunkName: 'page-login' */'./pages/login')
)}
/>
</div>
</HashRouter>
)
} // 渲染根组件
render(<App/>, window.document.getElementById('app'));

以上代码中最关键的部分是  getAsyncComponent  函数,它的作用是配合 ReactRouter 去按需加载组件,具体含义请看代码中的注释。

由于以上源码需要通过 Babel 去转换后才能在浏览器中正常运行,需要在 Webpack 中配置好对应的 babel-loader,源码先交给 babel-loader 处理后再交给 Webpack 去处理其中的 import(*) 语句。 但这样做后你很快会发现一个问题:Babel 报出错误说不认识 import(*) 语法。 导致这个问题的原因是 import(*) 语法还没有被加入到在 3-1使用ES6语言中提到的 ECMAScript 标准中去, 为此我们需要安装一个 Babel 插件  babel-plugin-syntax-dynamic-import ,并且将其加入到 . babelrc  中去:

{
"presets": [
"env",
"react"
],
"plugins": [
"syntax-dynamic-import"
]
}

执行 Webpack 构建后,你会发现输出了三个文件:

main.js:执行入口所在的代码块,同时还包括 PageHome 所需的代码,因为用户首次打开网页时就需要看到 PageHome 的内容,所以不对其进行按需加载,以降低用户能感知到的加载时间;
page-about.js:当用户访问 /about 时才会加载的代码块;
page-login.js:当用户访问 /login 时才会加载的代码块。

同时你还会发现  page-about.js  和  page-login.js  这两个文件在首页是不会加载的,而是会当你切换到了对应的子页面后文件才会开始加载。本实例提供项目完整代码

webpack学习笔记--按需加载的更多相关文章

  1. thinkphp学习笔记9—自动加载

    原文:thinkphp学习笔记9-自动加载 1.命名空间自动加载 在3.2版本中不需要手动加载类库文件,可以很方便的完成自动加载. 系统可以根据类的命名空间自动定位到类库文件,例如定义了一个类Org\ ...

  2. 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)

    1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...

  3. webpack中实现按需加载

    webpack中的require.ensure()可以实现按需加载资源包括js,css等,它会给里面require的文件单独打包,不和主文件打包在一起,webpack会自动配置名字,如0.js,1.j ...

  4. React Router 4.0 + webpack 实现组件按需加载

    网上关于React Router 4.0的按需加载文章有很多,大致的思路都一样,但是其实具体实现起来却要根据自己的实际情况来定,这里主要介绍一下我的实现方式. 主要方式是通过Route组件的rende ...

  5. 【EF学习笔记08】----------加载关联表的数据 显式加载

    显式加载 讲解之前,先来看一下我们的数据库结构:班级表 学生表 加载从表集合类型 //显示加载 Console.WriteLine("=========查询集合===========&quo ...

  6. node 学习笔记 - Modules 模块加载系统 (1)

    本文同步自我的个人博客:http://www.52cik.com/2015/12/11/learn-node-modules-path.html 用了这么久的 require,但却没有系统的学习过 n ...

  7. Openstack本学习笔记——Neutron-server服务加载和启动源代码分析(三)

    本文是在学习Openstack过程中整理和总结.因为时间和个人能力有限.错误之处在所难免,欢迎指正! 在Neutron-server服务载入与启动源代码分析(二)中搞定模块功能的扩展和载入.我们就回到 ...

  8. Android学习笔记_37_ListView批量加载数据和页脚设置

    1.在activity_main.xml布局文件中加入ListView控件: <RelativeLayout xmlns:android="http://schemas.android ...

  9. Spring学习笔记(1)——资源加载

    <!-- 占坑,迟点补充底层原理 --> Spring支持4种资源的地址前缀 (1)从类路径中加载资源——classpath: classpath:和classpath:/是等价的,都是相 ...

随机推荐

  1. 6个Async/Await完胜Promise的原因

    友情提醒:NodeJS自从7.6版开始已经内置了对async/await的支持.如果你还没用过该特性,那么接下来我会给出一系列的原因解释为何你应该立即开始使用它并且会结合示例代码说明. async/a ...

  2. Git学习笔记01-安装Git

    学习的资料来自廖雪峰官方网站的Git教程,菜鸟教程的Git教程 Git是一个分布式版本控制工具,在windows上使用Git可以直接从官网下载,然后默认选项安装即可. 安装完成后,在开始菜单中找到找到 ...

  3. C#实现邮件发送的功能

    Ø  发送邮件所用的核心知识点 微软封装好的MailMessage类:主要处理发送邮件的内容(如:收发人地址.标题.主体.图片等等) 微软封装好的SmtpClient类:主要处理用smtp方式发送此邮 ...

  4. 数据库的OLE字段写入长二进制文件

    //'*************************************************************************************** //'函数:将数据 ...

  5. Xamarin AVD x86 问题

    inspired by https://stackoverflow.com/questions/34282243/error-while-starting-emulator/34282302#3428 ...

  6. bean shell之间传递参数

    BeanShell PostProcessor 向 BeanShell断言 传递参数 断言成功:

  7. 【原创】大叔经验分享(29)cdh5使用已存在的metastore数据库部署hive

    cdh5.16.1使用的hive版本是hive-1.1.0+cdh5.16.1+1431,详见:https://www.cloudera.com/documentation/enterprise/re ...

  8. 实体类和json互相转换

    /// <summary> /// 将实体类转换为json数据 /// </summary> /// <returns></returns> publi ...

  9. Java数据结构与算法解析(十二)——散列表

    散列表概述 散列表就是一种以 键-值(key-indexed) 存储数据的结构,我们只要输入待查找的值即key,即可查找到其对应的值. 散列表的思路很简单,如果所有的键都是整数,那么就可以使用一个简单 ...

  10. python-包及日志模块使用

    一.包 1.包就是一个保护有__init__.py文件的文件夹,包的本质就是一种模块,即包是用来导入使用的,包内部包含的文件也都是用来被导入使用的.包是为了更好组织好模块,就是一个文件夹. 注:在py ...