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 ...
随机推荐
- python单例模式的几种实现方法
单例模式 单例模式(Singleton Pattern)是一种常用的软件设计模式,该模式的主要目的是确保某一个类只有一个实例存在.当你希望在整个系统中,某个类只能出现一个实例时,单例对象就能派上用场. ...
- 如何通过 Vue-Cli3 - Vuex 完成一个 TodoList
昨天大概粗糙的了解了一下Vue的概况之后,并没有从框架.语法的细节来进一步学习.那今天通过一个简单的实例来继续完善一下Vue这方面的空白,用一些看得见的效果摸的着的代码在不断完成小目标的过程中慢慢消化 ...
- PHP全栈开发
DAY01_PHP基础第一天 01.了解php 00:09:26 ★ 02.php的开发环境准备 00:13:47 ★ 03.人人都会编程 00:10:26 ...
- cobbler常用目录/命令(三)
常用目录: /var/www/cobbler/ks_mirror/ cobbler distro文件目录 /var/lib/tftpboot/pxelinux.cfg/d ...
- [git 学习篇] git文件版本回退再学习
需求; 准备把readme.txt回退到上一个版本,也就是“add distributed”的那个版本 首先,Git必须知道当前版本是哪个版本,在Git中,用HEAD表示当前版本,也就是最新的提交3 ...
- MFC拾遗
c++处理文件,对txt进行处理,学了那么久才发现我还不会这些操作,另外c++处理文本真是快得可怕啊 #include <iostream> #include <fstream> ...
- Graham扫描法 --求凸包
前言: 首先,什么是凸包? 假设平面上有p0~p12共13个点,过某些点作一个多边形,使这个多边形能把所有点都“包”起来.当这个多边形是凸多边形的时候,我们就叫它“凸包”.如下图: 然后,什么是凸包 ...
- HDU——1303Doubles（水题，试手二分查找）
Doubles Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Su ...
- 刷题总结——Middle number（ssoj 优先队列）
题目: 给定一个整数序列··有两个操作: add x,表示序列中加入x mid 表示询问这个序列的中位数 原始序列数量n<=100000,操作数m<=10000 题解: 这道题可以直接用权 ...
- java面试题之synchronized和lock有什么区别
synchronized和lock的区别: 类别 synchronized lock 存在层次 java的关键字,在jvm层面上 是一个类 锁的释放 1.以获取锁的线程执行完同步代码,释放锁 2.线程 ...