【问题标题】:Browserify bundle output is very large, cannot find a way to debug the processBrowserify bundle 输出非常大,找不到调试进程的方法
【发布时间】:2016-05-19 07:26:15
【问题描述】:

我正在使用带有 npm 的 browserify 来创建一个 js 包。该网络应用使用 react 和许多其他模块,因此输出文件约为 3.4M2M 丑陋的和 430K gzip。

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

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

我感觉捆绑输出太大了,有办法减少它,但我找不到调试进程的方法(试过-d --list等)。

任何帮助将不胜感激。

【问题讨论】:

标签: node.js reactjs npm browserify commonjs


【解决方案1】:

在您的情况下,这可能代表了一个困难且烦人的重构步骤,但是根据官方 browserify 手册,您可以尝试partition feature,这样,您可以将最终捆绑包拆分为多个文件,以进行增量注入项目依赖关系,希望减少应用入口点所需的初始文件的大小。

为此,您可以使用 factor-bundlepartition-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'

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-07-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多