webpack异步加载的原理

webpack ensure相信大家都听过。有人称它为异步加载，也有人说做代码切割，那这 个家伙到底是用来干嘛的？其实说白了，它就是把js模块给独立导出一个.js文件的，然后使用这个 模块的时候，webpack会构造script dom元素，由浏览器发起异步请求这个js文件。

场景分析:

比如应用的首页里面有个按钮，点击后可以打开某个地图。打开地图的话就要利用百度地图的js,于是 我们不得不在首页中把百度地图的js一起打包进去首页,一个百度地图的js文件是非常大的，假设为 1m，于是就造成了我们首页打包的js非常大，用户打开首页的时间就比较长了。

有没有什么好的解决方法呢？

解决1

既然打包成同一个js非常大的话，那么我们完全可以把百度地图js分类出去，利用浏览器的并发请求 js文件处理，这样的话，会比加载一个js文件时间小得多。嗯，这也是个不错的方案。为baidumap.js 配置一个新的入口就行了，这样就能打包成两个js文件，都插入html即可（如果baidumap.js被多个 入口文件引用的话，也可以不用将其设置为入口文件，而且直接利用CommonsChunkPlugin,导出到一个 公共模块即可）可以参考我之前文章 webpack模块打包

那还有没有更好的解决方案呢？

解决2

当然还是有的！我们细想，百度地图是用户点击了才弹出来的，也就是说，这个功能是可选的。那么解决 方案就来了，能不能在用户点击的时候，我在去下载百度地图的js.当然可以。那如何实现用户点击的时候 再去下载百度地图的js呢？于是，我们可以写一个按钮的监听器

mapBtn.click(function() {

  //获取 文档head对象

  var head = document.getElementsByTagName('head')[0];

  //构建 <script>

  var script = document.createElement('script');

  //设置src属性

  script.async = true;

  script.src = "http://map.baidu.com/.js"

  //加入到head对象中

  head.appendChild(script);

})

上面的几行代码对大家来说都不难。可以在点击的时候，才加载百度地图，等百度地图加载完成后，在 利用百度地图的对象去执行我们的操作。ok，讲到这里webpack.ensure的原理也就讲了一大半了。 它就是 把一些js模块给独立出一个个js文件，然后需要用到的时候，在创建一个script对象，加入 到document.head对象中即可，浏览器会自动帮我们发起请求，去请求这个js文件，在写个回调，去 定义得到这个js文件后，需要做什么业务逻辑操作。

ok,那么我们就利用webpack的api去帮我们完成这样一件事情。点击后才进行异步加载百度地图js，上面 的click加载js时我们自己写的，webpack可以轻松帮我们搞定这样的事情，而不用我们手写

mapBtn.click(function() {

  require.ensure([], function() {

    var baidumap = require('./baidumap.js') //baidumap.js放在我们当前目录下

  })

})

搞定！当然还是分析一下。require.ensure这个函数是一个代码分离的分割线，表示 回调里面的require 是我们想要进行分割出去的，即require(’./baidumap.js’)，把baidumap.js分割出去，形成一个 webpack打包的单独js文件。当然ensure里面也是可以写一些同步的require的，比如



var sync = require('syncdemo.js')   //下面ensure里面也用到

mapBtn.click(function() {

  require.ensure([], function() {

    var baidumap = require('./baidumap.js') //baidumap.js放在我们当前目录下

    var sync = require('syncdemo.js')  //这个不会独立出去，因为它已经加载到模块缓存中了

  })

})

也就是说，ensure会把没有使用过的require资源进行独立分成成一个js文件. require.ensure的 第一个参数是什么意思呢？[], 其实就是 当前这个 require.ensure所依赖的其他 异步加载的模块。你想啊？如果A 和 B都是异步加载的，B中需要A，那么B下载之前，是不是先要下载A啊？，所以ensure的第一个参数[] 是它依赖的异步模块，但是这里需要注意的是，webpack会把参数里面的依赖异步模块和当前的需要分离出去的异步模块给一起打包成同一个js文件，这里可能会出现一个重复打包的问题， 假设A 和 B都是异步的， ensure A 中依赖B，ensure B中 依赖A，那么会生成两个文件，都包含A和B模块。 如果想加载A require.ensure([‘A.js’],function) 即可

