node.js - Browserify 捆绑输出非常大，无法找到调试过程的方法

Question

我正在使用 browserify 和 npm 来创建 js 包。该网络应用程序使用 React 和许多其他模块，因此输出文件约为 3.4M、2M 丑陋和 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 等)。

任何帮助将不胜感激。

Answer 1

在您的情况下，这可能代表一个困难且烦人的重构步骤，但根据官方 browserify 手册，您可以尝试 partition feature这样，您可以将最终的包拆分为多个文件，以增量注入(inject)项目依赖项，以期减少应用程序入口点所需的初始文件的大小。

要实现这一点，您可以使用 factor-bundle 或 partition-bundle 插件，它们之间的主要区别在于，第二个插件有一个内置的ajax 函数(loadjs)来加载 js 文件，恕我直言，这是大型应用程序最灵活的解决方案。

遵循 Browserify 手册中的官方分区包描述:

partition-bundle

partition-bundle handles splitting output into multiple bundles like factor-bundle, but includes a built-in loader using a special loadjs() function.

partition-bundle takes a json file that maps source files to bundle files:

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

Then partition-bundle is loaded as a plugin and the mapping file, output directory, and destination url path (required for dynamic loading) are passed in:

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

Now you can add:

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

to your page to load the entry file. From inside the entry file, you can dynamically load other bundles with a loadjs() function:

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

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

来自官方Disc website :

Disc is a tool for analyzing the module tree of browserify project bundles. It's especially handy for catching large and/or duplicate modules which might be either bloating up your bundle or slowing down the build process.

The demo included on disc's github page is the end result of running the tool on browserify's own code base.

Command-Line Interface

Note: you'll need to build your bundle with the --full-paths flag for disc to do its thing.

discify [bundle(s)...] {options}

Options:
  -h, --help       Displays these instructions.
  -o, --output     Output path of the bundle. Defaults to stdout.

When you install disc globally, you the discify command-line tool is made available as the quickest means of checking out your bundle. As of disc v1.0.0, this tool takes any bundled browserify script as input and spits out a standalone HTML page as output.

For example:

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'