webpack 学习笔记 03 Code Splitting
Introduction
对于较大的web 应用来说，将所有的代码文件压缩成一个文件是不合适的，在部分代码文件只有特殊情况下才被需要的情况下，这无疑是一种浪费。webpack 提供了讲代码文件分块的能力。
这里需要注意的是：webpack并不是把原来的一个大文件，简单的进行拆分，而是在这个基础上，提供了按需加载特定块的能力。这样使得应用在最初加载的代码量可以尽量的小。
Defining a split point
AMD 与 CommonJs标准个自定义了按需加载代码的方式，webpack会将它们识别成分割点。
require.ensure(CommonJs)
require.ensure(dependencies, callback)
ensure使得我们可在所有的dependencies项加载完毕后，再执行回调 。
require.ensure(["module-a", "module-b"], function(require) {
var a = require("module-a");
// ...
});
ensure仅仅是加载组件，并不会执行，若要执行，需要借助传进去的require参数。
require(AMD)
require(dependencies, callback)
与CommonJs式的require处理不同，所有的组件经异步获取到后，会立即执行(以从左至右的顺序)。
require(["module-a", "module-b"], function(a, b) {
// ...
});
DEMO
让我们创建如下三个文件:
main.js
firstScript.js
secondScript.js
在main.js中，写入如下代码：
require.ensure(["./firstScript.js"], function(require) {
});
require(["./secondScript.js"], function(require) {
});
为了测试，我们给firstScript和secondScript分别在全局对象上挂一个属性。
firstScript.js
window.a = 1;
secondScript.js
window.b = 1;
webpack的安装，配置方面前两篇博文已有说明，故不赘述。
webpack -w
index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="dist/bundle.js" charset="utf-8"></script>
</head>
<body>
</body>
</html>
访问webpack 在开发者工具中，我们可以看到代码被分为了3个块加载。
并且，在控制台，拿不到a的值(代码未执行)，可以拿到b的值。大家可以试试。
这样，在实际的代码中，我们可以到了特定的应用场合按需加载代码块。
Chunk content
在[]中的依赖项被组成了新的块。如果我们传入的回调函数中，有一些依赖项，并且这些依赖项是父环境没有的，webpack也会将它们考虑在内。一起附到新的块中。
本文完。
webpack 学习笔记 03 Code Splitting的更多相关文章
- 机器学习实战（Machine Learning in Action）学习笔记————03.决策树原理、源码解析及测试
机器学习实战(Machine Learning in Action)学习笔记————03.决策树原理.源码解析及测试 关键字:决策树.python.源码解析.测试作者:米仓山下时间:2018-10-2 ...
- SaToken学习笔记-03
SaToken学习笔记-03 如果排版有问题,请点击:传送门 核心思想 所谓权限验证,验证的核心就是一个账号是否拥有一个权限码 有,就让你通过.没有?那么禁止访问! 再往底了说,就是每个账号都会拥有一 ...
- OpenCV 学习笔记03 边界框、最小矩形区域和最小闭圆的轮廓
本节代码使用的opencv-python 4.0.1,numpy 1.15.4 + mkl 使用图片为 Mjolnir_Round_Car_Magnet_300x300.jpg 代码如下: impor ...
- OpenCV 学习笔记03 findContours函数
opencv-python 4.0.1 1 函数释义 词义:发现轮廓! 从二进制图像中查找轮廓(Finds contours in a binary image):轮廓是形状分析和物体检测和识别的 ...
- C++ GUI Qt4学习笔记03
C++ GUI Qt4学习笔记03 qtc++spreadsheet文档工具resources 本章介绍创建Spreadsheet应用程序的主窗口 1.子类化QMainWindow 通过子类化QM ...
- Redis：学习笔记-03
Redis:学习笔记-03 该部分内容,参考了 bilibili 上讲解 Redis 中,观看数最多的课程 Redis最新超详细版教程通俗易懂,来自 UP主 遇见狂神说 7. Redis配置文件 启动 ...
- webpack学习笔记丁点积累
webpack是什么? https://webpack.js.org/concepts/ https://code.tutsplus.com/tutorials/introduction-to-web ...
- 【原】webpack学习笔记
之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...
- webpack学习笔记一：安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件
一 .webpack学习环境准备: 1:window系统 2:安装node.js 官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...
随机推荐
- JAVA-基础(十） Swing
在看到applet和Swing的时候,我想起了winform,以及java beans包中各种所谓的组件的时候,一切都那么似曾相识. Swing是AWT的扩展,它提供了更强大和更灵活的组件集合. 除了 ...
- webdriver高级应用-js操作滚动条
1.滑动页面的滚动条到页面最下面 2.滑动页面的滚动条到页面的某个元素 3.滑动页面的滚动条向下移动某个数量的像素 #encoding=utf-8 from selenium import webdr ...
- 谈谈自己对REST、SOA、SOAP、RPC、ICE、ESB、BPM知识汇总及理解（转载）
相关参考文章: 谈谈自己对REST.SOA.SOAP.RPC.ICE.ESB.BPM知识汇总及理解 微服务SOA架构与RPC远程过程调用 SOA和微服务架构的区别 SOA: 维基百科解释:SOA:面向 ...
- 解决c#所有单线程单元(STA)线程都应使用泵式等待基元(如 CoWaitForMultipleHandles)，并在运行时间很长的操作过程中定期发送消息。 转载
最近做一个后来程序,启动了事务后有一段操作业务,当运行一段时间后,出现这个异常 CLR 无法从 COM 上下文 0x1b1c38 转换为 COM 上下文 0x1b1da8,这种状态已持续 60 秒.拥 ...
- 2017.8.1 Noip2018模拟测试赛（十七）
日期: 八月第一天 总分: 300分 难度: 提高 ~ 省选 得分: 100分(不应该啊!) 题目目录: T1:战争调度 T2:选数 T3:由乃的OJ 赛后心得: MMP,首先第一题花了大概 ...
- POJ3625 Building Roads
Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 10803 Accepted: 3062 Description Fa ...
- display的32种写法--摘抄
你知道『回』字有四种写法,但你知道display有32种写法吗?今天我们一一道来,让你一次性完全掌握display,从此再也不用对它发愁. 从大的分类来讲,display的32种写法可以分为6个大类, ...
- Android系统默认语言改为中文
第一种方法: 修改 build/tools/buildinfo.sh echo "ro.product.locale.language=zh"echo "ro.produ ...
- CI调试应用程序
该分析器将在页面下方显示基准测试结果,运行过的 SQL 语句,以及 $_POST 数据.这些信息有助于开发过程中的调试和优化. 在控制器中设置以下方法以激活该分析器: $this->output ...
- hdu 1181(Floyed)
变形课 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others)Total Submis ...