Browserify包的输出非常大,找不到debugging进程的方法

我正在使用npm的browserify来创build一捆js。 该网站的应用程序使用反应和很多其他模块,所以输出文件约3.4M, 2M加粗和430K gzip。

browserify进程是通过package.json中定义的npm run browserify执行的

"browserify": "browserify client/index.js -u server/**/**/**/* -iq -i express-validation | uglifyjs -o public/javascripts/generated/bundle.js" 

我有一种感觉,束输出是太大了,有一种方法来减less它,但我找不到一种方法来debugging进程(尝试-d --list等)。

任何帮助将不胜感激。

这可能代表了一个困难和烦人的重构步骤,但是根据官方的browserify手册,您可以尝试使用分区function ,这样,您可以将最终的bundle拆分为多个文件,用于增量注入项目依赖项,希望能够缩小应用程序入口点所需的初始文件的大小。

为了达到这个目的,你可以使用factor-bundle或者partition-bundle插件,它们之间的主要区别是第二个插件有一个内置的ajax函数(loadjs)来加载js文件,恕我直言,这是最灵活的解决scheme大型应用。

遵循Browserify手册中的官方partion-bundle描述:

分区束

partition-bundle会把输出分成多个bundle,比如factor-bundle,但是包含一个使用特殊的loadjs()函数的内置的loader。

分区捆绑包需要一个将源文件映射到捆绑文件的json文件:

 { "entry.js": ["./a"], "common.js": ["./b"], "common/extra.js": ["./e", "./d"] } 

然后,partition-bundle作为插件加载,映射文件,输出目录和目标urlpath(dynamic加载所需的)被传入:

 browserify -p [ partition-bundle --map mapping.json \ --output output/directory --url directory ] 

现在你可以添加:

 <script src="entry.js"></script> 

到您的页面加载条目文件。 从入口文件中,可以使用loadjs()函数dynamic加载其他包:

 a.addEventListener('click', function() { loadjs(['./e', './d'], function(e, d) { console.log(e, d); }); }); 

另外,您可以使用光盘来直观地分析依赖关系树,以避免其中的冗余/复制和/或识别在应用程序启动期间不需要的依赖关系。

从官方光盘网站 :

Disc是一个分析browserify项目包的模块树的工具。 捕获大型和/或重复模块可能会让您的软件包膨胀或者减慢构build过程,这一点非常方便。

光盘的github页面上包含的演示是在browserify自己的代码库上运行该工具的最终结果。

命令行界面

注意:你需要用光盘的–full-paths标志来build立你的光盘来做它的事情。

 discify [bundle(s)...] {options} Options: -h, --help Displays these instructions. -o, --output Output path of the bundle. Defaults to stdout. 

当您全局安装光盘时,您可以使用discify命令行工具作为签出您的软件包的最快方法。 从光盘v1.0.0开始,这个工具将所有捆绑的browserify脚本作为input,并将一个独立的HTML页面作为输出。

例如:

 browserify --full-paths index.js > bundle.js discify bundle.js > disc.html open disc.html 

最后但并非最不重要的一点,当你导入你的模块时,如果你只需要很less的function,就不要完全加载模块,例如:

而不是这个:

 import { core, fp } from 'lodash' 

做这个:

 import core from 'lodash/core' import fp from 'lodash/fp'