简介
collapsify 是一个可以将浏览器端的 bundle 文件分割成多个小模块的工具。这种分割尤其适用于浏览器端，因为它允许浏览器提前加载仅仅使用到的模块，而不是全部加载，以优化网页应用程序性能。
安装
使用 npm 可以非常容易地安装 collapsify:
npm install collapsify
使用
在使用 collapsify 前，需要安装 browserify 和 browserify-optional：
npm install -g browserify npm install -g browserify-optional
接下来，需要在代码中引入 collapsify：
var collapse = require('collapsify');然后我们就可以轻松地将一个大的 app.js 文件分解成许多可被单独加载的小的 js 模块：
browserify('app.js')
.plugin(collapse)
.bundle()
.pipe(fs.createWriteStream('bundle.js'));由于此时 bundle.js 文件被分成了多个小模块，我们需要在 HTML 页面中引入它们：
<script src="bundle.js"></script> <script src="a.js"></script> <script src="b.js"></script> <script src="c.js"></script>
其中， a.js, b.js, c.js 是 app.js 中的三个小模块。
配置
collapsify 还提供了一些可配置项，让我们更好地控制它的行为。以下是可配置项及其作用：
ignore：不需要分割的模块列表；deterministic：如果为true，则使用相同的输入和相同的命名空间最终输出的模块和名称将是相同的；checkCircularDependencies：如果为true，则检查是否有循环依赖；debug：如果为true，则会输出一定信息来帮助调试。
以下是一个具备配置项的 collapsify 使用示例：
-- -------------------- ---- -------
--------------------
----------------- -
------- ---------- ----------
-------------- -----
-------------------------- -----
------ ----
--
---------
-----------------------------------------总结
在实现浏览器端性能优化时，将大的 bundle 文件拆分成多个小模块是一种非常实用的手段。使用 collapsify 工具可以轻松地实现这一目标，提高网页应用程序性能。同时， collapsify 还提供了若干可配置项，让我们可以进一步控制它的行为。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/77856