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'