Kết hợp và rút gọn nhiều tệp CSS/JS

Question

Tôi đang cố gắng tối ưu hóa hiệu suất trang web bằng cách hợp nhất và nén tệp CSS và JS. Câu hỏi của tôi là nhiều hơn về các bước (cụ thể) về cách đạt được điều này, với một tình huống thực tế mà tôi đang phải đối mặt (cũng là điển hình trong số các nhà phát triển khác).

tài liệu tham khảo trang của tôi nhiều file JS CSS và như sau:

<!-- 
    It's easier to work on smaller files during development. 
    Hence, the multiple CSS and JS files. 
--> 
<link type="text/css" rel="stylesheet" href="/css/main.css" /> 
<link type="text/css" rel="stylesheet" href="/css/secondary-1.css" /> 
<link type="text/css" rel="stylesheet" href="/css/secondary-2.css" /> 

<script type="text/javascript" src="/scripts/js/main.js"></script> 
<script type="text/javascript" src="/scripts/js/adapter/adapter.js"></script> 
<script type="text/javascript" src="/scripts/js/adapter/title-adapter.js"></script> 

Đối với việc phát hành sản xuất, tôi muốn kết hợp 3 file CSS vào một và rút gọn nó sử dụng ví dụ YUI Compressor. Nhưng sau đó, tôi cần cập nhật tất cả các trang cần 3 tệp này để tham chiếu đến CSS mới được rút gọn. Điều này có vẻ dễ bị lỗi (ví dụ: bạn đang xóa và thêm một số dòng trong nhiều tệp). Bất kỳ cách tiếp cận ít rủi ro nào khác? Vấn đề tương tự đối với các tệp JS.

Answer 1

Tôi đã sử dụng CodeKit để ghép các tệp CSS và JS của mình. Tính năng mà tôi thấy thực sự hữu ích là khả năng kết nối khi lưu tệp; vì nó giám sát các tài sản CSS/JS tương ứng. Khi tôi đã kết hợp chúng đúng cách, ví dụ: tới 1 tệp CSS và 1 JS, tất cả các tệp khác chỉ có thể tham chiếu đến các tệp này 2.

Bạn thậm chí có thể yêu cầu CodeKit thực hiện quá trình nén/nén khi đang di chuyển.

Tuyên bố từ chối trách nhiệm: Tôi không được liên kết theo bất kỳ cách nào với CodeKit. Tôi ngẫu nhiên tìm thấy nó trên web và nó đã phục vụ như một công cụ tuyệt vời trong quá trình phát triển của tôi. Nó cũng đi kèm với bản cập nhật tốt kể từ lần đầu tiên tôi sử dụng nó hơn một năm trước đây.

Answer 2

Kiểm tra minify - nó cho phép bạn kết hợp nhiều tệp js, css thành một chỉ bằng cách xếp chúng vào url, ví dụ:

<script src="/scripts/js/main.js,/scripts/js/adapter/adapter.js"></script> 

Chúng tôi đã sử dụng nó trong nhiều năm và thực hiện công việc tuyệt vời và thực hiện nhanh (không cần chỉnh sửa tệp).

Answer 3

Tôi nghĩ rằng YUI Compressor là tốt nhất có. Nó rút gọn JS và CSS và thậm chí nó còn loại bỏ các câu lệnh console.log mà mọi người sử dụng để gỡ lỗi JavaScript ở mức độ thấp.

Check out how easy it is.

Bạn có thể bắt đầu nó trong một nhiệm vụ kiến ​​và do đó đưa nó vào bài đăng của bạn/trước cam kết móc nếu bạn sử dụng svn/git.

Ngày cập nhật: Ngày nay tôi sử dụng grunt với concat, rút ​​gọn các khoản đóng góp. Bạn có thể sử dụng nó với một watcher để nó tạo ra các file minifed mới trong nền bất cứ khi nào bạn thay đổi nguồn của bạn. Các đóng góp uglify không chỉ dải giao diện điều khiển, nó cũng dải chức năng không sử dụng và tài sản.

Xem this tutorial để có thông tin chi tiết ngắn gọn.

CẬP NHẬT: Ngày nay mọi người quay trở lại từ grunt cho người tiền nhiệm của nó "gulp" và sử dụng npm làm công cụ xây dựng. Đọc trên nó here.

Answer 4

Tôi cần cập nhật tất cả các trang cần 3 tệp này để tham chiếu đến CSS mới được rút gọn.

Trước hết tôi sẽ nói bạn nên có tiêu đề chung. Vì vậy, nó sẽ không cần phải thay đổi tất cả các tiêu đề bất cứ lúc nào bất cứ khi nào cần thiết. Thực hành tốt để có tiêu đề đơn hoặc 2-3. Vì vậy, khi trang của bạn cần bạn có thể thay đổi tiêu đề của bạn. Vì vậy, bất cứ khi nào bạn muốn mở rộng ứng dụng web của bạn, nó sẽ ít rủi ro và tẻ nhạt.

