为什么 CommonJS 会使你的程序包变大

时间: 2020-02-18阅读: 49标签: 模块

在本文中,我们将研究什么是 CommonJS,以及为什么它会使你的 JavaScript 包变得那么大。


什么是 CommonJS?

CommonJS 是 2009 年的标准,为 JavaScript 模块建立了约定。它最初打算在 Web 浏览器之外使用,主要用于服务器端。

使用 CommonJS,你可以定义模块,从中导出功能,以及将其导入其他模块中。例如,下面的代码段定义了一个模块,该模块导出五个功能: add、subtract、multiply、divide 和 max:

// utils.js
const { maxBy } = require('lodash-es');
const fns = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
  multiply: (a, b) => a * b,
  divide: (a, b) => a / b,
  max: arr => maxBy(arr)
};

Object.keys(fns).forEach(fnName => module.exports[fnName] = fns[fnName]);

然后另一个模块就可以导入和使用这些函数:

// index.js
const { add } = require(‘./utils');
console.log(add(1, 2));

用 node 调用 index.js 将会在控制台中输出数字 3。

由于在 2010 年代初期,浏览器中缺乏标准化的模块系统,CommonJS 也成为了 JavaScript 客户端库流行的模块格式。


CommonJS 是怎样影响最终包大小的?

服务器端 JavaScript 程序的大小并不像浏览器中那样重要,这就是为什么 CommonJS 在设计时没有考虑到减小包大小的原因。同时,分析显示 JavaScript 包大小仍然是使浏览器应用变慢的最主要原因。

JavaScript 打包和压缩程序(例如 webpack 和 terser)通过执行不同的优化来减小应用程序的大小。他们在构建时分析你的程序,尝试尽可能多地删除那些没有用到的代码。

例如在上面的代码段中,最终的包应该只包含 add 函数,因为这是你从utils.js 中导入到在 index.js 中的的唯一符号。

让我们使用以下 webpack 配置来构建程序:

const path = require('path');
module.exports = {
  entry: 'index.js',
  output: {
    filename: 'out.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'production',
};

在这里,我们指定要使用生产模式优化,并把 index.js 作为进入点。在调用 webpack之后,如果我们查看输出 的大小,将会看到类似以下的内容:

$ cd dist && ls -lah
625K Apr 13 13:04 out.js

请注意,输出的包为 625 KB。如果看一下输出,我们将从 utils.js 中找到所有函数,再从 lodash 中找到很多模块。尽管我们没有在 index.js 中使用 lodash,但它是输出的一部分,这给我们的生产环境代码增加了很多额外的东西。

现在,让我们把模块格式改为 ECMAScript 2015 的格式,然后再试。这次 utils.js 看起来像这样:

export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export const multiply = (a, b) => a * b;
export const divide = (a, b) => a / b;

import { maxBy } from 'lodash-es';

export const max = arr => maxBy(arr);

然后用 ES2015 模块语法从 utils.js 导入 index.js:

import { add } from './utils';

console.log(add(1, 2));

使用相同的 webpack 配置,构建我们的程序并查看输出文件, 现在为 40 字节,并带有以下输出内容:

(()=>{"use strict";console.log(1+2)})();

注意,最终的包中不含我们没有用到的来自 utils.js 的任何函数,也没有来自 lodash 的痕迹!更进一步,terser(webpack 使用的 JavaScript 压缩程序)在 console.log 中内联了 add 功能。

你可能会问:为什么使用 CommonJS 会导致输出的包大了几乎 16,000 倍?当然这是一个例子而已,实际上大小差异可能没那么大,但是 CommonJS 很有可能大大的增加了你生产构建的大小。

一般 CommonJS 模块很难优化,因为它们比 ES 模块要动态得多。为确保打包和压缩程序能够成功优化应用程序,应该避免依赖 CommonJS 模块,并在整个程序中使用 ES2015 模块语法。

要注意,即使你在 index.js 中用了 ES2015 规则,但是如果你用的模块是 CommonJS 模块,则打包后的大小也会受到影响。


为什么 CommonJS 使你的程序包更大?

为了回答这个问题,我们将研究 webpack 中 ModuleConcatenationPlugin 的行为,然后讨论静态可分析性。该插件将所有模块的作用域合并为一个闭包,并使你的代码在浏览器中执行的更快。让我们看一个例子:

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
// index.js
import { add } from ‘./utils';
const subtract = (a, b) => a - b;

console.log(add(1, 2));

上面有一个 ES2015 模块,我们将其导入到 index.js 中。还定义了一个 subtract 功能。可以用与上面相同的 webpack 配置来构建项目,但是这次我们将禁用最小化:

const path = require('path');

module.exports = {
  entry: 'index.js',
  output: {
    filename: 'out.js',
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    minimize: false
  },
  mode: 'production',
};

让我们看一下产生的输出:

/******/ (() => { // webpackBootstrap
/******/     "use strict";

// CONCATENATED MODULE: ./utils.js**
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;

// CONCATENATED MODULE: ./index.js**
const index_subtract = (a, b) => a - b;**
console.log(add(1, 2));**

/******/ })();

在上面的输出中,所有函数都在同一个命名空间内。为了防止冲突,webpack 将 index.js 中的 subtract 函数重命名为 index_subtract。

如果压缩程序处理上面的源代码,它将会:

  • 删除未使用的 subtract 和 index_subtract 函数
  • 删除所有注释和多余的空格
  • 在 console.log 调用中内联 add 函数的主体

开发人员经常将这种把删除未使用的 imports 视为 tree-shaking。因为 webpack 能够(在构建时)静态地知道我们正在从 utils.js 中导入及导出了哪些符号,所以只能进行 tree-shaking 。

默认情况下,ES 模块会启用此行为,因为与 CommonJS 相比,它们可以静态分析

让我们看一看完全相同的例子,但是这次将 utils.js 改为使用 CommonJS 而不是 ES 模块:

// utils.js
const { maxBy } = require('lodash-es');

const fns = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
  multiply: (a, b) => a * b,
  divide: (a, b) => a / b,
  max: arr => maxBy(arr)
};

Object.keys(fns).forEach(fnName => module.exports[fnName] = fns[fnName]);

这个小更新将显著改变输出。由于代码太长,我只分享其中的一小部分:

...
(() => {

"use strict";
/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(288);
const subtract = (a, b) => a - b;
console.log((0,_utils__WEBPACK_IMPORTED_MODULE_0__/* .add */ .IH)(1, 2));

})();

请注意,最终的包中会含有一些 webpack “运行时”:一些注入的代码,负责从打包的模块中导入和导出函数。这次,我们没有把来自 utils.js 和 index.js 的所有符号放在同一个命名空间下,而是在运行时动态地使用了__webpack_require__ 的 add 函数。

这是必需的,因为我们用 CommonJS 可以从任意表达式中获取导出名称。例如下面的代码是绝对有效的构造:

module.exports[localStorage.getItem(Math.random())] = () => { … };

打包器无法在构建时知道导出的符号的名称,因为这需要用户浏览器的上下文中的仅在运行时可用的信息。

这样,压缩器无法从其依赖项中了解 index.js 的确切用途,因此它无法将其 tree-shaking 掉。我们还将观察到第三方模块的行为完全相同。 如果从 node_modules 导入 CommonJS 模块,你的构建工具链将会无法正确的优化它。

使用 CommonJS tree-shaking

由于 CommonJS 模块是动态定义的,因此分析它们要困难得多。例如与作为表达式的 CommonJS 相比,ES 模块中的导入位置始终是字符串。

在某些情况下,如果你使用的库遵循有关使用 CommonJS 的特定约定,则可以在构建时使用第三方 webpack plugin。尽管此插件增加了对 tree-shaking 的支持,但并未涵盖依赖项可以使用 CommonJS 的所有方式。这就意味着你无法获得与 ES 模块相同的保证。另外除了默认的 webpack 行为外,它还会在构建过程中增加额外的成本。


总结

为确保捆绑程序可以成功优化你的程序,请避免依赖 CommonJS 模块,并在整个程序中使用 ES2015 模块语法。


原文:https://web.dev/commonjs-larger-bundles/


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9056

与 JavaScript 模块相关的所有知识点

JavaScript 语言最初是为简单的表单操作而发明的,没有诸如模块或命名空间之类的内置功能。多年以来发明了大量的术语、模式、库、语法和工具来模块化 JavaScript。本文讨论了 JavaScript 中的所有主流模块系统、格式、库和工具

编写高质量JavaScript模块的4个最佳实践

使用ES2015模块,您可以将应用程序代码分成可重用的、封装的、专注于单一任务的模块。这很好,但是如何构造模块呢?一个模块应该有多少个函数和类?这篇文章介绍了有关如何更好地组织JavaScript模块的4种最佳实践。

nodejs核心模块有哪些?

核心模块是 Node.js的心脏,它由一些精简而高效的库组成,为 Node.js 提供了基本的API。下面本篇文章就来给大家介绍一部分最常用的nodejs核心模块,希望对大家有所帮助。

Nodejs数据加密与crypto模块

nodejs 中的 crypto 模块提供了各种各样加密算法的 API。这篇文章记录了常用加密算法的种类、特点、用途和代码实现。其中涉及算法较多,应用面较广,每类算法都有自己适用的场景。为了使行文流畅,列出了本文记录的几类常用算法

利用Proxy,如何优雅实现JSBridge模块化封装

最近公司在做一个项目,通过把我们自己的Webview植入第三方APP,然后我们的业务全部通过H5实现。至于为什么不直接用第三方APP WebView,主要是身处金融行业,需要做一些风控相关功能

Node.js中的fs模块的使用

JavaScript 的是没有操作文件的能力,但是 Node 是可以做到的,Node 提供了操作文件系统模块,是 Node 中使用非常重要和高频的模块,是绝对要掌握的一个模块系统。

JavaScript中的模块导入有一个缺点

在使用ES2015模块导入功能的时候你有什么觉得不爽的地方吗?反正我有!下面就来说说。假设你编写了一个简单的JavaScript模块:

JavaScript 模块化简析

关于模块化,最直接的表现就是我们写的 require 和 import 关键字,如果查阅相关资料,就一定会遇到 CommonJS 、CMD AMD 这些名词,以及 RequireJS、SeaJS 等陌生框架。比如 SeaJS 的官网 这样描述自己: “简单友好的模块定义规范

NodeJS模块os

nodejs 提供了os.platform()和os.type(),可以用来识别操作系统平台。推荐使用: os.platform();平均负载是指:单位时间内,系统处于可运行状态和不可中断状态的平均进程数。

NodeJS模块Buffer

Buffer 作为 nodejs 中重要的概念和功能,为开发者提供了操作二进制的能力。本文记录了几个问题,来加深对 Buffer 的理解和使用:

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广