我正在寻找一种使用 browserify 进行缩小的好方法。
我正在开发一个 react 应用程序,试图使build设置尽可能简单。
我正在使用 browserify
、babelify
和 watchify
。
我不想使用像 grunt
或 gulp
这样的任务运行程序,而只想使用 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
命令。
最佳答案
请注意,uglifyify
从 uglifyjs
运行挤压转换,但建议您仍对结果输出使用 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/