说完了上面的原理。下面就实践一下

entry.js 依赖三个 js。

  • Abtn-work.js 是封装了 abtn按钮点击后，才执行的业务逻辑
  • Bbtn-work.js 是封装了 bbtn按钮点击后，才执行的业务逻辑
  • util.js 是封装了 entry.js需要利用的工具箱

针对上面的需求，优化方案

假设 Abtn-work.js Bbtn-work.js util.js都是非常大的文件 因为 Abtn-work.js Bbtn-work.js 都不是entry.js必须有的，即可能发生的操作，那么我们把 他们利用异步加载，当发生的时候再去加载就行了

util.js是entry.js立即马上依赖的工具箱。但是它又非常的大，所以将其配置打包成一个公共模块， 利用浏览器的并发加载，加快下载速度。ok,构思完成，开始实现

index.html

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>index</title>

  </head>

  <body>

    <div id="aBtn">Abtn</div>

    <div id="bBtn">Bbtn</div>

  </body>

</html>

定义了两个buttom

然后看看 entry.js



var util_sync = require('./util-sync.js')

alert(util_sync.data)

document.getElementById("aBtn").onclick = function() {

  require.ensure([], function() {

    var awork = require('./workA-async.js')

    alert(awork.data)

    //异步里面再导入同步模块--实际是使用同步中的模块

    var util1 = require('./util-sync.js')

  })

}

document.getElementById("bBtn").onclick = function() {

  require.ensure([], function() {

    var bwork = require('./workB-async.js')

    alert(bwork.data)

  })

}

可以看到，workA-async.js， workB-async.js 都是点击后才ensure进来的。什么时候加载完成呢？ 就是 require.ensure() 第二个函数参数，即回调函数，它表示当下载js完成后，发生的因为逻辑

webpack打包后，形成

其实， 1.1… 2.2…就是我们ensure导出来的js文件

我们看看代码是如何加载的执行的，点击打包插入js后的html

可以看到，并没有加载 ensure导出来的 1.1…js 2.2…js

点击 abtn,

发现浏览器下载并加载了 1.1…js

点击 bbtn

发现浏览器下载并加载了 2.2…js

ok 全部完成

webpack代码分离 ensure 看了还不懂，你打我（转）的更多相关文章

  1. Webpack 代码分离

    Webpack 代码分离 代码分离是 webpack 中最引人注目的特性之一. 你可以把你的代码分离到不同的 bundle 中,然后你就可以去按需加载这些文件. 总的来说, webpack 分离可以分 ...

  2. 详细！Mybatis-plus常用API全套教程，我就不信你看完还不懂！

    前言 官网:Mybatis-plus官方文档 简化 MyBatis ! 创建数据库 数据库名为mybatis_plus 创建表 创建user表 DROP TABLE IF EXISTS user; C ...

  3. 深度分析：面试阿里，字节跳动，美团90%被问到的List集合，看完还不懂算我输

    1 List集合 1.1 List概述 在Collection中,List集合是有序的,可对其中每个元素的插入位置进行精确地控制,可以通过索引来访问元素,遍历元素. 在List集合中,我们常用到Arr ...

  4. webpack代码分离CommonsChunkPlugin插件的使用（防止重复）

    1.webpack.config.js中添加: const path = require('path'); + const webpack = require('webpack'); const HT ...

  5. Java的BIO和NIO很难懂？用代码实践给你看，再不懂我转行！

    本文原题“从实践角度重新理解BIO和NIO”,原文由Object分享,为了更好的内容表现力,收录时有改动. 1.引言 这段时间自己在看一些Java中BIO和NIO之类的东西,也看了很多博客,发现各种关 ...

  6. webpack学习之—— Code Spliting(代码分离)

    代码分离特性能够把代码分离到不同的 bundle 中,然后可以按需加载或并行加载这些文件.代码分离可以用于获取更小的 bundle,以及控制资源加载优先级,如果使用合理,会极大影响加载时间. 有三种常 ...

  7. 看完此文还不懂NB-IoT，你就过来掐死我吧...【转】

    转自:https://www.cnblogs.com/pangguoming/p/9755916.html 看完此文还不懂NB-IoT,你就过来掐死我吧....... 1 1G-2G-3G-4G-5G ...

  8. 看完此文还不懂NB-IoT，你就过来掐死我吧...

    看完此文还不懂NB-IoT,你就过来掐死我吧....... 1 1G-2G-3G-4G-5G 不解释,看图,看看NB-IoT在哪里? 2 NB-IoT标准化历程 3GPP NB-IoT的标准化始于20 ...

  9. 使用Webpack的代码分离实现Vue懒加载（译文）

    当一个Vue的项目体积变得十分庞大的时候,使用Webpack的代码分离功能将Vue Components,routes或Vuex的代码进行分离并按需加载,会极大的提高App的首屏加载速度. 在Vue的 ...