Bạn không đề cập đến môi trường phát triển của mình. Bạn có thể thấy có many compressing tools listed for different environments. Và bạn đang sử dụng công cụ tốt i.e.YUI Compressor.

Answer 5

Tôi không thấy bạn đề cập đến một hệ thống quản lý nội dung (Wordpress, Joomla, Drupal, vv) nhưng nếu bạn đang sử dụng bất kỳ CMS phổ biến nào, tất cả đều có plugin/modules sẵn có (tùy chọn miễn phí). và js.

Sử dụng plugin cung cấp cho bạn khả năng giữ các phiên bản chưa nén có sẵn để chỉnh sửa, sau đó khi thay đổi được thực hiện, plugin sẽ tự động bao gồm các thay đổi của bạn và nén lại tệp. Chỉ cần chắc chắn rằng bạn chọn một plugin mà sẽ cho phép bạn loại trừ các tập tin (chẳng hạn như một tập tin tùy chỉnh js) trong trường hợp nó phá vỡ bất cứ điều gì.

Tôi đã thử trong quá khứ để giữ các tệp này theo cách thủ công và nó luôn biến thành một cơn ác mộng bảo trì. Chúc may mắn, hy vọng điều này đã giúp.

Answer 6

Nếu bạn đang thực hiện bất kỳ quá trình xử lý trước nào trên các tệp mà bạn phân phát, có thể bạn muốn thiết lập một hệ thống xây dựng thích hợp (ví dụ: Makefile). Bằng cách đó, bạn có một số tệp nguồn không trùng lặp và bất cứ khi nào bạn thực hiện thay đổi, bạn chạy 'make' và nó sẽ tự động cập nhật tất cả các tệp được tạo tự động. Nếu đã có sẵn một hệ thống xây dựng, hãy tìm hiểu cách nó hoạt động và sử dụng nó. Nếu không, bạn sẽ cần phải thêm một.

Vì vậy, trước tiên, hãy tìm hiểu cách kết hợp và rút gọn tệp của bạn khỏi dòng lệnh (tài liệu YUICompressor đề cập đến điều này). Chỉ định thư mục cho các nội dung được tạo tự động, tách biệt với nội dung bạn làm việc trên nhưng có thể truy cập được vào máy chủ web và xuất đến đó, ví dụ: gen/scripts/combined.js. Đặt các lệnh bạn đã sử dụng vào Makefile và chạy lại 'make' mỗi lần bạn thực hiện thay đổi và muốn nó có hiệu lực. Sau đó cập nhật tiêu đề trong các tệp khác để trỏ đến tệp kết hợp và rút gọn.

Answer 7

Đối với những người muốn điều gì đó nhẹ hơn và linh hoạt hơn một chút, tôi đã tạo js.sh hôm nay để giải quyết vấn đề này. Đó là một công cụ dòng lệnh đơn giản nhắm vào các tệp JS có thể dễ dàng sửa đổi để quản lý các tệp CSS. Lợi ích:

• Dễ dàng cấu hình để sử dụng bởi nhiều nhà phát triển trên một dự án
• Kết hợp các file JS theo thứ tự quy định tại script_order.txt
• Nén chúng với Compiler Đóng cửa của Google
• Tách JS vào < 25KB khối nếu có thể vì iPhone sẽ không lưu trữ bất kỳ thứ gì lớn hơn 25kb
• Tạo tệp PHP nhỏ với <script> thẻ mà bạn có thể bao gồm khi thích hợp
• Cách sử dụng: js.sh -u yourname

Nó có thể sử dụng một số cải tiến, nhưng nó tốt hơn đối với trường hợp sử dụng của tôi hơn tất cả các giải pháp khác mà tôi đã thấy cho đến nay.

Answer 8

Bước đầu tiên của tối ưu hóa là giảm thiểu tệp. (Tôi khuyên bạn nên GULP để giảm thiểu và tối ưu hóa. Giải pháp đồng hồ đơn giản, cài đặt và tất cả các tệp được nén cùng một lúc. Hỗ trợ tất cả CSS, JS, ít hơn, sass, v.v ...)

HOẶC giải pháp học cũ:

1) Nói chung, như một quá trình tối ưu hóa, tối ưu hóa hiệu suất trang web, hãy thử kết hợp tất cả CSS trong một tập tin và nén tập tin bằng cách sử dụng Compass. Bằng cách đó, nhiều yêu cầu của bạn đến CSS tĩnh sẽ được thay thế bằng một duy nhất.

