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的更多相关文章

  1. 机器学习实战（Machine Learning in Action）学习笔记————03.决策树原理、源码解析及测试

    机器学习实战(Machine Learning in Action)学习笔记————03.决策树原理.源码解析及测试 关键字:决策树.python.源码解析.测试作者:米仓山下时间:2018-10-2 ...

  2. SaToken学习笔记-03

    SaToken学习笔记-03 如果排版有问题,请点击:传送门 核心思想 所谓权限验证,验证的核心就是一个账号是否拥有一个权限码 有,就让你通过.没有?那么禁止访问! 再往底了说,就是每个账号都会拥有一 ...

  3. OpenCV 学习笔记03 边界框、最小矩形区域和最小闭圆的轮廓

    本节代码使用的opencv-python 4.0.1,numpy 1.15.4 + mkl 使用图片为 Mjolnir_Round_Car_Magnet_300x300.jpg 代码如下: impor ...

  4. OpenCV 学习笔记03 findContours函数

    opencv-python   4.0.1 1 函数释义 词义:发现轮廓! 从二进制图像中查找轮廓(Finds contours in a binary image):轮廓是形状分析和物体检测和识别的 ...

  5. C++ GUI Qt4学习笔记03

    C++ GUI Qt4学习笔记03   qtc++spreadsheet文档工具resources 本章介绍创建Spreadsheet应用程序的主窗口 1.子类化QMainWindow 通过子类化QM ...

  6. Redis：学习笔记-03

    Redis:学习笔记-03 该部分内容,参考了 bilibili 上讲解 Redis 中,观看数最多的课程 Redis最新超详细版教程通俗易懂,来自 UP主 遇见狂神说 7. Redis配置文件 启动 ...

  7. webpack学习笔记丁点积累

    webpack是什么? https://webpack.js.org/concepts/ https://code.tutsplus.com/tutorials/introduction-to-web ...

  8. 【原】webpack学习笔记

    之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...

  9. webpack学习笔记一：安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件

    一 .webpack学习环境准备: 1:window系统 2:安装node.js  官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...

随机推荐

  1. centos新增或删除用户

    新增用户snzigod:adduser snzigod 修改snzigod密码:passwd snzigod 删除用户snzigod:userdel snzigod 删除用户以及用户目录: userd ...

  2. selenium2 TestNG参数化

    想要参数化,首先要加入@Parameters({"参数1","参数2"}) package com.demo.test; import java.util.co ...

  3. 使用docker+tomcat部署jenkins

  4. Python 前端 js基础

    Javascript 概述 JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的 ...

  5. js的编码函数

    js对文字进行编码,涉及3个函数:escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent ...

  6. 九度oj 1006

    题目1006:ZOJ问题 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:20252 解决:3544 题目描述:                        对给定的字符串(只包含'z', ...

  7. Android内存使用——垃圾回收LOG，GC_CONCURRENT等的意义的说明

    在调试程序的时候,经常发现GC_CONCURRENT之类的打印.在网上搜了一下,感觉说法各式各样.最后,在Google的官方网站上发现了详细介绍. Every time a garbage colle ...

  8. HDU-2448 Mining Station on the Sea

    先根据不同的起点跑最短路,记录距离,从而建立二分图求最小匹配. 一开始我求最短路的时候我把港口直接加到图中,然后发现进了港口就不能出来了,所以连接港口的边就要从双向边改成单向边…………这也搞得我n和m ...

  9. codeforces 446C DZY Loves Fibonacci Numbers 数论+线段树成段更新

    DZY Loves Fibonacci Numbers Time Limit:4000MS     Memory Limit:262144KB     64bit IO Format:%I64d &a ...

  10. foj Problem 2275 Game

    Problem D Game Accept: 145    Submit: 844Time Limit: 1000 mSec    Memory Limit : 262144 KB Problem D ...