webpack 学习笔记 03 Code Splitting

时间 2019-11-09

标签 webpack 学习笔记 code splitting 繁體版

原文原文链接

Introduction

对于较大的web 应用来讲，将全部的代码文件压缩成一个文件是不合适的，在部分代码文件只有特殊状况下才被须要的状况下，这无疑是一种浪费。webpack 提供了讲代码文件分块的能力。
这里须要注意的是：webpack并非把原来的一个大文件，简单的进行拆分，而是在这个基础上，提供了按需加载特定块的能力。这样使得应用在最初加载的代码量能够尽可能的小。javascript

Defining a split point

AMD 与 CommonJs标准个自定义了按需加载代码的方式，webpack会将它们识别成分割点。
require.ensure(CommonJs)html

require.ensure(dependencies, callback)

ensure使得咱们可在全部的dependencies项加载完毕后，再执行回调。java

require.ensure(["module-a", "module-b"], function(require) {
    var a = require("module-a");
    // ...
});

ensure仅仅是加载组件，并不会执行，若要执行，须要借助传进去的require参数。
require(AMD)webpack

require(dependencies, callback)

与CommonJs式的require处理不一样，全部的组件经异步获取到后，会当即执行(以从左至右的顺序)。web

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.jsui

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也会将它们考虑在内。一块儿附到新的块中。

本文完。