一个长模块与多个短模块代码分裂

Question

我开始在src文件夹中为Javascript package创建src原型。

但是我想知道哪种策略会更好地让开发人员使用这个包进行生产。

第一策略：

src
 |---scripts
        |-----comparator.js

在comparator.js中，我把处理比较的所有函数都放进去了。

  export function lessThan(array){...}

  export function BigThan(array){...}

  export function equalTo(array){...}
  
  .....

我有很多lessThan，很多BigThan等等。

第二战略：

      src
       |---scripts
              |---comparator
                        |---------less.js
                        |---------big.js
                        |---------equal.js

如何在performance?文件夹中分离

• ？
• 如何度量模块src

Answer 1

我认为第二个策略在整体性能方面会更好。

这将支持更好的树抖动，即使在这些模块与不支持适当的动态导入的代码库一起使用时也是如此。大多数框架都不把代码拆分看作是一流的公民。通常浏览器上也没有足够的支持。在这种情况下，开发人员可能不得不依赖诸如Webpack这样的堆填充或绑定器，后者提供了一些这种功能(import()或require.ensure())。在这种情况下，即使一个人只需要一个指定的出口，树的抖动也是不可能的。必须使用整个默认导出，这是对资源的浪费(时间是最关键的--下载和解析时间)。

因此，我建议将所有关键的和强制性的功能放入一个文件中。任何其他可选且可以模块化的内容都可以放在单独的文件中并单独导出。

性能度量：用于度量API的性能，可以使用Node (因为它使用V8)以及一些选项，比如‘-prof’。

    node --prof filename.js

在对代码进行优化或微优化时，需要多次执行此操作。还有几个其他选项可用于确保对代码的不同部分执行迟缓和急切。

您还可以使用performance 来标记和度量使用浏览器和节点执行API的各个阶段。尽管如此，可以与Node一起使用的V8选项可以为优化提供大量信息。

对于加载时间优化，我建议进行适当的代码分割(如上所述)，并在不同的浏览器之间进行试用(不同浏览器之间的行为可能略有不同)。