搜索

[25734] 2016-11-18_JavaScript小模块的开销

文档创建者：s7ckTeam
浏览次数：2
最后更新：2025-01-19
2016-11-18_JavaScript小模块的开销 - -   N o l a n 0 9 % 1 6 % 2 5 % 3 1 % 3 7 % 4 8 % 6 8 % 8 5 % J a v a S c r i p t   小 模 块 的 开 销 原 创   译 者 ： Y i n r   L i n u x 中 国   2 0 1 6 - 1 1 - 1 8 一 个 大 的   J a v a S c r i p t   包 比 一 百 个 小   J a v a S c r i p t   模 块 要 快 。 尽 管 这 是 事 实 ， 我 依 旧 希 望 我 们 社 区 能 最 终 发 现 我 们 所 处 的 困 境 — — — — 提 倡 小 模 块 的 原 则 对 开 发 者 有 利 ， 但 是 对 用 户 不 利 。 同 时 希 望 能 优 化 我 们 的 工 具 ， 使 得 我 们 可 以 对 两 方 面 都 有 利 。 本 文 导 航 - 网 页 性 能 - 包 与 模 块 - 模 块 膨 胀 - 测 试 环 节 ！ - 包 大 小 - 测 试 结 果 - 结 论 - 福 利 时 间 ！ 三 款 桌 面 浏 览 器 更 新 （ 2 0 1 6 / 1 0 / 3 0 ） ： 我 写 完 这 篇 文 章 之 后 ， 我 在 这 个 基 准 测 试 中 发 了 一 个 错 误 [ 1 ] ， 会 导 致   R o l l u p   比 它 预 期 的 看 起 来 要 好 一 些 。 不 过 ， 整 体 结 果 并 没 有 明 显 的 不 同 （ R o l l u p   仍 然 击 败 了   B r o w s e r i f y   和 W e b p a c k ， 虽 然 它 并 没 有 像   C l o s u r e   十 分 好 ） ， 所 以 我 只 是 更 新 了 图 表 。 该 基 准 测 试 包 括 了   R e q u i r e J S   和   R e q u i r e J S   A l m o n d   打 包 器 [ 2 ] ， 所 以 文 章 中 现 在 也 包 括 了 它 们 。 要 看 原 始 帖 子 ， 可 以 查 看 历 史 版 本 [ 3 ] 。 大 约 一 年 之 前 ， 我 在 将 一 个 大 型   J a v a S c r i p t   代 码 库 重 构 为 更 小 的 模 块 时 发 现 了   B r o w s e r i f y   和   W e b p a c k   中 一 个 令 人 沮 丧 的 事 实 ： “ 代 码 越 模 块 化 ， 代 码 体 积 就 越 大 。 : <   ” -   N o l a n   L a w s o n 过 了 一 段 时 间 ， S a m   S a c c o n e   发 布 了 一 些 关 于   T u m b l r [ 4 ]   和   I m g u r [ 5 ]   页 面 加 载 性 能 的 出 色 的 研 究 。 其 中 指 出 ： “ 超 过   4 0 0   m s   的 时 间 单 纯 的 花 费 在 了 遍 历   B r o w s e r i f y   树 上 。 ” -   S a m   S a c c o n e 在 本 篇 文 章 中 ， 我 将 演 示 小 模 块 可 能 会 根 据 你 选 择 的 b u n d l e r 打 包 器 和 m o d u l e   s y s t e m 模 块 系 统 而 出 现 高 得 惊 人 的 性 能 开 销 。 此 外 ， 我 还 将 解 释 为 什 么 这 种 方 法 不 但 影 响 你 自 己 代 码 的 模 块 ， 也 会 影 响 依 赖 项 中 的 模 块 ， 这 也 正 是 第 三 方 代 码 在 性 能 开 销 上 很 少 提 及 的 方 面 。 网 页 性 能 网 页 性 能 一 个 页 面 中 包 含 的   J a v a S c r i p t   脚 本 越 多 ， 页 面 加 载 也 将 越 慢 。 庞 大 的   J a v a S c r i p t   包 会 导 致 浏 览 器 花 费 更 多 的 时 间 去 下 载 、 解 析 和 执 行 ， 这 些 都 将 加 长 载 入 时 间 。 即 使 当 你 使 用 如   W e b p a c k   c o d e   s p l i t t i n g [ 6 ] 、 B r o w s e r i f y   f a c t o r   b u n d l e s [ 7 ]   等 工 具 将 代 码 分 解 为 多 个 包 ， 该 开 销 也 仅 仅 是 被 延 迟 到 页 面 生 命 周 期 的 晚 些 时 候 。 J a v a S c r i p t   迟 早 都 将 有 一 笔 开 销 。 此 外 ， 由 于   J a v a S c r i p t   是 一 门 动 态 语 言 ， 同 时 流 行 的   C o m m o n J S [ 8 ]   模 块 也 是 动 态 的 ， 所 以 这 就 使 得 在 最 终 分 发 给 用 户 的 代 码 中 剔 除 无 用 的 代 码 变 得 异 常 困 难 。 譬 如 你 可 能 只 使 用 到   j Q u e r y   中 的   $ . a j a x ， 但 是 通 过 载 入   j Q u e r y   包 ， 你 将 付 出 整 个 包 的 代 价 。 J a v a S c r i p t   社 区 对 这 个 问 题 提 出 的 解 决 办 法 是 提 倡   小 模 块 [ 9 ]   的 使 用 。 小 模 块 不 仅 有 许 多   美 好 且 实 用 的 好 处 [ 1 0 ]   如 易 于 维 护 ， 易 于 理 解 ， 易 于 集 成 等 ， 而 且 还 可 以 通 过 鼓 励 包 含 小 巧 的 功 能 而 不 是 庞 大 的 库 来 解 决 之 前 提 到 的   j Q u e r y   的 问 题 。 所 以 在 小 模 块 下 ， 你 将 不 需 要 这 样 ： 1 .   v a r   _   =   r e q u i r e ( ' l o d a s h ' ) 2 .   _ . u n i q ( [ 1 , 2 , 2 , 3 ] )
而 是 可 以 如 此 ： 包 与 模 块 包 与 模 块 需 要 强 调 的 是 这 里 我 提 到 的 “ 模 块 ” 并 不 同 于   n p m   中 的 “ 包 ” 的 概 念 。 当 你 从   n p m   安 装 一 个 包 时 ， 它 会 将 该 模 块 通 过 公 用   A P I   展 现 出 来 ， 但 是 在 这 之 下 其 实 是 一 个 许 多 模 块 的 聚 合 物 。 例 如 ， 我 们 来 看 一 个 包   i s - a r r a y [ 1 1 ] ， 它 没 有 别 的 依 赖 ， 并 且 只 包 含   一 个   J a v a S c r i p t   文 件 [ 1 2 ] ， 所 以 它 只 有 一 个 模 块 。 这 算 是 足 够 简 单 的 。 现 在 来 看 一 个 稍 微 复 杂 一 点 的 包 ， 如   o n c e [ 1 3 ] 。 它 有 一 个 依 赖 的 包   w r a p p y [ 1 4 ] 。 两 [ 1 5 ]   个 [ 1 6 ]   包 都 各 自 包 含 一 个 模 块 ， 所 以 总 模 块 数 为   2 。 至 此 ， 也 还 算 好 。 现 在 来 一 起 看 一 个 更 为 令 人 迷 惑 的 例 子 ： q s [ 1 7 ] 。 因 为 它 没 有 依 赖 的 包 ， 所 以 你 可 能 就 认 为 它 只 有 一 个 模 块 ， 然 而 事 实 上 ， 它 有 四 个 模 块 ！ 你 可 以 用 一 个 我 写 的 工 具   b r o w s e r i f y - c o u n t - m o d u l e s [ 1 8 ]   来 统 计 一 个   B r o w s e r i f y   包 的 总 模 块 数 ： 这 说 明 了 一 个 包 可 以 包 含 一 个 或 者 多 个 模 块 。 这 些 模 块 也 可 以 依 赖 于 其 他 的 包 ， 而 这 些 包 又 将 附 带 其 自 己 所 依 赖 的 包 与 模 块 。 由 此 可 以 确 定 的 事 就 是 任 何 一 个 包 将 包 含 至 少 一 个 模 块 。 模 块 膨 胀 模 块 膨 胀 一 个 典 型 的 网 页 应 用 中 会 包 含 多 少 个 模 块 呢 ？ 我 在 一 些 流 行 的 使 用   B r o w s e r i f y   的 网 站 上 运 行   b r o w s e r i f y - c o u n t - m o d u l e s o n   并 且 得 到 了 以 下 结 果 ： r e q u i r e b i n . c o m [ 1 9 ] :   9 1   个 模 块 k e y b a s e . i o [ 2 0 ] :   3 6 5   个 模 块 m . r e d d i t . c o m [ 2 1 ] :   1 0 5 0   个 模 块 A p p l e . c o m [ 2 2 ] :   1 0 6 0   个 模 块   ( 新 增 。   感 谢   M a x ！ [ 2 3 ] ) 顺 带 一 提 ， 我 写 过 的 最 大 的 开 源 站 点   P o k e d e x . o r g [ 2 4 ]   包 含 了   4   个 包 ， 共   3 1 1   个 模 块 。 让 我 们 先 暂 时 忽 略 这 些   J a v a S c r i p t   包 的 实 际 大 小 ， 我 认 为 去 探 索 一 下 一 定 数 量 的 模 块 本 身 开 销 会 是 一 件 有 意 思 的 事 。 虽 然   S a m   S a c c o n e   的 文 章   “ 2 0 1 6   年   E S 2 0 1 5   转 译 的 开 销 ” [ 2 5 ]   已 经 广 为 流 传 ， 但 是 我 认 为 他 的 结 论 还 未 到 达 足 够 深 度 ， 所 以 让 我 们 挖 掘 的 稍 微 再 深 一 点 吧 。 测 试 环 节 ！ 测 试 环 节 ！ 我 构 造 了 一 个 能 导 入   1 0 0 、 1 0 0 0   和   5 0 0 0   个 其 他 小 模 块 的 测 试 模 块 ， 其 中 每 个 小 模 块 仅 仅 导 出 一 个 数 字 。 而 父 模 块 则 将 这 些 数 字 求 和 并 记 录 结 果 ： 8 .   9 .   我 测 试 了 五 种 打 包 方 法 ： B r o w s e r i f y 、 带   b u n d l e - c o l l a p s e r [ 2 6 ]   插 件 的   B r o w s e r i f y 、 W e b p a c k 、 R o l l u p   和   C l o s u r e   C o m p i l e r 。 对 于   R o l l u p   和   C l o s u r e   C o m p i l e r   我 使 用 了   E S 6   模 块 ， 而 对 于   B r o w s e r i f y   和   W e b p a c k   则 用 的 是   C o m m o n J S ， 目 的 是 为 了 不 涉 及 其 各 自 缺 点 而 导 致 测 试 的 不 公 平 （ 由 于 它 们 可 能 需 要 做 一 些 转 译 工 作 ， 如   B a b e l   一 样 ， 而 这 些 工 作 将 会 增 加 其 自 身 的 运 行 时 间 ） 。 2 .   _ . u n i q ( [ 1 , 2 , 2 , 3 ] ) 1 .   v a r   u n i q   =   r e q u i r e ( ' l o d a s h . u n i q ' ) 2 .   u n i q ( [ 1 , 2 , 2 , 3 ] ) 1 .   $   n p m   i n s t a l l   q s 2 .   $   b r o w s e r i f y   n o d e _ m o d u l e s / q s   |   b r o w s e r i f y - c o u n t - m o d u l e s 3 .   4 1 .   / /   i n d e x . j s 2 .   v a r   t o t a l   =   0 3 .   t o t a l   + =   r e q u i r e ( ' . / m o d u l e _ 0 ' ) 4 .   t o t a l   + =   r e q u i r e ( ' . / m o d u l e _ 1 ' ) 5 .   t o t a l   + =   r e q u i r e ( ' . / m o d u l e _ 2 ' ) 6 .   / /   e t c . 7 .   c o n s o l e . l o g ( t o t a l ) 1 0 .   / /   m o d u l e _ 1 . j s 1 1 .   m o d u l e . e x p o r t s   =   1
为 了 更 好 地 模 拟 一 个 生 产 环 境 ， 我 对 所 有 的 包 采 用 带     和     参 数 的     ， 并 且 使 用   g z i p   压 缩 后 通 过   G i t H u b   P a g e s   用   H T T P S   协 议 进 行 传 输 。 对 于 每 个 包 ， 我 一 共 下 载 并 执 行   1 5   次 ， 然 后 取 其 平 均 值 ， 并 使 用     函 数 来 记 录 载 入 时 间 （ 未 使 用 缓 存 ） 与 执 行 时 间 。 包 大 小 包 大 小 在 我 们 查 看 测 试 结 果 之 前 ， 我 们 有 必 要 先 来 看 一 眼 我 们 要 测 试 的 包 文 件 。 以 下 是 每 个 包 最 小 处 理 后 但 并 未 使 用   g z i p   压 缩 时 的 体 积 大 小 （ 单 位 ： B y t e ） ：   1 0 0   个 模 块 1 0 0 0   个 模 块 5 0 0 0   个 模 块 b r o w s e r i f y 7 9 8 2 7 9 9 8 7 4 1 9 9 8 5 b r o w s e r i f y - c o l l a p s e d 5 7 8 6 5 7 9 9 1 3 0 9 9 8 2 w e b p a c k 3 9 5 4 3 9 0 5 5 2 0 3 0 5 2 r o l l u p 6 7 1 6 9 7 1 3 8 9 6 8 c l o s u r e 7 5 8 7 9 5 8 4 3 9 5 5     1 0 0   个 模 块 1 0 0 0   个 模 块 5 0 0 0   个 模 块 b r o w s e r i f y 1 6 4 9 1 3 8 0 0 6 4 5 1 3 b r o w s e r i f y - c o l l a p s e d 1 4 6 4 1 1 9 0 3 5 6 3 3 5 w e b p a c k 6 9 3 5 0 2 7 2 6 3 6 3 r o l l u p 3 0 0 2 1 4 5 1 1 5 1 0 c l o s u r e 3 0 2 2 1 4 0 1 1 7 8 9 B r o w s e r i f y   和   W e b p a c k   的 工 作 方 式 是 隔 离 各 个 模 块 到 各 自 的 函 数 空 间 ， 然 后 声 明 一 个 全 局 载 入 器 ， 并 在 每 次     函 数 调 用 时 定 位 到 正 确 的 模 块 处 。 下 面 是 我 们 的   B r o w s e r i f y   包 的 样 子 ： 而   R o l l u p   和   C l o s u r e   包 看 上 去 则 更 像 你 亲 手 写 的 一 个 大 模 块 。 这 是   R o l l u p   打 包 的 包 ： 如 果 你 清 楚 在   J a v a S c r i p t   中 使 用 嵌 套 函 数 与 在 关 联 数 组 查 找 一 个 值 的 固 有 开 销 ，   那 么 你 将 很 容 易 理 解 出 现 以 下 测 试 的 结 果 的 原 因 。 测 试 结 果 测 试 结 果 我 选 择 在 搭 载   A n d r o i d   5 . 1 . 1   与   C h r o m e   5 2   的   N e x u s   5 （ 代 表 中 低 端 设 备 ） 和 运 行   i O S   9   的 第   6   代   i P o d   T o u c h （ 代 表 高 端 设 备 ） 上 进 行 测 试 。 这 是   N e x u s   5   下 的 测 试 结 果 （ 查 看 表 格 [ 2 7 ] ） ： - m a n g l e - c o m p r e s s U g l i f y p e r f o r m a n c e . n o w ( ) r e q u i r e ( ) 1 .   ( f u n c t i o n   e ( t , n , r ) { f u n c t i o n   s ( o , u ) { i f ( ! n [ o ] ) { i f ( ! t [ o ] ) { v a r   a = t y p e o f   r e q u i r e = = " f u n c t i o n " & & r e q u i r e ; i f ( ! u & & a ) r e t u r n   a ( o , ! 0 ) ; i f ( i ) r e t u r n   i ( o , ! 0 ) ; v a r   f = n e w   E r r o r ( " C a n n o t   f i n d   m o d u l e   ' " 1 .   ( f u n c t i o n   ( )   { 2 .                   ' u s e   s t r i c t ' ; 3 .                   v a r   t o t a l   =   0 4 .                   t o t a l   + =   0 5 .                   t o t a l   + =   1 6 .                   t o t a l   + =   2 7 .   / /   e t c .
N e x u s   5   结 果 这 是   i P o d   T o u c h   下 的 测 试 结 果 （ 查 看 表 格 [ 2 8 ] ） ： i P o d   T o u c h   结 果 在   1 0 0   个 模 块 时 ， 各 包 的 差 异 是 微 不 足 道 的 ， 但 是 一 旦 模 块 数 量 达 到   1 0 0 0   个 甚 至   5 0 0 0   个 时 ， 差 异 将 会 变 得 非 常 巨 大 。 i P o d   T o u c h   在 不 同 包 上 的 差 异 并 不 明 显 ， 而 对 于 具 有 一 定 年 代 的   N e x u s   5   来 说 ， B r o w s e r i f y   和   W e b p a c k   明 显 耗 时 更 多 。 与 此 同 时 ， 我 发 现 有 意 思 的 是   R o l l u p   和   C l o s u r e   的 运 行 开 销 对 于   i P o d   而 言 几 乎 可 以 忽 略 ， 并 且 与 模 块 的 数 量 关 系 也 不 大 。 而 对 于   N e x u s   5   来 说 ， 运 行 的 开 销 并 非 完 全 可 以 忽 略 ， 但   R o l l u p / C l o s u r e   仍 比 B r o w s e r i f y / W e b p a c k   低 很 多 。 后 者 若 未 在 几 百 毫 秒 内 完 成 加 载 则 将 会 占 用 主 线 程 的 好 几 帧 的 时 间 ， 这 就 意 味 着 用 户 界 面 将 冻 结 并 且 等 待 直 到 模 块 载 入 完 成 。
值 得 注 意 的 是 前 面 这 些 测 试 都 是 在 千 兆 网 速 下 进 行 的 ， 所 以 在 网 络 情 况 来 看 ， 这 只 是 一 个 最 理 想 的 状 况 。 借 助   C h r o m e   开 发 者 工 具 ， 我 们 可 以 认 为 地 将   N e x u s   5   的 网 速 限 制 到   3 G   水 平 ， 然 后 来 看 一 眼 这 对 测 试 产 生 的 影 响 （ 查 看 表 格 [ 2 9 ] ） ： N e x u s   5   3 G   结 果 一 旦 我 们 将 网 速 考 虑 进 来 ， B r o w s e r i f y / W e b p a c k   和   R o l l u p / C l o s u r e   的 差 异 将 变 得 更 为 显 著 。 在   1 0 0 0   个 模 块 规 模 （ 接 近 于   R e d d i t   1 0 5 0   个 模 块 的 规 模 ） 时 ， B r o w s e r i f y   花 费 的 时 间 比   R o l l u p   长 大 约   4 0 0   毫 秒 。 然 而   4 0 0   毫 秒 已 经 不 是 一 个 小 数 目 了 ， 正 如   G o o g l e   和   B i n g   指 出 的 ， 亚 秒 级 的 延 迟 都 会   对 用 户 的 参 与 产 生 明 显 的 影 响 [ 3 0 ]   。 还 有 一 件 事 需 要 指 出 ， 那 就 是 这 个 测 试 并 非 测 量   1 0 0   个 、 1 0 0 0   个 或 者   5 0 0 0   个 模 块 的 每 个 模 块 的 精 确 运 行 时 间 。 因 为 这 还 与 你 对     函 数 的 使 用 有 关 。 在 这 些 包 中 ， 我 采 用 的 是 对 每 个 模 块 调 用 一 次     函 数 。 但 如 果 你 每 个 模 块 调 用 了 多 次     函 数 （ 这 在 代 码 库 中 非 常 常 见 ） 或 者 你 多 次 动 态 调 用     函 数 （ 例 如 在 子 函 数 中 调 用     函 数 ） ， 那 么 你 将 发 现 明 显 的 性 能 退 化 。 R e d d i t   的 移 动 站 点 就 是 一 个 很 好 的 例 子 。 虽 然 该 站 点 有   1 0 5 0   个 模 块 ， 但 是 我 测 量 了 它 们 使 用   B r o w s e r i f y   的 实 际 执 行 时 间 后 发 现 比 “ 1 0 0 0   个 模 块 ” 的 测 试 结 果 差 好 多 。 当 使 用 那 台 运 行   C h r o m e   的   N e x u s   5 时 ， 我 测 出   R e d d i t   的   B r o w s e r i f y   r e q u i r e ( )   函 数 耗 时   2 . 1 4   秒 。 而 那 个 “ 1 0 0 0   个 模 块 ” 脚 本 中 的 等 效 函 数 只 需 要   1 9 7   毫 秒 （ 在 搭 载   i 7   处 理 器 的   S u r f a c e   B o o k   上 的 桌 面 版   C h r o m e ， 我 测 出 的 结 果 分 别 为   5 5 9   毫 秒 与   3 7   毫 秒 ， 虽 然 给 出 桌 面 平 台 的 结 果 有 些 令 人 惊 讶 ） 。 这 结 果 提 示 我 们 有 必 要 对 每 个 模 块 使 用 多 个     函 数 的 情 况 再 进 行 一 次 测 试 。 不 过 ， 我 并 不 认 为 这 对   B r o w s e r i f y   和   W e b p a c k   会 是 一 个 公 平 的 测 试 ， 因 为   R o l l u p   和   C l o s u r e   都 会 将 重 复 的   E S 6   库 导 入 处 理 为 一 个 的 顶 级 变 量 声 明 ， 同 时 也 阻 止 了 顶 层 空 间 以 外 的 其 他 区 域 的 导 入 。 所 以 根 本 上 来 说 ， R o l l u p   和   C l o s u r e   中 一 个 导 入 和 多 个 导 入 的 开 销 是 相 同 的 ， 而 对 于   B r o w s e r i f y   和   W e b p a c k ， 运 行 开 销 随     函 数 的 数 量 线 性 增 长 。 为 了 我 们 这 个 分 析 的 目 的 ， 我 认 为 最 好 假 设 模 块 的 数 量 是 性 能 的 短 板 。 而 事 实 上 ， “ 5 0 0 0   个 模 块 ” 也 是 一 个 比 “ 5 0 0 0   个     函 数 调 用 ” 更 好 的 度 量 标 准 。 结 论 结 论 首 先 ， b u n d l e - c o l l a p s e r   对   B r o w s e r i f y   来 说 是 一 个 非 常 有 用 的 插 件 。 如 果 你 在 产 品 中 还 没 使 用 它 ， 那 么 你 的 包 将 相 对 来 说 会 略 大 且 运 行 略 慢 （ 虽 然 我 得 承 认 这 之 间 的 差 异 非 常 小 ） 。 另 一 方 面 ， 你 还 可 以 转 换 到   W e b p a c k   以 获 得 更 快 的 包 而 不 需 要 额 外 的 配 置 （ 其 实 我 非 常 不 愿 意 这 么 说 ， 因 为 我 是 个 顽 固 的   B r o w s e r i f y   粉 ） 。 不 管 怎 样 ， 这 些 结 果 都 明 确 地 指 出   W e b p a c k   和   B r o w s e r i f y   相 较   R o l l u p   和   C l o s u r e   C o m p i l e r   而 言 表 现 都 稍 差 ， 并 且 性 能 差 异 随 着 模 块 大 小 的 增 大 而 增 大 。 不 幸 的 是 ， 我 并 不 确 定   W e b p a c k   2 [ 3 1 ]   是 否 能 解 决 这 些 问 题 ， 因 为 尽 管 他 们 将   从   R o l l u p   中 借 鉴 一 些 想 法 [ 3 2 ] ， 但 是 看 起 来 他 们 的 关 注 点 更 多 在 于   t r e e - s h a k i n g   方 面 [ 3 3 ]   而 不 是 在 于   s c o p e - h o i s t i n g   方 面 。 （ 更 新 ： 一 个 更 好 的 名 字 称 为 i n l i n i n g 内 联 ， 并 且   W e b p a c k r e q u i r e ( ) r e q u i r e ( ) r e q u i r e ( ) r e q u i r e ( ) r e q u i r e ( ) r e q u i r e ( ) r e q u i r e ( ) r e q u i r e ( )
团 队   正 在 做 这 方 面 的 工 作 [ 3 4 ] 。 ） 给 出 这 些 结 果 之 后 ， 我 对   C l o s u r e   C o m p i l e r   和   R o l l u p   在   J a v a S c r i p t   社 区 并 没 有 得 到 过 多 关 注 而 感 到 惊 讶 。 我 猜 测 或 许 是 因 为 （ 前 者 ） 需 要 依 赖   J a v a ， 而 （ 后 者 ） 仍 然 相 当 不 成 熟 并 且 未 能 做 到 开 箱 即 用 （ 详 见   C a l v i n ’ s   M e t c a l f   的 评 论 [ 3 5 ]   中 作 的 不 错 的 总 结 ） 。 即 使 没 有 足 够 数 量 的   J a v a S c r i p t   开 发 者 加 入 到   R o l l u p   或   C l o s u r e   的 队 伍 中 ， 我 认 为   n p m   包 作 者 们 也 已 准 备 好 了 去 帮 助 解 决 这 些 问 题 。 如 果 你 使 用   n p m   安 装   l o d a s h ， 你 将 会 发 其 现 主 要 的 导 入 是 一 个 巨 大 的 J a v a S c r i p t   模 块 ， 而 不 是 你 期 望 的   L o d a s h   的 h y p e r - m o d u l a r 超 模 块 特 性 （ ，   等 等 ） 。 对 于   P o u c h D B ， 我 们 做 了 一 个 类 似 的 声 明 以   使 用   R o l l u p   作 为 预 发 布 步 骤 [ 3 6 ] ， 这 将 产 生 对 于 用 户 而 言 尽 可 能 小 的 包 。 同 时 ， 我 创 建 了   r o l l u p i f y [ 3 7 ]   来 尝 试 将 这 过 程 变 得 更 为 简 单 一 些 ， 只 需 拖 动 到 已 存 在 的   B r o w s e r i f y   工 程 中 即 可 。 其 基 本 思 想 是 在 你 自 己 的 项 目 中 使 用 i m p o r t 导 入 和 e x p o r t 导 出 （ 可 以 使 用   c j s - t o - e s 6 [ 3 8 ]   来 帮 助 迁 移 ） ， 然 后 使 用     函 数 来 载 入 第 三 方 包 。 这 样 一 来 ， 你 依 旧 可 以 在 你 自 己 的 代 码 库 中 享 受 所 有 模 块 化 的 优 点 ， 同 时 能 导 出 一 个 适 当 大 小 的 大 模 块 来 发 布 给 你 的 用 户 。 不 幸 的 是 ， 你 依 旧 得 为 第 三 方 库 付 出 一 些 代 价 ， 但 是 我 发 现 这 是 对 于 当 前   n p m   生 态 系 统 的 一 个 很 好 的 折 中 方 案 。 所 以 结 论 如 下 ： 一 个 大 的   J a v a S c r i p t   包 比 一 百 个 小   J a v a S c r i p t   模 块 要 快 。 尽 管 这 是 事 实 ， 我 依 旧 希 望 我 们 社 区 能 最 终 发 现 我 们 所 处 的 困 境 — — — — 提 倡 小 模 块 的 原 则 对 开 发 者 有 利 ， 但 是 对 用 户 不 利 。 同 时 希 望 能 优 化 我 们 的 工 具 ， 使 得 我 们 可 以 对 两 方 面 都 有 利 。 福 利 时 间 ！ 三 款 桌 面 浏 览 器 福 利 时 间 ！ 三 款 桌 面 浏 览 器 通 常 来 说 我 喜 欢 在 移 动 设 备 上 运 行 性 能 测 试 ， 因 为 在 这 里 我 们 能 更 清 楚 的 看 到 差 异 。 但 是 出 于 好 奇 ， 我 也 分 别 在 一 台 搭 载   i 7   的   S u r f a c e   B o o k   上 的   C h r o m e   5 2 、 E d g e   1 4   和   F i r e f o x   4 8   上 运 行 了 测 试 。 这 分 别 是 它 们 的 测 试 结 果 ： C h r o m e   5 2   ( 查 看 表 格 [ 3 9 ] ) C h r o m e   结 果 E d g e   1 4   ( 查 看 表 格 [ 4 0 ] ) r e q u i r e ( ' l o d a s h / u n i q ' ) r e q u i r e ( ' l o d a s h . u n i q ' ) r e q u i r e ( )
E d g e   结 果 F i r e f o x   4 8   ( 查 看 表 格 [ 4 1 ] ) F i r e f o x   结 果 我 在 这 些 结 果 中 发 现 的 有 趣 的 地 方 如 下 ： 1 .   b u n d l e - c o l l a p s e r   总 是 与   s l a m - d u n k   完 全 不 同 。 2 .   R o l l u p   和   C l o s u r e   的 下 载 时 间 与 运 行 时 间 之 比 总 是 非 常 高 ， 它 们 的 运 行 时 间 基 本 上 微 不 足 道 。 C h a k r a C o r e   和   S p i d e r M o n k e y   运 行 最 快 ， V 8   紧 随 其 后 。 如 果 你 的   J a v a S c r i p t   非 常 大 并 且 是 延 迟 加 载 ， 那 么 第 二 点 将 非 常 重 要 。 因 为 如 果 你 可 以 接 受 等 待 网 络 下 载 的 时 间 ， 那 么 使 用   R o l l u p   和   C l o s u r e   将 会 有 避 免 界 面 线 程 冻 结 的 优 点 。 也 就 是 说 ， 它 们 将 比
B r o w s e r i f y   和   W e b p a c k   更 少 出 现 界 面 阻 塞 。 更 新 ： 在 这 篇 文 章 的 回 应 中 ， J D D   已 经   给   W e b p a c k   提 交 了 一 个   i s s u e [ 4 2 ] 。 还 有   一 个 是 给   B r o w s e r i f y   的 [ 4 3 ] 。 更 新   2 ： R y a n   F i t z e r [ 4 4 ]   慷 慨 地 增 加 了   R e q u i r e J S   和 包 含   A l m o n d [ 4 5 ]   的   R e q u i r e J S   的 测 试 结 果 ， 两 者 都 是 使 用   A M D   而 不 是   C o m m o n J S   或 者   E S 6 。 测 试 结 果 表 明   R e q u i r e J S   具 有   最 大 的 包 大 小 [ 4 6 ]   但 是 令 人 惊 讶 的 是 它 的 运 行 开 销   与   R o l l u p   和   C l o s u r e   非 常 接 近 [ 4 7 ] 。 这 是 在 运 行   C h r o m e   5 2   的   N e x u s   5   下 限 制 网 速 为   3 G   的 测 试 结 果 ： N e x u s   5   ( 3 G )   R e q u i r e J S   结 果 更 新   3 :   我 写 了 一 个   o p t i m i z e - j s [ 4 8 ]   ， 它 会 减 少 一 些 函 数 内 的 函 数 的 解 析 成 本 。 v i a :   h t t p s : / / n o l a n l a w s o n . c o m / 2 0 1 6 / 0 8 / 1 5 / t h e - c o s t - o f - s m a l l - m o d u l e s / 作 者 ： N o l a n [ 4 9 ]   译 者 ： Y i n r   校 对 ： w x y 本 文 由   L C T T [ 5 0 ]   原 创 编 译 ， L i n u x 中 国   荣 誉 推 出 推 荐 文 章 滑 动 查 看 更 多 输 入 文 章   I D   或 长 按 二 维 码 直 达 [ 1 ] :   h t t p s : / / g i t h u b . c o m / n o l a n l a w s o n / c o s t - o f - s m a l l - m o d u l e s / p u l l / 8 [ 2 ] :   h t t p s : / / g i t h u b . c o m / n o l a n l a w s o n / c o s t - o f - s m a l l - m o d u l e s / p u l l / 5 [ 3 ] :   h t t p s : / / w e b . a r c h i v e . o r g / w e b / 2 0 1 6 0 8 2 2 1 8 1 4 2 1 / h t t p s : / / n o l a n l a w s o n . c o m / 2 0 1 6 / 0 8 / 1 5 / t h e - c o s t - o f - s m a l l - m o d u l e s / [ 4 ] :   h t t p s : / / d o c s . g o o g l e . c o m / d o c u m e n t / d / 1 E 2 w 0 U Q 4 R h I d 5 c M Y s D c d c N w s g L 0 g P _ S 6 S D v 2 7 y i 1 m C E Y / e d i t [ 5 ] :   h t t p s : / / g i t h u b . c o m / p e r f s / a u d i t s / i s s u e s / 1 [ 6 ] :   h t t p s : / / w e b p a c k . g i t h u b . i o / d o c s / c o d e - s p l i t t i n g . h t m l [ 7 ] :   h t t p s : / / g i t h u b . c o m / s u b s t a c k / f a c t o r - b u n d l e [ 8 ] :   h t t p : / / w w w . c o m m o n j s . o r g / [ 9 ] :   h t t p : / / s u b s t a c k . n e t / h o w _ I _ w r i t e _ m o d u l e s [ 1 0 ] :   h t t p : / / d a i l y j s . c o m / 2 0 1 5 / 0 7 / 0 2 / s m a l l - m o d u l e s - c o m p l e x i t y - o v e r - s i z e /
[ 1 1 ] :   h t t p s : / / w w w . n p m j s . c o m / p a c k a g e / i s - a r r a y [ 1 2 ] :   h t t p s : / / g i t h u b . c o m / r e t r o f o x / i s - a r r a y / b l o b / d 7 9 f 1 c 9 0 c 8 2 4 4 1 6 b 6 0 5 1 7 c 0 4 f 0 5 6 8 b 5 c d 3 f 8 2 7 1 d / i n d e x . j s # L 6 - L 3 3 [ 1 3 ] :   h t t p s : / / w w w . n p m j s . c o m / p a c k a g e / o n c e [ 1 4 ] :   h t t p s : / / w w w . n p m j s . c o m / p a c k a g e / w r a p p y [ 1 5 ] :   h t t p s : / / g i t h u b . c o m / i s a a c s / o n c e / b l o b / 2 a d 5 5 8 6 5 7 e 1 7 f a f d 2 4 8 0 3 2 1 7 b a 8 5 4 7 6 2 8 4 2 e 4 1 7 8 / o n c e . j s # L 1 - L 2 1 [ 1 6 ] :   h t t p s : / / g i t h u b . c o m / n p m / w r a p p y / b l o b / 7 1 d 9 1 b 6 d c 5 b d e a c 3 7 e 2 1 8 c 2 c f 0 3 f 9 a b 5 5 b 6 0 d 2 1 4 / w r a p p y . j s # L 6 - L 3 3 [ 1 7 ] :   h t t p s : / / w w w . n p m j s . c o m / p a c k a g e / q s [ 1 8 ] :   h t t p s : / / w w w . n p m j s . c o m / p a c k a g e / b r o w s e r i f y - c o u n t - m o d u l e s [ 1 9 ] :   h t t p : / / r e q u i r e b i n . c o m / [ 2 0 ] :   h t t p s : / / k e y b a s e . i o / [ 2 1 ] :   h t t p : / / m . r e d d i t . c o m / [ 2 2 ] :   h t t p : / / i m a g e s . a p p l e . c o m / i p a d - a i r - 2 / [ 2 3 ] :   h t t p s : / / t w i t t e r . c o m / d e n o r m a l i z e / s t a t u s / 7 6 5 3 0 0 1 9 4 0 7 8 4 3 7 3 7 6 [ 2 4 ] :   h t t p s : / / p o k e d e x . o r g / [ 2 5 ] :   h t t p s : / / g i t h u b . c o m / s a m c c o n e / T h e - c o s t - o f - t r a n s p i l i n g - e s 2 0 1 5 - i n - 2 0 1 6 # t h e - c o s t - o f - t r a n s p i l i n g - e s 2 0 1 5 - i n - 2 0 1 6 [ 2 6 ] :   h t t p s : / / w w w . n p m j s . c o m / p a c k a g e / b u n d l e - c o l l a p s e r [ 2 7 ] :   h t t p s : / / g i s t . g i t h u b . c o m / n o l a n l a w s o n / e 8 4 a d 0 6 0 a 2 0 f 0 c b 7 a 7 c 3 2 3 0 8 b 6 b 4 6 a b e [ 2 8 ] :   h t t p s : / / g i s t . g i t h u b . c o m / n o l a n l a w s o n / 4 5 e d 2 c 7 f a 5 3 d a 0 3 5 d f c 1 e 1 5 3 7 6 3 b 9 f 9 3 [ 2 9 ] :   h t t p s : / / g i s t . g i t h u b . c o m / n o l a n l a w s o n / 6 2 6 9 d 3 0 4 c 9 7 0 1 7 4 c 2 1 1 6 4 2 8 8 8 0 8 3 9 2 e a [ 3 0 ] :   h t t p : / / r a d a r . o r e i l l y . c o m / 2 0 0 9 / 0 6 / b i n g - a n d - g o o g l e - a g r e e - s l o w - p a g . h t m l [ 3 1 ] :   h t t p s : / / g i s t . g i t h u b . c o m / s o k r a / 2 7 b 2 4 8 8 1 2 1 0 b 5 6 b b a f f 7 [ 3 2 ] :   h t t p : / / w w w . 2 a l i t y . c o m / 2 0 1 5 / 1 2 / w e b p a c k - t r e e - s h a k i n g . h t m l [ 3 3 ] :   h t t p : / / w w w . 2 a l i t y . c o m / 2 0 1 5 / 1 2 / b u n d l i n g - m o d u l e s - f u t u r e . h t m l [ 3 4 ] :   h t t p s : / / g i t h u b . c o m / w e b p a c k / w e b p a c k / i s s u e s / 2 8 7 3 # i s s u e c o m m e n t - 2 4 0 0 6 7 8 6 5 [ 3 5 ] :   h t t p s : / / g i t h u b . c o m / r o l l u p / r o l l u p / i s s u e s / 5 5 2 [ 3 6 ] :   h t t p : / / p o u c h d b . c o m / 2 0 1 6 / 0 1 / 1 3 / p o u c h d b - 5 . 2 . 0 - a - b e t t e r - b u i l d - s y s t e m - w i t h - r o l l u p . h t m l [ 3 7 ] :   h t t p s : / / g i t h u b . c o m / n o l a n l a w s o n / r o l l u p i f y [ 3 8 ] :   h t t p s : / / g i t h u b . c o m / n o l a n l a w s o n / c j s - t o - e s 6 [ 3 9 ] :   h t t p s : / / g i s t . g i t h u b . c o m / n o l a n l a w s o n / 4 f 7 9 2 5 8 d c 0 5 b b d 2 c 1 4 b 8 5 c f 2 1 9 6 c 6 e f 0 [ 4 0 ] :   h t t p s : / / g i s t . g i t h u b . c o m / n o l a n l a w s o n / 7 2 6 f a 4 7 e 0 7 2 3 b 4 5 e 4 e e 9 e c f 0 c f 2 f c d d b [ 4 1 ] :   h t t p s : / / g i s t . g i t h u b . c o m / n o l a n l a w s o n / 7 e e d 1 7 e 6 f f a 1 8 7 5 2 b f 9 9 a 9 d 4 b f f 2 9 4 1 f [ 4 2 ] :   h t t p s : / / g i t h u b . c o m / w e b p a c k / w e b p a c k / i s s u e s / 2 8 7 3 [ 4 3 ] :   h t t p s : / / g i t h u b . c o m / s u b s t a c k / n o d e - b r o w s e r i f y / i s s u e s / 1 3 7 9 [ 4 4 ] :   h t t p s : / / g i t h u b . c o m / n o l a n l a w s o n / c o s t - o f - s m a l l - m o d u l e s / p u l l / 5 [ 4 5 ] :   h t t p s : / / g i t h u b . c o m / r e q u i r e j s / a l m o n d [ 4 6 ] :   h t t p s : / / g i s t . g i t h u b . c o m / n o l a n l a w s o n / 5 1 1 e 0 c e 0 9 f e d 2 9 f e d 0 4 0 b b 8 6 7 3 7 7 7 e c 5 [ 4 7 ] :   h t t p s : / / g i s t . g i t h u b . c o m / n o l a n l a w s o n / 4 e 7 2 5 d f 0 0 c d 1 b c 9 6 7 3 b 2 5 e f 7 2 b 8 3 1 c 8 b [ 4 8 ] :   h t t p : / / g i t h u b . c o m / n o l a n l a w s o n / o p t i m i z e - j s [ 4 9 ] :   h t t p s : / / n o l a n l a w s o n . c o m / [ 5 0 ] :   h t t p s : / / g i t h u b . c o m / L C T T / T r a n s l a t e P r o j e c t 阅 读 原 文
回复

举报

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

使用Markdown编辑器编辑 使用富文本编辑器编辑

Archiver| 手机版| 小黑屋|
Powered by Discuz! X3.4 Copyright © 2001-2020, Tencent Cloud. 商业源码建议获取授权，如侵犯您的权益，请联系客服处理