Kết hợp và giảm thiểu nhiều tệp CSS / JS

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 các 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ể) làm thế nào để đạt được điều này, dựa trên một tình huống thực tế mà tôi đang phải đối mặt (mặc dù vậy, cũng nên là điển hình trong số các nhà phát triển khác).

Trang của tôi tham chiếu đến một số tệp CSS và JS 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 bản phát hành sản xuất, tôi muốn kết hợp 3 tệp CSS thành một và thu nhỏ nó bằng cách sử dụng 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ễ xảy ra 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 nào khác ít rủi ro hơn? Vấn đề tương tự đối với các tệp JS.

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 một 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à nó hoạt động rất tốt và hoạt động nhanh chóng (không cần chỉnh sửa tệp).

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

Kiểm tra xem nó dễ dàng như thế nào .

Bạn có thể bắt đầu nó trong một nhiệm vụ kiến ​​và do đó đưa nó vào các hook post / pre-commit nếu bạn sử dụng svn / git.

CẬP NHẬT: Ngày nay tôi sử dụng grunt với các đóng góp concat, minify & uglify. Bạn có thể sử dụng nó với một trình theo dõi để nó tạo các tệp thu nhỏ mới trong nền bất cứ khi nào bạn thay đổi nguồn của mình. Đóng góp không phù hợp không chỉ loại bỏ các bản ghi bảng điều khiển mà còn loại bỏ các chức năng và thuộc tính không sử dụng.

Xem hướng dẫn này để có cái nhìn sâu sắc

CẬP NHẬT: Ngày nay, mọi người đã lùi lại so với "gulp" tiền nhiệm của nó và sử dụng npm như một công cụ xây dựng. Đọc lên nó ở đây .

CẬP NHẬT: Vì vậy, bây giờ người ta sử dụng sợi để chạy npm. Không có thắc mắc; biểu tượng sợi là một con mèo. Hầu hết các khung công tác hiện tại sử dụng webpack để gói các tài nguyên thành các gói, sau đó cũng xử lý việc thu nhỏ .

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.

Đầu tiên tôi muốn nói rằng 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ứ khi nào cần thiết. Bạn nên có một tiêu đề duy nhất 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 mình. Vì vậy, bất cứ khi nào bạn muốn mở rộng ứng dụng web của mình, nó sẽ ít rủi ro và tẻ nhạt hơn.

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ó nhiều công cụ nén được liệt kê cho các môi trường khác nhau . Và bạn đang sử dụng công cụ tốt ieYUI Compressor.

Tôi đã kết thúc bằng cách sử dụng CodeKit để nối 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 ghép nối khi lưu tệp; vì nó giám sát các nội dung CSS / JS tương ứng. Khi tôi đã kết hợp chúng đúng cách, ví dụ thành 1 tệp CSS và 1 tệp JS, tất cả các tệp khác chỉ có thể tham chiếu đến 2 tệp này.

Bạn thậm chí có thể yêu cầu CodeKit thực hiện việc thu nhỏ / nén nhanh chóng.

Tuyên bố từ chối trách nhiệm: Tôi không 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ó đã trở thà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 các 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.

Mẹo nhanh cho người dùng windows, nếu bạn chỉ muốn nối các tệp:

Mở một cmd ở vị trí mong muốn và chỉ cần chuyển các tệp của bạn vào một tệp bằng " type "

Ví dụ:

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

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

Tôi sử dụng nó trong một tệp dơi cho các dự án angle / bootstrap của mình

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

Năm 2015 đã thành công và cách dễ nhất mà imo sử dụng gulp - http://gulpjs.com/ . Giảm thiểu 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 đáng để thử

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

Việc sử dụng plugin cung cấp cho bạn khả năng giữ các phiên bản không nén có sẵn để chỉnh sửa, sau đó khi các 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 đảm bảo rằng bạn chọn một plugin cho phép bạn loại trừ các tệp (chẳng hạn như tệp js tùy chỉnh) trong trường hợp nó bị hỏng bất kỳ thứ gì.

Trước đây, tôi đã cố gắng duy trì các tệp này theo cách thủ công và nó luôn biến thành cơn ác mộng bảo trì. Chúc may mắn, hy vọng điều này có ích.

Đối với những người muốn thứ gì đó nhẹ 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 mục tiêu đến các tệp JS có thể dễ dàng sửa đổi để xử lý các tệp CSS. Những lợi ích:

• Dễ dàng cấu hình để sử dụng bởi nhiều nhà phát triển trong một dự án
• Kết hợp các tệp JS theo thứ tự được chỉ định trong script_order.txt
• Nén chúng bằng Trình biên dịch đóng cửa của Google
• Chia JS thành các phần <25kb nếu có thể vì iPhone sẽ không lưu vào bộ nhớ cache bất kỳ thứ gì lớn hơn 25kb
• Tạo một tệp PHP nhỏ với <script>các thẻ mà bạn có thể đưa vào khi thích hợp
• 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 cho 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.

Bước đầu tiên của tối ưu hóa là thu nhỏ tệp. (Tôi thực sự khuyên dùng GULP để giảm thiểu và tối ưu hóa. Giải pháp xem đơ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, less, sass, v.v.)

HOẶC Giải pháp cũ:

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

2) Sự cố của nhiều JS mà 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) để các yêu cầu chuyển đến máy chủ khác không phải của bạn. Bằng cách đó, máy chủ không đợi yêu cầu trước đó hoàn thành trước khi gửi tiếp theo.

3) Nếu bạn có hạn chế tối đa riêng lưu trữ cục bộ JavaScript của bạn mỗi tập tin bằng cách sử dụng dấu ngoặc plugin "Compress JavaScript". Về cơ bản, nó là một cú nhấp chuột để nén JavsScript. Brackets là trình soạn thảo miễn phí được tạo 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 để lựa chọn dành cho cả nhà phát triển front-end và back-end. Nói chung "một cú nhấp chuột" để thực hiện tất cả các lệnh này (cho đến nay là nhiều). Btw, Brackets đã thay thế chiếc Dreamweaver rất đắt tiền của tôi;)

3) Hãy thử sử dụng các công cụ như Sass , Compass, less để giảm thiểu CSS của bạn.

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

Tôi hi vọng cái này giúp được!

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, bạn có thể 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 bị 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ẽ 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 hoạt động và sử dụng nó. Nếu không, bạn sẽ cần thêm một cái.

Vì vậy, trước tiên, hãy tìm cách kết hợp và rút gọn các tệp của bạn từ dòng lệnh (tài liệu YUICompressor bao gồm điều này). Chỉ định một thư mục cho nội dung được tạo tự động, tách biệt với nội dung bạn làm việc nhưng có thể truy cập vào máy chủ web và xuất ra đó, ví dụ: gen / scripts / merge.js. Đặt các lệnh bạn đã sử dụng vào Makefile và chạy lại 'make' mỗi khi 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 các tệp được kết hợp và rút gọn.

Trong dự án symfony của tôi, tôi làm 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 dành cho nhà phát triển đã sẵn sàng để sản xuất, tôi sử dụng tập lệnh này để kết hợp tất cả các tệp 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ác tệp css giống nhau được bao gồm trong tất cả các trang.

Bạn có thể sử dụng mô-đun nút cssmin được xây dựng từ trình 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);

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