webpack Code Splitting浅析

程序员文章站 2022-12-23 08:30:39

Code Splitting是webpack的一个重要特性，他允许你将代码打包生成多个bundle。对多页应用来说，它是必须的，因为必须要配置多个入口生成多个bundle；对于单页应用来说，如果只打包成一个bundle可能体积很大，导致无法利用浏览器并行下载的能力，且白屏时间长，也会导致下载很多可能... ......

code splitting是webpack的一个重要特性，他允许你将代码打包生成多个bundle。对多页应用来说，它是必须的，因为必须要配置多个入口生成多个bundle；对于单页应用来说，如果只打包成一个bundle可能体积很大，导致无法利用浏览器并行下载的能力，且白屏时间长，也会导致下载很多可能用不到的代码，每次上线用户都得下载全部代码，code splitting能够将代码分割，实现按需加载或并行加载多个bundle，可利用并发下载能力，减少首次访问白屏时间，可以只上线必要的文件。

三种code splitting方式

webpack提供了三种方式来切割代码，分别是:

多entry方式
公共提取
动态加载
本文将简单介绍多entry方式和公共提取方式，重点介绍的是动态加载。这几种方式可以根据需要组合起来使用。这里是官方文档，中文

多entry方式

这种方式就是指定多个打包入口，从入口开始将所有依赖打包进一个bundle，每个入口打包成一个bundle。此方式特别适合多页应用，我们可以每个页面指定一个入口，从而每个页面生成一个js。此方式的核心配置代码如下：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    page1: './src/page1.js',
    page2: './src/page2.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

上边的配置最终将生成两个bundle, 即page1.bundle.js和page2.bundle.js。

公共提取

这种方式将公共模块提取出来生成一个bundle，公共模块意味着有可能有很多地方使用，可能导致每个生成的bundle都包含公共模块打包生成的代码，造成浪费，将公共模块提取出来单独生成一个bundle可有效解决这个问题。这里贴一个官方文档给出的配置示例：

  const path = require('path');

  module.exports = {
    mode: 'development',
    entry: {
      index: './src/index.js',
      another: './src/another-module.js'
    },
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    // 关键
    optimization: {
      splitchunks: {
        chunks: 'all'
      }
    }
  };

这个示例中index.js和another-module.js中都import了loadsh，如果不配置optimization，将生成两个bundle, 两个bundle都包含loadsh的代码。配置optimization后，loadsh代码被单独提取到一个vendors~another~index.bundle.js。

动态加载

动态加载的含义就是讲代码打包成多个bundle, 需要用到哪个bundle时在加载他。这样做的好处是可以让用户下载需要用到的代码，避免无用代码下载。确定是操作体验可能变差，因为操作之后可能还有一个下载代码的过程。关于动态加载，后面详解。

实现一个简单的动态加载

动态加载就是要实现可以在代码里边去加载其他js，这个太简单了，新建script标签插入dom就可以了，如下：

function loadscript(url) {
    const script = document.createelement('script');
    script.src = url;
    document.head.appendchild(script);
}

只需要在需要加载某个js时调用即可，例如需要点击按钮时加载js可能就如下边这样。

btn.onclick = function() {
    console.log('1');
    loadscript('http://abc.com/a.js');
}

看上去非常简单，事实上webpack也是这么做的，但是他的处理更加通用和精细。

webpack动态加载

webpak打包出来的代码怎么执行

现有一个文件test2.js, 其中代码为

console.log('1')

此文件通过webpack打包后输出如下，删除了部分代码，完整版可自己尝试编译一个，也可查看(这个项目是基于react,express,webpack的用于web相关实验的项目，里边使用了code splitting方案来基于路由拆分代码，与code splitting相关的实验放在test-code-split分支)。

(function (modules) { // webpackbootstrap
  // the module cache
  var installedmodules = {};

  // the require function
  function __webpack_require__(moduleid) {

    // check if module is in cache
    if (installedmodules[moduleid]) {
      return installedmodules[moduleid].exports;
    }
    // create a new module (and put it into the cache)
    var module = installedmodules[moduleid] = {
      i: moduleid,
      l: false,
      exports: {}
    };

    // execute the module function
    modules[moduleid].call(module.exports, module, module.exports, __webpack_require__);

    // flag the module as loaded
    module.l = true;

    // return the exports of the module
    return module.exports;
  }
  return __webpack_require__(__webpack_require__.s = "./test2.js");
})
  ({

    "./test2.js":
      (function (module, exports, __webpack_require__) {

        "use strict";
        eval("\n\nconsole.log('1');\n\n//# sourceurl=webpack:///./test2.js?");

      })

  });