随机推荐

  1. 一个HTTP Basic Authentication引发的异常

    这几天在做一个功能,其实很简单.就是调用几个外部的API,返回数据后进行组装然后成为新的接口.其中一个API是一个很奇葩的API,虽然是基于HTTP的,但既没有基于SOAP规范,也不是Restful风 ...

  2. 记React+.NetCore API实现动态列导出

    1.效果演示 2.用到的第三方类库 前端:React,Dva,Antd 后端:ASP.NET CORE,System.Linq.Dynamic.Core,EPPlus.Core 3.基本思路 第一:E ...

  3. 为PHP设置服务器(Apache/Nginx)环境变量

    为PHP设置服务器(Apache/Nginx)环境变量 设置环境变量常见的地方为区分开发环境/生产环境,或者定义一些数据库的帐号密码 设置Apache环境变量 指令 设置当前环境变量为DEV SetE ...

  4. 安装Mercurial进行版本管理

    mercurial是又一个去中心化的版本管理软件,类似git 先介绍如何安装mercurial yum -y install mercurial mercurial需要一个用户名来记录commit动作 ...

  5. 网络搬砖是件苦力活 CMS推荐GHOS博客程序

    搬砖不是技术活,而是苦力(bi)活,富有技术含量的苦力活说不定就是一门可以持续的生意. 我们不生产内容,我们只是互联网的内容搬运工,这是大部分不具备原创能力个人站长的心声.虽然原创能力不够,但是服务目 ...

  6. linux下ACE的编译与安装

    1.环境变量的设置vim /etc/profile 2.然后输入export ACE_ROOT=/root/ACE/ACE_wrappers export MPC_ROOT=$ACE_ROOT/MPC ...

  7. 让我们一起摇摆 Turnipbit体感遥控车

    相信大家对Microbit是非常熟悉的,而今天我们做的这个小玩具所用的核心板是Turnipbit,是基于 Microbit开发的一块适合儿童适用的板卡.基本使用原理是一样的,这里就不多介绍了,代码这方 ...

  8. 解决`向github提交代码是老要输入用户名密码`

    在命令行输入命令:git config --global credential.helper store☞ 这一步会在用户目录下的.gitconfig文件最后添加: [credential] help ...

  9. [SCOI2009][bzoj1025]游戏

    [SCOI2009][bzoj1025]游戏 标签: DP 置换 题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1025 题解 很套路的题目 ...

  10. CSS布局(一) 盒子模型

    一.盒子模型 标准盒子模型 从下图可以看到标准 w3c 盒子模型的范围包括 content.padding.border.margin,并且 content 部分不包含其他部分. 怪异盒子模型 从下图 ...