2) Sự cố của nhiều JS bạn có thể giải quyết bằng cách sử dụng CDN (hoặc Thư viện được lưu trữ trên Google) để yêu cầu đến máy chủ khác không phải của bạn. Cách đó máy chủ không chờ yêu cầu trước đó hoàn thành trước khi gửi tiếp theo.

3) Nếu bạn có JavaScript được lưu trữ cục bộ của riêng mình, hãy giảm thiểu từng tệp bằng cách sử dụng Brackets plugin "Nén JavaScript". Đó là cơ bản một cú nhấp chuột để nén JavsScript. Brackets là trình soạn thảo miễn phí dành cho CSS và JS nhưng có thể được sử dụng cho PHP và các ngôn ngữ khác. Có rất nhiều plugin để chọn cho cả nhà phát triển front-end và back-end. Nói chung "một cú nhấp chuột" để làm tất cả các lệnh (cho đến nay nhiều). Btw, Chân đế thay thế Dreamweaver rất đắt tiền của tôi;)

3) Thử sử dụng các công cụ như Sass, La bàn, less để giảm thiểu CSS của bạn.

Lưu ý: Ngay cả khi không sử dụng SASS trộn hoặc biến CSS của bạn sẽ bị nén (chỉ cần sử dụng CSS thuần túy đơn giản và Compass lệnh "xem" sẽ nén cho bạn).

Tôi hy vọng điều này sẽ hữu ích!

Answer 9

Trong dự án symfony của tôi, tôi làm điều gì đó như thế này

{# layout.html.twig #} 

{% block styles %} 
    {% if app.environment == 'prod' %} 
     <link href="{{ asset('bundles/appmain/min.css') }}" rel="stylesheet" type="text/css" /> 
    {% else %} 
     <link href="{{ asset('bundles/appmain/hello.css') }}" rel="stylesheet" type="text/css" /> 
     <link href="{{ asset('bundles/appmain/world.css') }}" rel="stylesheet" type="text/css" /> 
    {% endif %} 
{% endblock %} 

{# some-view.html.twig #} 

{% extends 'AppMainBundle::layout.html.twig' %} 

{% block styles %} 
    {{ parent() }} 

    {% if app.environment != 'prod' %} 
     <link href="{{ asset('bundles/appsecond/styles.css') }}" rel="stylesheet" type="text/css" /> 
    {% else %} 
{% endblock %} 

Khi phiên bản dev sẵn sàng phục vụ sản xuất, tôi sử dụng this script để kết hợp tất cả các file css và thay thế nội dung của min.css.

Nhưng giải pháp này chỉ hoạt động nếu cùng một tệp css được bao gồm trong tất cả các trang.

Answer 10

Đó là năm 2015 trên đường phố và cách dễ nhất imo đang sử dụng gulp - http://gulpjs.com/. Giảm bớt mã bằng cách sử dụng gulp-uglify cho tập lệnh js và gulp-minify-css cho css rất đơn giản. Gulp chắc chắn là giá trị cố gắng

Answer 11

Bạn có thể sử dụng các mô-đun cssmin nút được xây dựng từ máy nén YUI nổi tiếng

$ npm -g i cosmiC# install 

# Usage 
var puts = require('util').puts, 
fs = require('fs'), 
cssmin = require('./cssmin'); 
var css = fs.readFileSync("/Any/Random/CSS/File.css", encoding='utf8'); 
var min = cssmin(css); 
puts(min); 

Answer 12

Mẹo cho các cửa sổ người dùng, nếu bạn chỉ muốn concat file:

mở cmd tại nơi mong muốn, và chỉ cần ống tập tin của bạn vào một tập tin sử dụng "loại"

ví dụ:

type .\scripts\*.js >> .\combined.js 

Nếu thứ tự của kịch bản của bạn là rất quan trọng, bạn phải gõ một cách rõ ràng các tập tin, theo thứ tự mong muốn.

tôi sử dụng này trong một file bat cho góc dự án bootstrap/my

del combos.js 

type .\lib\jquery.min.js >> .\combos.js 
type .\lib\bootstrap.min.js >> .\combos.js 
type .\lib\Angular\angular.min.js >> .\combos.js 
type .\lib\Angular\angular-route.min.js >> .\combos.js 
type .\lib\Angular\angular-sanitize.min.js >> .\combos.js 

type .\app.js >> .\combos.js 
type .\services\*.js >> .\combos.js 
type .\controllers\*.js >> .\combos.js 

Answer 13

Tất cả các tiện ích nhanh hơn được tìm thấy ở đây

http://www.code-stuff.net 
http://www.code-stuff.net/HttpUtility 
http://www.code-stuff.net/HttpUtility/minifyCSS 
http://www.code-stuff.net/HttpUtility/stringify_json