2010-12-02 33 views
19

Tôi đang xem xét triển khai một số tối ưu hóa hiệu suất xung quanh javascript/css của mình. Đặc biệt là tìm cách để đạt được việc khai thác và kết hợp như vậy. Tôi đang phát triển trong các ứng dụng web .net/C#.Thu nhỏ và kết hợp các tệp trong .net

Tôi có một vài lựa chọn và tìm kiếm các thông tin phản hồi trên mỗi:

Đầu tiên là công cụ này thông minh Tôi đã xem qua chirpy mà qua visual studio kết hợp, minifies vv ->http://chirpy.codeplex.com/ Đây là một visual studio thêm vào nhưng khi tôi ở trong môi trường nhóm, công cụ này không lý tưởng.

Tùy chọn tiếp theo của tôi là sử dụng tác vụ Msbuild (http://yuicompressor.codeplex.com/) để rút gọn tệp và kết hợp chúng (có thể đọc từ tệp xml cần kết hợp). Trong khi điều này làm việc để giảm thiểu tiền phạt, mối quan tâm tôi có là tôi sẽ phải duy trì những gì phải được kết hợp mà có thể là một nhức đầu.

Tùy chọn thứ 3 là sử dụng tác vụ msbuild chỉ để rút gọn và thời gian chạy bằng cách sử dụng một số lớp trợ giúp, kết hợp các tệp trên cơ sở mỗi trang. Điều này sẽ kết hợp các tập tin, đặt tên cho nó và thêm một phiên bản vào nó.

Bất kỳ tùy chọn nào khác mà tôi có thể xem xét? Mối quan tâm của tôi với tùy chọn cuối cùng là nó có thể có vấn đề hiệu suất như tôi sẽ phải mở tập tin từ ổ đĩa cục bộ, đọc nội dung của nó và sau đó kết hợp các tập tin. Điều này là rất nhiều chế biến tại thời gian chạy. Tôi đã nhìn vào một cái gì đó như Squishit - https://github.com/jetheredge/SquishIt/downloads Điều này giảm thiểu các tập tin tại thời gian chạy nhưng tôi sẽ xem xét việc này tại thời gian biên dịch.

Vì vậy, bất kỳ phản hồi nào về cách tiếp cận của tôi sẽ tuyệt vời? Nếu tùy chọn thứ 3 sẽ không gây ra vấn đề về hiệu suất, tôi sẽ hướng đến nó.

+0

Có thể liên quan http://stackoverflow.com/q/4234213/340760 – BrunoLM

Trả lời

11

Chúng tôi đã thực hiện điều gì đó tương tự với một số ứng dụng web ASP.NET. Cụ thể, chúng tôi sử dụng Yahoo Yui compressor, trong đó có một phiên bản thư viện .NET mà bạn có thể tham khảo trong các ứng dụng của mình.

Cách tiếp cận chúng tôi thực hiện là tạo các tệp được hợp nhất/rút gọn cần thiết khi chạy. Chúng tôi gói tất cả logic này thành một điều khiển ASP.NET, nhưng điều đó không cần thiết tùy thuộc vào dự án của bạn.

  • Lần đầu tiên yêu cầu được thực hiện cho một trang, chúng tôi xử lý thông qua danh sách các tệp JS và CSS được bao gồm. Trong một chủ đề riêng biệt (vì vậy yêu cầu ban đầu sẽ trả về không chậm trễ), chúng tôi sau đó hợp nhất các tệp được đính kèm lại với nhau (1 cho JS, 1 cho CSS) và sau đó áp dụng máy nén Yui.
  • Kết quả sau đó được ghi vào đĩa để tham khảo nhanh trong tương lai
  • Khi có yêu cầu tiếp theo, trang đầu tiên tìm kiếm các phiên bản được rút gọn. Nếu tìm thấy, nó chỉ phục vụ những người lên. Nếu không, nó sẽ trải qua quá trình này một lần nữa.

Theo một số đóng băng để bánh:

  • Đối với mục đích gỡ lỗi, nếu debug chuỗi truy vấn = true là hiện nay, các nguồn lực sáp nhập/minified được bỏ qua và các tập tin cá nhân ban đầu được phục vụ thay vì (? vì có thể khó gỡ lỗi được JS được tối ưu hóa)

Chúng tôi đã tìm thấy quy trình này hoạt động đặc biệt tốt. Chúng tôi xây dựng nó thành một thư viện để tất cả các trang ASP.NET của chúng tôi có thể tận dụng. Các kịch bản sau xây dựng có thể phức tạp nếu mỗi trang có các phụ thuộc khác nhau, nhưng thời gian chạy có thể xác định điều này khá dễ dàng. Và, nếu ai đó cần sửa nhanh tệp CSS, họ có thể làm như vậy, xóa các phiên bản đã hợp nhất của tệp và quy trình sẽ tự động bắt đầu lại mà không cần phải thực hiện xử lý sau khi xây dựng với MSBuild hoặc NAnt.

+0

Tôi có thể lấy máy kỳ diệu/dll này ở đâu mà bạn nói? Tôi đã viết chính xác điều tương tự cho coldfusion, và hoàn toàn đồng ý nó hoạt động tuyệt vời. Tôi đã giả định một điều như vậy sẽ tồn tại cho. Net, nhưng dường như không .... – Barry

0

Kết hợp các tệp trong thời gian chạy đáng giá để tránh phải đồng bộ hóa các phiên bản mới. Tuy nhiên, một khi chúng được kết hợp theo lập trình, hãy lưu chúng vào đĩa. Sau đó, mã chạy mỗi khi các tệp được tìm nạp chỉ cần kiểm tra xem các tệp đã không thay đổi trước khi phân phát phiên bản đã lưu vào bộ nhớ cache hay chưa.

Nếu chúng đã thay đổi, sau đó mã nén có thể chạy dưới dạng một lần. Mặc dù sẽ có chi phí hiệu suất nhỏ, bạn cũng sẽ nhận được lợi ích hiệu suất từ ​​ít yêu cầu tệp hơn.

Đây là phương pháp mà công cụ Minify sử dụng để nén JS/CSS, công cụ này đã hoạt động thực sự tốt cho tôi. Nó chỉ là Linux/PHP, nhưng bạn cũng có thể có thêm một số ý tưởng nữa.

2

Tôi đã thực hiện một giải pháp thực sự tốt đẹp cho điều này một vài năm trở lại nhưng tôi không có nguồn trái. Giải pháp dành cho webforms nhưng nó sẽ hoạt động tốt để chuyển nó sang MVC. Tôi sẽ cố gắng giải thích những gì tôi đã làm trong một vài bước đơn giản. Đầu tiên chúng ta cần phải đăng ký các kịch bản và chúng tôi đã viết một bộ điều khiển đặc biệt đã làm điều đó. Khi bộ điều khiển được trả lại nó đã làm ba điều:

  1. Thu nhỏ tất cả các tập tin, tôi nghĩ rằng chúng tôi sử dụng nén YUI
  2. Kết hợp tất cả các tập tin và lưu trữ như chuỗi
  3. Tính một hash cho chuỗi của kết hợp các tệp và sử dụng tệp đó làm tên tệp ảo. Bạn lưu trữ chuỗi các tệp kết hợp trong từ điển được lưu trong bộ nhớ cache trên máy chủ có giá trị băm dưới dạng khóa, html được hiển thị cần trỏ đến một thư mục đặc biệt có "tập lệnh".

Bước tiếp theo là triển khai một HttpHandler đặc biệt xử lý yêu cầu cho các tệp trong thư mục đặc biệt. Khi một yêu cầu được thực hiện cho thư mục đặc biệt đó, bạn thực hiện tra cứu trong từ điển được lưu trong bộ nhớ cache và trả về chuỗi cơ bản.

Một tính năng thực sự thú vị của việc này là tập lệnh được trả về luôn hợp lệ để người dùng sẽ không bao giờ phải yêu cầu bạn cập nhật tập lệnh. Lý do cho điều đó là khi bạn thực hiện thay đổi đối với bất kỳ tệp kịch bản nào, giá trị băm sẽ thay đổi và máy khách sẽ yêu cầu một tập lệnh mới.

Bạn cũng có thể sử dụng tính năng này cho các tệp css. Tôi nhớ làm cho nó cấu hình để bạn có thể tắt kết hợp các tập tin, giảm thiểu các tập tin, hoặc chỉ loại trừ một tập tin từ quá trình này nếu bạn muốn làm một số gỡ lỗi.

Tôi có thể đã bỏ lỡ một số chi tiết, nhưng không khó để thực hiện và hóa ra rất tốt.

Cập nhật: Tôi đã triển khai giải pháp cho MVC và phát hành nó trên nuget và có nguồn lên trên github.

4

bạn đã nghe nói về Combres chưa? hãy truy cập: http://combres.codeplex.com và kiểm tra xem ra

nó tối thiểu tệp CSS và JS của bạn ở thời gian chạy nghĩa là bạn có thể thay đổi bất kỳ tệp nào và tải lên. tất cả những gì bạn cần làm là thêm các tệp u muốn nén vào danh sách trong tệp XML combres và chỉ cần gọi danh sách từ trang/trang chính của bạn.

nếu bạn đang sử dụng VS2010 bạn có thể dễ dàng cài đặt nó trên dự án của bạn bằng NuGet đây là liên kết Combres NuGet: http://combres.codeplex.com/wikipage?title=5-Minute%20Quick%20Start

+1

+1 Linh hoạt và rất dễ sử dụng – Keith

+0

Một trong những triển khai tốt nhất mà tôi đã sử dụng, thư viện tuyệt vời. –

+0

+1 Tốt. Rất dễ sử dụng. Mất khoảng 15 phút để thiết lập trong dự án của tôi. Đơn giản hơn và linh hoạt hơn nhiều tùy chọn khác. – FreeAsInBeer

7

RequestReduce cung cấp một giải pháp thực sự tốt đẹp cho việc kết hợp và rút gọn javascript và css tại thời gian chạy. Nó cũng sẽ cố gắng để sprite hình ảnh nền của bạn. Nó lưu trữ các tập tin được xử lý và phục vụ chúng bằng cách sử dụng tùy chỉnh ETags và tiêu đề tương lai xa. RequestReduce sử dụng bộ lọc phản hồi để chuyển đổi nội dung để không cần mã hoặc cấu hình cho chức năng cơ bản. Nó có thể được cấu hình để làm việc trong một môi trường trang trại và đồng bộ nội dung trên nhiều máy chủ và có thể được cấu hình để trỏ đến một CDN. Nó có thể được tải xuống tại http://www.RequestReduce.com hoặc từ Visual Studio qua Nuget. Nguồn có sẵn tại https://github.com/mwrock/RequestReduce.

+0

Tôi đã thấy câu trả lời này trong một số câu hỏi khác của bạn. Bạn phải có nó sẵn sàng trên đĩa của bạn để sao chép dán nó ở đây: D thư viện đẹp. upvoted .. – rovsen

0

Tôi cần một giải pháp để kết hợp/rút gọn CSS/JS trên ứng dụng web .NET 2.0 và SquishIt và các công cụ khác mà tôi thấy không tương thích với .NET 2.0, tôi đã tạo giải pháp của riêng mình sử dụng cú pháp tương tự như SquishIt nhưng tương thích với .NET 2.0. Vì tôi nghĩ rằng những người khác có thể thấy nó hữu ích tôi đặt nó lên trên Github. Bạn có thể tìm thấy ở đây: https://github.com/AlliterativeAlice/simpleyui

Các vấn đề liên quan