不知大家是不是跟大雄一样之前从未看过webpack编译产出的代码。其实看一下还是挺有趣的，原来我们的代码是放在eval中执行的。细看下这段代码，其实并不复杂。他是一个自执行函数，参数是一个对象，key是模块id（moduleid), value是函数，这个函数是里边是执行我们写的代码，在自执行函数体内是直接调用了一个__webpack_require__，参数就是入口moduleid, __webpack_require__方法里值执行给定模块id对应的函数，核心代码是modules[moduleid].call(module.exports, module, module.exports, __webpack_require__);。

上面是没有import命令的情况，对于有import命令的情况，产出和上边类似，只是自执行函数的参数有变化。例如：

// 入口文件test2.js
import './b.js'
console.log('1')
// b.js
console.log('b')

这段代码产出的自执行函数里边的参数如下：

// 自执行函数里边的参数
{

  "./b.js":
  (function (module, exports, __webpack_require__) {

    "use strict";
    eval("\n\nconsole.log('b');\n\n//# sourceurl=webpack:///./b.js?");
  }),

    "./test2.js":
  (function (module, exports, __webpack_require__) {

    "use strict";
    eval("\n\n__webpack_require__(/*! ./b.js */ \"./b.js\");\n\nconsole.log('1');\n\n//# sourceurl=webpack:///./test2.js?");
  })
}

./test2.js这个moduleid对应的函数的eval里边调用了__webpack_require__方法，为了看起来方便，将eval中的字符串拿出来，如下

__webpack_require__("./b.js");
console.log('1');

原来import命令在webpack中就是被转换成了__webpack_require__的调用。太奇妙了，但是话说为啥模块里边为啥要用eval来执行我们写的代码，大雄还是比较困惑的。

webpack动态code splitting方案

经过一番铺垫，终于到主题了，即webpack是如何实现动态加载的。前文大雄给了一个粗陋的动态加载的方法--loadscript, 说白了就是动态创建script标签。webpack中也是类似的，只是他做了一些细节处理。本文只介绍主流程，具体实现细节大家可以自己编译产出一份代码进行研究。

首先需要介绍在webpack中如何使用code splitting，非常简单，就像下边这样

import('lodash').then(_ => {
    // do something with lodash (a.k.a '_')...
  });

我们使用了一个import()方法, 这个import方法经过webpack打包后类似于前文提到的loadscript, 大家可以参看下边的代码：

__webpack_require__.e = function requireensure(chunkid) {
    var promises = [];


    // jsonp chunk loading for javascript

    var installedchunkdata = installedchunks[chunkid];
    if(installedchunkdata !== 0) { // 0 means "already installed".

        // a promise means "currently loading".
        if(installedchunkdata) {
            promises.push(installedchunkdata[2]);
        } else {
            // setup promise in chunk cache
            var promise = new promise(function(resolve, reject) {
                installedchunkdata = installedchunks[chunkid] = [resolve, reject];
            });
            promises.push(installedchunkdata[2] = promise);

            // start chunk loading
            var script = document.createelement('script');
            var onscriptcomplete;

            script.charset = 'utf-8';
            script.timeout = 120;
            if (__webpack_require__.nc) {
                script.setattribute("nonce", __webpack_require__.nc);
            }
            script.src = jsonpscriptsrc(chunkid);

            onscriptcomplete = function (event) {
                // avoid mem leaks in ie.
                script.onerror = script.onload = null;
                cleartimeout(timeout);
                var chunk = installedchunks[chunkid];
                if(chunk !== 0) {
                    if(chunk) {
                        var errortype = event && (event.type === 'load' ? 'missing' : event.type);
                        var realsrc = event && event.target && event.target.src;
                        var error = new error('loading chunk ' + chunkid + ' failed.\n(' + errortype + ': ' + realsrc + ')');
                        error.type = errortype;
                        error.request = realsrc;
                        chunk[1](error);
                    }
                    installedchunks[chunkid] = undefined;
                }
            };
            var timeout = settimeout(function(){
                onscriptcomplete({ type: 'timeout', target: script });
            }, 120000);
            script.onerror = script.onload = onscriptcomplete;
            document.head.appendchild(script);
        }
    }
    return promise.all(promises);
};

