如何使用browserify获得压缩输出？

Question

刚开始使用browserify，但是我找不到有关如何获取其缩小输出的文档。

因此我正在寻找类似这样的内容：

$> browserify main.js > bundle.js --minified

- Fdr

---

代码压缩不在browserify的范围内，您需要通过一个代码压缩工具来处理它的输出。 - generalhenry

Answer 1

通过 uglifyjs 进行管道传输：

 browserify main.js | uglifyjs > bundle.js

您可以使用npm进行安装，如下所示：

您可以使用npm进行安装，如下所示：

 npm install -g uglify-js

- topek

---

如何使用Grunt的browserify/watchify任务完成此操作？ - Greg Ennis

如果您使用grunt，我建议您分两步进行。首先使用browserify编译，然后再进行缩小。优点是您可以拥有带有源映射的开发构建和剥离所有内容的生产构建。 - topek

是的，那就是我最终做的。实际上需要3个步骤，你必须清理中间文件。谢谢！ - Greg Ennis

如果我想为我的压缩文件生成源映射，并且该映射可以指向“browserification”之前的代码，该怎么办？ - Thomas Deutsch

我已经为此创建了一个插件（https://www.npmjs.org/package/minifyify）。 - Ben

Answer 2

从3.38.x版本开始，您可以使用我的minifyify插件来压缩捆绑包并仍然具有可用的源代码映射。这是其他解决方案所不能实现的--最好的情况只能映射回未压缩的捆绑包。Minifyify可以一直映射到您的单独源文件（是的，即使是coffeescript！）

- Ben

---

它说它支持Browserify版本9。而当前的Browserify版本是11.0.1。它会支持吗？ - cchamberlain

uglifyify 看起来对我来说是一个很好的替代品。 - Brett Zamir

Answer 3

或者使用uglifyify转换工具，该工具能够在Browserify处理前应用Uglify的"压缩"转换，这意味着您可以删除有条件的require中的死代码路径。

- srgstm

---

它仍然需要使用顶部答案中显示的uglify管道。他们在文档开头就明确说明了这一点。 - carlin.scott

Answer 4

花费几个小时调查如何构建新的构建流程后，我认为其他人可能会受益于我最终所做的事情。由于它在Google中排名较高，因此我回答了这个旧问题。

我的用例比OP要求的要复杂一些。我有三个构建场景：开发、测试、生产。由于大多数专业开发人员都有相同的要求，我认为超出了原始问题的范围是可以理解的。

在开发中，每当JavaScript文件更改时，我使用watchify构建一个带有源映射的未压缩捆绑包。我不想使用uglify步骤，因为我希望在alt-tab到浏览器刷新之前完成构建，并且在开发过程中它也没有任何好处。为了实现这一点，我使用：

watchify app/index.js  --debug -o app/bundle.js -v

测试时，我想要与生产环境完全相同的代码（例如经过压缩处理的代码），但同时也需要一个源代码映射文件。我可以通过以下方式实现：

```javascript //# sourceMappingURL=app.js.map ```

```html ```

```javascript //# sourceURL=app.min.js ```

```html ```

browserify app/index.js  -d | uglifyjs -cm -o app/bundle.js      --source-map "content=inline,filename='bundle.js',url='bundle.js.map'"

在生产环境中，代码将被使用uglify压缩，且不提供源映射。

browserify app/index.js  | uglifyjs -cm > app/bundle.js

注意：

我在Windows 7、MacOS High Sierra和Ubuntu 16.04上都使用过这些说明。

我停止使用minifyify，因为它不再得到维护。

可能有比我分享的更好的方法。据我所知，在将所有源文件与browserify结合之前，通过对它们进行uglify处理可以获得更好的压缩效果。如果你有比我更多的时间来研究它，你也许会想去尝试一下。

如果你还没有安装watchify、uglify-js或browserify，请使用npm安装它们：

npm install -g browserify
npm install -g watchify
npm install -g uglify-js

如果您安装了旧版本，我建议您升级。特别是uglify-js，因为他们对命令行参数进行了破坏性更改，这使得在Google中出现的大量信息无效。

- Gary Ott

Answer 5

我喜欢terser，它支持ES6+并具有良好的压缩功能。

browserify main.js | terser --compress --mangle > bundle.js

全局安装：

 npm i -g terser

- Alvin Konda

---

谢谢！这个完全直接就可以工作。没有像 uglifyjs / minifyify 那样的麻烦。 - mfink

Answer 6

不再需要使用插件来压缩代码并保留源码映射：

browserify main.js --debug | uglifyjs --in-source-map inline --source-map-inline > bundle.js

- user