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 ...
随机推荐
- 制作iso文件
genisoimage -o fusionstor-yi-2017-03-08.iso(镜像名称) -v -cache-inodes -joliet-long -R -J -T -V ZS -c ...
- kettle-批量同步表数据
一.实验目标 利用kettle实现从mysql数据库中的dbf库批量同步表到dbm库(全量同步) 二.实验环境 dbf 库中表f1.f2.f3 .f1中1条数据,f2中100条数据,f3中2条数据 ...
- Hadoop4.2HDFS测试报告之六
测试结论 第一组数据作表格作图: 第二组数据作表格作图: 根据以上图分析得出以下结论: 1. 本地存储的读写速率基本保持23M左右,说明本地存储比较稳定. 2. HDFS存储两个数据节点的读写速率性能 ...
- #ifndef、#def、#endif说明
你所遇到的这几个宏是为了进行条件编译.一般情况下,源程序中所有的行都参加编译.但是有时希望对其中一部分内容只在满足一定条件才进行编译,也就是对一 部分内容指定编译的条件,这就是“条件编译”.有时,希望 ...
- springboot-vue-前后端数据交互
前端项目: pom文件: <?xml version="1.0" encoding="UTF-8"?> <project xmlns=&quo ...
- 关于ios 和 android 录音（语音）对聊文件格式问题
关于ios 和 android 录音(语音)对聊文件格式问题 在做语音对讲的时候,将会碰到录制语音格式的问题,这些需要跨平台我们可能需要使用双方平台都支持的格式,或者执行编码转换 解决方式如下: wa ...
- 软件工程师应该关注的web攻击手段
1.SQL注入------常见的安全性问题. 解决方案:前端页面需要校验用户的输入数据(限制用户输入的类型.范围.格式.长度),不能只靠后端去校验用户数据.一来可以提高后端处理的效率,二来可以提高后端 ...
- 移动端click时间、touch事件、tap事件详解
一.click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分 ...
- TOJ1017: Tour Guide
描述 You are working as a guide on a tour bus for retired people, and today you have taken your regu ...
- failed to allocate for range 0: no IP addresses available in range set: 172.20.xx.1-172.20.xx.254
今天遇到一个机器上的Pod 在创建以后一直处于Init 0/1的状态,进到这个节点查看其kubelet的状态,发现果然有问题 systemctl status kubelet .go:] Contai ...