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 ...
随机推荐
- STM8 EEPROM心得
对于STM8来说,其内部的EEPROM确实是个不错的东西,而且STM8S103/105价格已经非常便宜了,当然也可以用STM8S003/005代替,而且价格更便宜,大概在,1.2/2.0元左右,比10 ...
- 光学字符识别OCR-6 光学识别
经过前面的文字定位和文本切割,我们已经能够找出图像中单个文字的区域,接下来可以建立相应的模型对单字进行识别. 模型选择 在模型方面,我们选择了深度学习中的卷积神经网络模型,通过多层卷积 ...
- Hive安装步骤
首先解压压缩包 然后进入bin 执行 ./hive 不过现在hive使用的是自己默认的数据库,不方便,可以通过配置使用MySQL数据库 创建hive-site.xml 粘贴一下内容 <confi ...
- react技术栈实践（1）
本文来自网易云社区 作者:汪洋 背景 最近开发一个全新AB测试平台,思考了下正好可以使用react技术开发. 实践前技术准备 首先遇到一个概念,redux.这货还真不好理解,大体的理解:Store包含 ...
- webdriver高级应用- 测试HTML5语言实现的视频播放器
能够获取HTML5语言实现的视频播放器,视频文件的地址.时长,控制播放器进行播放或暂停播放等操作. #encoding=utf-8 import unittest from selenium impo ...
- selenium2.53用45以下的火狐别太高
selenium2.53用45以下的火狐别太高在高的火狐需要selenium3
- 爬虫Scrapy框架-2爬取网站视频详情
爬取视频详情:http://www.id97.com/ 创建环境: movie.py 爬虫文件的设置: # -*- coding: utf-8 -*- import scrapy from movi ...
- [CODEVS1916] 负载平衡问题（最小费用最大流）
传送门 输入所有 a[i],求出平均值 sum,每个 a[i] -= sum 那么如果 a[i] > 0,从 s 向 i 连一条容量为 a[i] 费用为 0 的有向边 如果 a[i] < ...
- d3 添加元素相关api
选择元素 d3.select([dom]) d3.selectAll([dom]) 添加元素 d3.select("body").append("p") 插入内 ...
- 使用JWT实现Token认证
为什么使用JWT? 随着技术的发展,分布式web应用的普及,通过session管理用户登录状态成本越来越高,因此慢慢发展成为token的方式做登录身份校验,然后通过token去取redis中的缓存的用 ...