如何使用browserify获得缩小的输出?

时间:2013-03-23 18:48:18

标签: javascript node.js browserify

刚开始使用browserify,但我找不到有关如何让它泄漏缩小输出的文档。

所以我看起来像:

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

6 个答案:

答案 0 :(得分:118)

通过uglifyjs管道:

 browserify main.js | uglifyjs > bundle.js

您可以使用npm安装它,如下所示:

 npm install -g uglify-js

答案 1 :(得分:21)

从3.38.x开始,您可以使用我的minifyify插件缩小捆绑包,但仍然可以使用源代码映射。其他解决方案无法实现这一点 - 您可以做的最好的事情是映射回未压缩的捆绑包。将地图一直缩小回您的单独源文件(是的,甚至是coffeescript!)

答案 2 :(得分:15)

或者使用uglifyify转换“在Browserify处理之前”为您提供应用Uglify的“挤压”转换的好处,这意味着您可以删除条件要求的死代码路径。“

答案 3 :(得分:8)

在花了几个小时研究如何构建新的构建过程之后,我认为其他人可能会从我最终做的事情中受益。我回答这个老问题,因为它在谷歌看来很高。

我的用例比OP要求的更多一些。我有三种构建方案:开发,测试,生产。由于大多数专业开发人员都有相同的要求,我认为超出原始问题的范围是可以原谅的。

在开发中,每当JavaScript文件发生更改时,我都会使用watchify构建一个包含源映射的未压缩包。我不想要uglify步骤,因为我希望构建完成之前我已经在浏览器上进行了alt-tabbed以达到刷新并且在开发期间它没有任何好处。要实现这一点,我使用:

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

为了测试,我想要与生产完全相同的代码(例如uglified),但我也想要一个源地图。我通过以下方式实现这一目标:

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结合之前,通过uglifying所有源文件显然可以获得更好的压缩。如果你有更多时间花在我身上,你可能希望调查一下。

如果你没有安装watchify,uglify-js或者浏览器已经安装,请用npm安装它们:

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

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

答案 4 :(得分:3)

在保留源地图时,无需再使用插件进行缩小:

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

答案 5 :(得分:1)

我喜欢terser,它支持ES6 +并具有良好的运算能力。

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

全局安装:

 npm i -g terser