zoukankan      html  css  js  c++  java
  • 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也会将它们考虑在内。一起附到新的块中。

    本文完。

  • 相关阅读:
    用例图解析
    A B C D类网络地址
    B-树特征
    常用的中间代码
    UML图
    关于文件索引的一道习题
    数据流图的一些原则
    系统总线
    各种排序方法的时间复杂度、空间复杂度和稳定性统计表
    模拟银行自助终端系统
  • 原文地址:https://www.cnblogs.com/E-WALKER/p/4770063.html
Copyright © 2011-2022 走看看