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中re(正则表达式)模块使用方法
Python中常用的正则表达式处理函数: re.match re.match 尝试从字符串的开始匹配一个模式,如:下面的例子匹配第一个单词. import re text = "JGood ...
- PAT Basic 1080
1080 MOOC期终成绩 对于在中国大学MOOC(http://www.icourse163.org/ )学习“数据结构”课程的学生,想要获得一张合格证书,必须首先获得不少于200分的在线编程作业分 ...
- Android开发——AsyncTask的使用以及源码解析
．AsyncTask使用介绍 转载请标明出处:http://blog.csdn.net/seu_calvin/article/details/52172248 AsyncTask封装了Thread和 ...
- python - 函数的相互调用 及 变量的作用域
# -*- coding:utf-8 -*- '''@project: jiaxy@author: Jimmy@file: study_函数的相互调用及变量的作用域.py@ide: PyCharm C ...
- LoadRunner web_set_sockets_option（）--常用函数
web_set_sockets_option()--常用函数 设置sockets的选项. intweb_set_sockets_option(const char * option,const cha ...
- maven无法下载依赖jar包—几种仓库的区别
一.问题背景 最近这两天,感觉自己智商急剧退化,到了自己都捉急的地步,呃,有必要记录下来,以后智商被人甩几条街的时候,看看这篇文字,找找灵感也是好的! 这个项目呢,是用IDEA开发的,我一切都弄好了, ...
- Windows杂技
WINDOWS下 ,在某目录下按住shift加鼠标右键,可以直接有当前目录的dos窗口 win10不能用 解决办法是在当前文件夹的地址栏输入cmd然后回车 发现Powershell可以当作dos执行相 ...
- CodeForces839D[莫比乌斯反演] Codeforces Round #428 (Div. 2)
/*CodeForces839D[莫比乌斯反演]*/ #include <bits/stdc++.h> typedef long long LL; const LL MOD = 10000 ...
- TensorFlow开发流程 Windows下PyCharm开发+Linux服务器运行的解决方案
不知道是否有许多童鞋像我一样,刚开始接触TensorFlow或者其他的深度学习框架,一时间有一种手足无措的感觉. 怎么写代码?本机和服务器的关系是啥?需要在本机提前运行吗?怎么保证写的代码是对的??? ...
- 【Luogu】P2602数字计数（数位DP）
题目链接 数位DP好喵啊.自己yy两个小时的dfs:题解40行代码=10WA:10A. md而且还不是完全理解题解是什么意思. 所以放题解链接. #include<cstdio> #inc ...