是不是非常熟悉，代码中也调用了document.createelement('script')来创建script标签，最后插入到head里。这段代码所做的就是动态加载js，加载失败时reject，加载成功resolve，这里并不能看到resolve的情况，resolve是在拆分出去的代码里调用一个全局函数实现的。拆分出的js如下：

(window["webpackjsonp"] = window["webpackjsonp"] || []).push([[0],{

/***/ "./b.js":
/*!**************!*\
  !*** ./b.js ***!
  \**************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
eval("\n\nconsole.log('b');\n\n//# sourceurl=webpack:///./b.js?");

/***/ })

}]);

在webpackjsonp方法里调用了对应的resolve，具体如下：

function webpackjsonpcallback(data) {
    var chunkids = data[0];
    var moremodules = data[1];


    // add "moremodules" to the modules object,
    // then flag all "chunkids" as loaded and fire callback
    var moduleid, chunkid, i = 0, resolves = [];
    for(;i < chunkids.length; i++) {
        chunkid = chunkids[i];
        if(installedchunks[chunkid]) {
            resolves.push(installedchunks[chunkid][0]);
        }
        installedchunks[chunkid] = 0;
    }
    for(moduleid in moremodules) {
        if(object.prototype.hasownproperty.call(moremodules, moduleid)) {
            modules[moduleid] = moremodules[moduleid];
        }
    }
    if(parentjsonpfunction) parentjsonpfunction(data);

    while(resolves.length) {
        resolves.shift()();
    }

};

这里的挂到全局的webpackjsonp是个数组，其push方法被改为webpackjsonpcallback方法的数组。所以每次在执行webpackjsonp时实际是在调用webpackjsonpcallback方法。

var jsonparray = window["webpackjsonp"] = window["webpackjsonp"] || [];
var oldjsonpfunction = jsonparray.push.bind(jsonparray);
jsonparray.push = webpackjsonpcallback;
jsonparray = jsonparray.slice();
for(var i = 0; i < jsonparray.length; i++) webpackjsonpcallback(jsonparray[i])

总结起来，webpack的动态加载流程大致如下：

webpack Code Splitting浅析

总结

本文对webpack打包出的代码的结构和执行过程作了简单分析，介绍了webpack中code splitting的几种方式，重点分析了一下动态加载的流程。分析的不一定完全正确，大家可以自己使用webpack打包产出代码进行研究，一定会有所收获。大雄看完至少大概知道了原来webpack编出来的代码是那样执行的、promise原来可以那么灵活的使用。

大雄在学习web开发或在项目中遇到问题时经常需要做一些实验, 在react出了什么新的特性时也常常通过做实验来了解一下. 最开始常常直接在公司的项目做实验, 直接拉个test分支就开搞, 这样做有如下缺点:

在公司的项目去做实验本身就是一件不好的事情
公司的项目里边只有前端的部分, 想要做接口有关的实验不方便. 例如想测试跨域的响应头access-control-allow-origin就得再启一个web服务器
实验过的东西零散, 过一段时间想查找却找不到了

基于以上原因, 特搭建了个基于react,webpack,express的用于web开发相关实验的项目.欢迎使用。

上一篇： Python爬虫入门教程 64-100 反爬教科书级别的网站-汽车之家，字体反爬之二

下一篇：男女笑段,梦都做不好

webpack Code Splitting浅析

三种code splitting方式

多entry方式

公共提取

动态加载

实现一个简单的动态加载

webpack动态加载

webpak打包出来的代码怎么执行

webpack动态code splitting方案

总结

详解webpack 打包文件体积过大解决方案（code splitting）

webpack4.x CommonJS模块化浅析

webpack Code Splitting浅析

Webpack编译结果浅析

.35-浅析webpack源码之babel-loader入口文件路径读取

Webpack相关原理浅析

.34-浅析webpack源码之事件流make(3)

在vs code 中用npm下载webpack出错

浅析Visual Studio Code断点调试Vue

.39-浅析webpack源码之parser.parse