Trình biên dịch đóng cửa của Google với các ứng dụng jQuery

Question

Tôi có rất nhiều thời gian đầu tư vào jquery và một ứng dụng lớn được xây dựng với nó. Gần đây tôi đã xem xét Google Closure Library, nhưng tại thời điểm này đã tìm thấy nó không được gần như thanh lịch như jquery. Tôi tin rằng nó có thể có một số tiềm năng và sẽ xem xét nó nhiều hơn, nhưng bây giờ tôi có ý định tiếp tục sử dụng jQuery làm khung cơ sở của tôi.

Tuy nhiên, tôi vô cùng ấn tượng với Google Closure Compiler. Tôi rất thích bắt đầu sử dụng nó trong quá trình xây dựng ứng dụng của mình. Thật không may, nó không phải là chính xác rõ ràng như thế nào dễ dàng nó sẽ được sử dụng nó cho các dự án mà không tuân theo các tiêu chuẩn đóng cửa tiêu chuẩn của Google.

Có bất kỳ phương pháp hay nhất hoặc tài nguyên tốt nào trong việc phát triển các dự án dựa trên jquery và sử dụng Trình biên dịch đóng cửa của Google không? Ví dụ:

1. Liệu nó có ý nghĩa để biên dịch jquery và jquery-ui với nó, hay tôi nên tiếp tục trỏ đến các nguồn tài nguyên trên google CDN? Tôi chắc rằng jquery và jquery-ui của tôi sẽ nhỏ hơn vì tôi không sử dụng tất cả các tính năng của các thư viện, nhưng chỉ vào một CDN làm tăng khả năng tệp đã nằm trong bộ nhớ cache của khách truy cập.

2. Đơn đăng ký của tôi được chia thành nhiều tệp, với một tệp cho mỗi chức năng. Tôi muốn kết hợp chúng theo một thứ tự cụ thể và rút gọn chúng thành một tệp cho mỗi phần trên trang web của tôi. Tôi muốn tự động hóa quá trình này.

3. Hiện dự án của tôi có phần phụ trợ java và được xây dựng bằng Maven. Liệu có cần thêm Google Closure Compiler vào quá trình xây dựng này không?

Về cơ bản, tôi đang tìm kiếm bất kỳ tài nguyên nào cụ thể để sử dụng Trình biên dịch đóng cửa của Google với jQuery.

Answer 1

Trình biên dịch đóng cửa của Google là jQuery hoặc bất kỳ thư viện bất khả tri nào khác. Nó có hai loại tối ưu hóa -

• Simple
• nâng cao

tôi đã cố gắng áp dụng tối ưu hóa tiên tiến, nhưng nó đã phá vỡ nghiêm trọng ứng dụng của tôi. Nếu nó giống nhau, bạn có thể cố gắng sửa chữa ứng dụng của mình hoặc sử dụng tối ưu hóa đơn giản. Có kích thước giảm 32% với các tối ưu hóa đơn giản và khoảng 68% với các tối ưu hóa nâng cao, nhưng điều đó không có hiệu quả.

Di chuyển kết nối JS theo cách tự động sang quá trình xây dựng của bạn chắc chắn là cách để thực hiện. Xem JavaScript dependency management. JQuery đã được tối ưu hóa rất nhiều cho kích thước byte, vì vậy tôi nghi ngờ bạn sẽ có thể ép đủ nước bằng cách sử dụng trình biên dịch đóng cửa của Google, nhưng nó đáng để thử khi kết hợp với dự án của bạn.

Tôi thấy Thư viện đóng cửa của Google trong điều kiện thuận lợi, nhưng chưa sử dụng được, vì tôi đã đầu tư rất nhiều vào MooTools tại thời điểm này. Nhìn vào đó là API, có vẻ như nó có phạm vi phủ sóng khá rộng về những gì nó cung cấp ngoài thao tác DOM, xử lý AJAX, xử lý sự kiện, v.v.

Answer 2

Tôi tin là 1.4.2 (có thể trước đó), jQuery được rút gọn sử dụng Trình biên dịch Google Closure theo mặc định. Vì vậy, có lẽ tốt nhất nên tiếp tục tham khảo giao diện người dùng jQuery/jQuery thông qua Google CDN.Tuy nhiên, vẫn có những lợi ích để tích hợp trình biên dịch Closure vào quá trình xây dựng của bạn để kết hợp và rút gọn các tệp JS của bạn. Cụ thể là, giảm các yêu cầu JS trên mỗi lần tải trang và chuyển dữ liệu nhỏ hơn với hy vọng cải thiện hiệu suất tải trang phía máy khách của bạn. Đây là một số trong những thách thức chúng ta gặp phải trong khi tích hợp trình biên dịch Đóng cửa vào quá trình xây dựng của chúng tôi:

1. Xây dựng lệnh biên soạn - Chúng tôi cần một phương tiện để gọi trình biên dịch với tất cả các thông số cần thiết một cách tự động trong thời gian xây dựng quá trình. Đối với chúng tôi, điều này có nghĩa là viết một ứng dụng giao diện điều khiển để xây dựng lệnh. Nếu kịch bản shell có sẵn trong môi trường của bạn, đó có thể là một lợi thế.

