在您的情况下,这可能代表了一个困难且烦人的重构步骤,但是根据官方 browserify 手册,您可以尝试partition feature,这样,您可以将最终捆绑包拆分为多个文件,以进行增量注入项目依赖关系,希望减少应用入口点所需的初始文件的大小。
为此,您可以使用 factor-bundle 或 partition-bundle 插件,它们之间的主要区别在于第二个插件具有内置ajax 函数 (loadjs) 加载 js 文件,恕我直言,这是大型应用程序最灵活的解决方案。
遵循 Browserify 手册中的官方分区包描述:
分区包
partition-bundle 处理将输出拆分为多个包,例如
factor-bundle,但包含一个使用特殊 loadjs() 的内置加载器
功能。
partition-bundle 采用一个 json 文件,将源文件映射到 bundle
文件:
{
"entry.js": ["./a"],
"common.js": ["./b"],
"common/extra.js": ["./e", "./d"]
}
然后 partition-bundle 作为插件和映射文件加载,
输出目录和目标 url 路径(动态需要
loading) 传入:
browserify -p [ partition-bundle --map mapping.json \
--output output/directory --url directory ]
现在你可以添加:
<script src="entry.js"></script>
到你的页面加载入口文件。从入口文件中,您
可以使用 loadjs() 函数动态加载其他包:
a.addEventListener('click', function() {
loadjs(['./e', './d'], function(e, d) {
console.log(e, d);
});
});
此外,您可以使用 Disc 来直观地分析您的依赖关系树,以避免其中的冗余/重复和/或识别应用程序启动期间不需要的依赖关系。
来自官方Disc website:
Disc是一个分析browserify项目模块树的工具
捆绑。它对于捕捉大的和/或重复的特别方便
可能会使您的捆绑软件膨胀或减慢速度的模块
构建过程。
disc的github页面包含的demo是运行的最终结果
browserify自己的代码库上的工具。
命令行界面
注意:您需要使用 --full-paths 标志构建您的捆绑包
光盘来做它的事情。
discify [bundle(s)...] {options}
Options:
-h, --help Displays these instructions.
-o, --output Output path of the bundle. Defaults to stdout.
当你全局安装 disc 时,你的 discify 命令行工具是
作为签出捆绑包的最快方式提供。作为
光盘 v1.0.0,此工具将任何捆绑的 browserify 脚本作为输入
并输出一个独立的 HTML 页面作为输出。
例如:
browserify --full-paths index.js > bundle.js
discify bundle.js > disc.html
open disc.html
最后但同样重要的是,当你导入你的模块时,如果你只需要它的几个功能,请避免完全加载模块,例如:
而不是这个:
import { core, fp } from 'lodash'
做这个:
import core from 'lodash/core'
import fp from 'lodash/fp'