使用 jquery 关闭编译器应用程序
我已经成功创建了一个小型 js 应用程序,该应用程序使用 jQuery 和 jQuery UI,使用谷歌的闭包编译器进行高级优化。只是为了清楚起见:我没有编译 jQuery 本身,只是我使用 jquery 的应用程序。我想知道是否有人可以证实这个想法也适用于更大、更复杂的应用程序。
过程如下:
0.- 您有一个调用 jquery-1.4.3.min.js、test1.js 和 test2.js 的 html 文件
1.- 编译您的应用程序并导出属性映射文件
java -jar closure-compiler.jar \
--compilation_level ADVANCED_OPTIMIZATIONS \
--js test1.js --js test2.js \
--property_map_output_file prop.out > min.js
属性映射为包含编译前后属性名称的键/值文件:
aprop:a
html:b
each:c
2.- 将 prop.out 复制到 prop.in 并编辑它,以便 jQuery 属性(函数)被相同的名称替换(这可以很容易地自动化带有列表 jquery 的函数):
aprop:a
html:html
each:each
3.- 使用 prop in 作为属性映射输入重新编译
java -jar closure-compiler.jar \
--compilation_level ADVANCED_OPTIMIZATIONS \
--js test1.js --js test2.js \
--property_map_input_file prop.in > min.js
4.- 现在在您的 html 中,包含 min.js 和 jquery-1.4.3.min.js。应用程序应该可以正常运行,但您的代码应该更快、更小。
这将缩小你的代码,而不是 jquery 的。
正如我所说,我已经在一个小应用程序中对此进行了测试。如果有人有一个更大、更复杂的应用程序,那么很高兴知道它可以工作。
谢谢,
海格
I have manage to create a small size js application that uses jQuery and jQuery UI using google's closure compiler with advanced optimizations. Just for clarity: I have not compiled jQuery itself, just my app that uses jquery. I would like to know if somebody can confirm that this idea also works for bigger and more complex apps.
The procedure is as follows:
0.- You have an html file that calls jquery-1.4.3.min.js, test1.js, and test2.js
1.- compile your app and export a property map file
java -jar closure-compiler.jar \
--compilation_level ADVANCED_OPTIMIZATIONS \
--js test1.js --js test2.js \
--property_map_output_file prop.out > min.js
The property map is a key/value file that contains the name of the property before and after compilation:
aprop:a
html:b
each:c
2.- Copy prop.out to prop.in and edit it so that jQuery properties (functions) are replaced by the same name (this could be easily automated with a list jquery's function):
aprop:a
html:html
each:each
3.- Recompile using prop in as property map input
java -jar closure-compiler.jar \
--compilation_level ADVANCED_OPTIMIZATIONS \
--js test1.js --js test2.js \
--property_map_input_file prop.in > min.js
4.- Now in your html, include min.js and jquery-1.4.3.min.js. The application should be functional but your code should be faster and smaller.
This will minify your code, not jquery's.
As I said, I have tested this in a small app. If somebody has a bigger and complex app, it would be nice to know that this works.
Thanks,
heg
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您是否考虑过使用externs。据我所知,这是防止 jQuery 方法在代码中被缩短的方法。 jQuery 的外部程序作为贡献存在到关闭项目。
对于 jQuery UI,您可能想尝试这个。这是我遇到过一次但还没有亲自测试过的东西
顺便说一句:如果您感兴趣,有一个非常方便的构建工具用于关闭:
Have you considered using externs. As far as I know that is the way to go to keep the jQuery methods from being shortened in your code. Externs for jQuery exist as contributions to the closure project.
For jQuery UI you might want to try this. It is something I came across once but haven't tested it myself
BTW: If you're interested, there is this extremely handy build tool for closure: Plovr. I use it all the time and I made externs work with it.