2. Quản lý phụ thuộc - Trình biên dịch đóng cửa có khả năng tự động sắp xếp thứ tự của JS được kết hợp sao cho phụ thuộc được giữ nguyên. Để tận dụng tính năng này, các tệp JS phải được chú thích bằng goog.provide\goog.require để cho trình biên dịch biết phụ thuộc là gì (--manage_closure_dependencies). Trình biên dịch cũng sẽ loại trừ mọi JS không bắt buộc (tức là không được tham chiếu qua câu lệnh goog.require) từ JS được kết hợp. Dưới đây là một số điều cần xem ra cho:

   • Nếu bạn muốn bao gồm tất cả các bạn file JS trong tổng sản lượng, đảm bảo rằng bạn bao gồm một "biểu hiện" tập tin JS trong biên soạn mà chỉ chứa goog.require báo cáo cho mỗi tệp được bao gồm tập lệnh kết hợp (nghĩa là không có câu hỏi goog.provide).
   • Nếu bạn không sử dụng Thư viện đóng cửa, hãy đảm bảo rằng bạn đang biên dịch bằng cách sử dụng SIMPLE_OPTIMIZATIONS trở lên. Nếu không, trình biên dịch sẽ không xóa các câu lệnh goog.provide/goog.require. Ngoài ra, bạn cũng có thể xác định các chức năng JS goog.provide/goog.require JS của riêng mình để tránh lỗi.
   • Đảm bảo có không phụ thuộc theo chu kỳ hoặc phải đối mặt với hậu quả.

3. Soạn ra một phiên bản debug của kịch bản kết hợp - Nếu cần, bạn có thể biên dịch một phiên bản debug của kịch bản kết hợp bằng cách sử dụng --formatting PRETTY_PRINT cờ. Điều này sẽ xuất ra tập lệnh tương đương được định dạng với khoảng trắng còn nguyên vẹn để phát triển/gỡ lỗi.

Mặc dù, các tài liệu biên dịch Đóng cửa có thể thưa thớt vào những thời điểm, nó có đủ để bắt đầu cho hầu hết các phần và đang không ngừng nâng cao - vì vậy thường xuyên kiểm tra các bản cập nhật, không chỉ SO;)

Hi vọng điêu nay co ich.

Answer 3

Tauren, bạn có thể kiểm tra mã của mình bằng cách sử dụng closure-compiler nhà riêng. Bạn có thể nhập thư viện JQuery của bạn hoặc một cái gì đó khác và thử nó. Nếu có thể, hãy xác định mã JavaScript của bạn bằng cách sử dụng chức năng ẩn danh giúp tránh xung đột đặt tên. Sử dụng không gian tên bằng cách sử dụng thư viện Google cung cấp chức năng. Một tài nguyên tốt khác có thể giúp bạn là Google JavaScript Style Guide

Answer 4

jQuery không tương thích (chưa) với Trình biên dịch đóng gói ở chế độ nâng cao. Tôi đồng ý nó sẽ là một điều rất tốt để làm cho nó tương thích, bởi vì cú pháp phương pháp-chaining của nó vay rất dễ dàng để ảo hóa nguyên mẫu cho tốc độ thực hiện được cải thiện nhiều.

Thực tế, trong số các thư viện JavaScript phổ biến (trừ Thư viện đóng cửa), chỉ Bộ công cụ Dojo tương thích với chế độ Đóng nâng cao.

http://dojo-toolkit.33424.n3.nabble.com/file/n2636749/Using_the_Dojo_Toolkit_with_the_Closure_Compiler.pdf?by-user=t

Answer 5

$(elem)['width']() thay vì $(elem).width()

này làm việc với ADVANCED_OPTIMIZATIONS, do đó trình biên dịch đóng cửa không cấu trúc lại các phương pháp jQuery.

Answer 6

Using jQuery with closure compiler advanced mode

Answer 7

Bắt jQuery để làm việc tốt với trình biên dịch đóng cửa/tiên tiến đã được khó khăn đối với tôi, nhưng kể từ khi bạn đang làm việc với nhiều file Tôi nghĩ rằng điều quan trọng là bạn nhìn vào các mô-đun tùy chọn ở đây:

Using the --module option in Closure Compiler to create multiple output files

Tôi đã tìm hiểu về tài liệu tốt trên web nhưng có ít nhất là VERY VERY. Bằng cách sử dụng một jQuery extern duy nhất, tôi đã có thể biên dịch với mỹ tiên tiến - với nhiều tập tin, vv

@echo off 
java -jar bin\compiler.jar^
    --compilation_level=ADVANCED_OPTIMIZATIONS^
    --externs "externs\jquery-1.8.js"^
    --language_in=ECMASCRIPT5_STRICT^
    --warning_level=VERBOSE^
    --module_output_path_prefix .\compiled\^
    ^
    --module_wrapper core:"(function(){%%s%%})();"^
    --js ".\corelib.js"^
    --module core:1^
    ^
    --module_wrapper somescript"(function(){%%s%%})();"^
    --js ".\some_other_runtime_loaded_script"^
    --module somescript:1:core^
    ^
    --module_wrapper somescript1:"(function(){%%s%%})();"^
    --js ".\some_other_runtime_loaded_script"^
    --module somescript1:1:core 

thiệu

--module_wrapper name:wrapper 

này cho phép bạn quấn kịch bản của bạn trong một đóng cửa - vì trình biên dịch theo mặc định sẽ xóa chúng. Nếu bạn đang sử dụng "sử dụng nghiêm ngặt" như tôi, đó là không có không.

--module name:#:dependency 

name  Name of the script that will get written 
#   number of scripts above that line to include into this script 
dependency What script does this depend on? 

Answer 8

Bạn có thể sử dụng kjscompiler: https://github.com/knyga/kjscompiler và chỉ định bất kỳ thư viện nào bạn thích ở bên ngoài. Chúng sẽ không được khai thác. Giải pháp thực sự tốt đẹp.