javascript - 如何正确使用Watchify和Uglifyify?

标签 javascript browserify uglifyjs

我正在寻找一种使用 browserify 进行缩小的好方法。

我正在开发一个 react 应用程序,试图使build设置尽可能简单。

我正在使用 browserifybabelifywatchify。 我不想使用像 gruntgulp 这样的任务运行程序,而只想使用 npm 以使设置尽可能简单。

我想对 browserify(生产构建)和 watchify(开发期间)使用相同的参数。开发期间编译的 js 应该与生产构建中的完全相同(即我也希望在开发期间缩小。并且我希望使用 browserify 实现最强的缩小。我知道还有其他模块加载器,例如 rollup 或 systemjs 可以实现更小的功能输出,但这不是我感兴趣的。

我当前的 watch 命令如下所示: watchify src/main.js -t babelify -t envify -o build/bundle.js -v 相应的构建命令如下所示: browserify src/main.js -t babelify -t envify -o build/bundle.js -v

请注意,所有参数看起来都相同。这就是我想要的方式,以便将来保持命令同步。

现在我的问题是如何添加丑化/缩小。

我尝试像这样添加 uglifyify: -g [ uglifyify --no-sourcemap ] 但输出中仍然有很多换行符,所以我猜它没有完全缩小。

我还尝试删除 -o 参数并通过 uglifyjs 管道输出 as described here 。这会产生较小的输出,但不适用于 watchify 命令。

最佳答案

请注意,uglifyifyuglifyjs 运行挤压转换,但建议您仍对结果输出使用 uglifyjs

Uglifyify gives you the benefit of applying Uglify's "squeeze" transform on each file before it's included in the bundle, meaning you can remove dead code paths for conditional requires.

因此,要更改之前的命令以包含 uglifyjs:

browserify src/main.js -t babelify -t envify -t uglifyify | uglifyjs -cm > build/bundle.min.js

watchify src/main.js -t babelify -t envify -t uglifyify -o 'uglifyjs -cm > build/bundle.min.js' -v

注释

  • watchify 命令上的 --outfile/-o 开关能够接受包含 的 shell 命令>|> 字符。
  • 当您在捆绑阶段之后通过管道传送结果时,uglifyjs 必须将文件作为一个整体来处理,而不是较小的 block ,因此您会损失一些速度watchify 提供的好处。

关于javascript - 如何正确使用Watchify和Uglifyify?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40247475/

相关文章:

php - 单击提交按钮将其值更改为另一个值

javascript - 内存泄漏-定期图像下载

javascript - 本地图设置了 'restriction' 选项时,map.fitBounds 的工作很奇怪

javascript - browserify - 排除代码块?

javascript - this 内部原型(prototype)函数等于 window 而不是对象实例

javascript - 为什么在此示例中图像高度变得如此之大?

javascript - UglifyJS 不会破坏 TypeScript 生成的 JavaScript 中的函数名称

eval - 如果 eval 存在,uglifyjs 不会破坏变量

javascript - 从表达式中提取变量

javascript - 打包具有依赖项的浏览器/服务器 CommonJS 模块