94

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

所以我看起来像:

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

6 回答 6

134

通过 uglifyjs 管道:

 browserify main.js | uglifyjs > bundle.js

你可以像这样使用 npm 安装它:

 npm install -g uglify-js
于 2013-03-23T21:28:28.553 回答
22

从 3.38.x 开始,你可以使用我的minifyify插件来缩小你的包并且仍然有可用的源映射。这在其他解决方案中是不可能的——您能做的最好的事情就是映射回未压缩的包。缩小地图一直到您单独的源文件(是的,甚至到咖啡脚本!)

于 2014-05-19T21:48:49.963 回答
15

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

于 2014-01-18T16:12:52.437 回答
14

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

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

在开发中,每当 JavaScript 文件发生更改时,我都会使用 watchify 构建带有源映射的未压缩包。我不想要 uglify 步骤,因为我希望在我用 alt-tab 键对浏览器进行刷新之前完成构建,无论如何在开发过程中它没有任何好处。为此,我使用:

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 或 browserify,请使用 npm 安装它们:

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

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

于 2017-12-19T14:37:03.090 回答
4

在保留源映射的同时不再需要使用插件来缩小:

browserify main.js --debug | uglifyjs --in-source-map inline --source-map-inline > bundle.js
于 2017-04-09T13:55:43.910 回答
3

我喜欢支持 ES6+ 和一些良好压缩的 terser

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

全局安装:

 npm i -g terser
于 2020-08-17T11:48:00.600 回答