Với sự kết hợp này, tôi đã giải quyết và tối ưu hóa CSS đến mức tối đa.
Sau khi định cấu hình Grunt, cài đặt các plugin sau:
- grunt-postcss
- grunt-contrib-cssmin
- grunt-cssnano
- clean-css
- postcss-flexbugs-fixes
- Autoprefixer
Gruntfile.js
Tạo nhiệm vụ để thu nhỏ, hợp nhất các bộ chọn & thuộc tính, loại bỏ các bản sao, v.v.
cssmin: {
options: {
advanced: true,
mergeAdjacent: true,
removeDuplicates: true,
shorthandCompacting: false
},
files: {
src: 'your/path/style.css',
dest: 'your/path/style.min.css'
}
},
Sau khi tạo một tác vụ để phân tích CSS, thêm tiền tố và tối ưu hóa thêm.
postcss: {
options: {
processors: [
require['postcss-flexbugs-fixes'],
require['autoprefixer'][{
browsers: [
'last 2 versions',
'Edge >= 12',
'Explorer >= 9']
}],
require['cssnano']
],
map: false,
},
files: {
src: 'your/path/style.min.css',
dest: 'your/path/style.min.css'
}
}
Đăng ký một lối tắt vào các nhiệm vụ
grunt.registerTask['css', ['cssmin', 'postcss']];
Và Voila!!
grunt css
Kết hợp JavaScript và CSS bên ngoài
Cập nhật vào ngày 4 tháng 10 năm 2018
Trong nhiều trường hợp, các trang web chứa nhiều tệp JavaScript và CSS phải được tìm nạp từ máy chủ để tải đầy đủ trang web. Tuy nhiên, quá trình tải xuống từng tệp này, mất nhiều thời gian hơn vì các yêu cầu bổ sung phải được thực hiện, do đó làm tăng độ trễ. Bài viết này sẽ tập trung vào cách kết hợp JavaScript và CSS bên ngoài.additional requests must be made which consequently increases latency. This article will focus on how to combine external JavaScript and CSS.
Tại sao kết hợp các tệp JavaScript và CSS bên ngoài?
Kết hợp các tệp JavaScript và CSS bên ngoài của bạn có lợi vì một vài lý do. Trước hết, số lượng yêu cầu có thể được giảm đáng kể khi trang web của bạn sử dụng nhiều tệp CSS và JS để hiển thị trang. Ví dụ: trang của bạn tải 5 tệp CSS bên ngoài và 5 tệp JS bên ngoài, kết hợp JavaScript và CSS của bạn thành một tệp riêng biệt, mỗi tệp sẽ dẫn đến 8 yêu cầu ít hơn.
Ngoài ra, tất cả các tệp CSS đều bị chặn kết xuất, điều đó có nghĩa là các tệp CSS càng được tải, điều này càng có khả năng làm gián đoạn đường dẫn quan trọng của trang của bạn. Có nhiều tệp JavaScript cũng có thể gây rắc rối cho việc phân tích cú pháp tài liệu HTML của bạn với điều kiện chúng không bị hoãn lại đúng cách. Đọc bài viết của chúng tôi để tìm hiểu thêm về cách trì hoãn phân tích cú pháp JavaScript.render blocking which means that the more CSS files are loaded, the more likely this will interrupt your page's critical path. Having multiple JavaScript files can also be troublesome to the parsing of your HTML document given they are not deferred properly. Read our article to learn more about how to defer parsing of JavaScript.
Làm thế nào để kết hợp các tệp JavaScript và CSS bên ngoài?
Phương pháp được sử dụng để kết hợp JavaScript và CSS bên ngoài về cơ bản là giống nhau cho cả hai loại tệp. Tuy nhiên, có một vài điều cần xem xét cho mỗi người, được giải thích trong phần dưới đây.
Kết hợp JavaScript bên ngoài
Khi kết hợp JavaScript, nên kết hợp các tệp hiện tại của bạn thành 2 tệp chính. Một tệp phải chứa JavaScript cần thiết để hiển thị trang, trong khi tệp khác phải chứa tất cả các JS khác, từ đó nên được hoãn lại. Điều này sẽ cho phép bạn tải trang web nhanh hơn nhiều vì trình duyệt không phải tải xuống và thực hiện các JS không quan trọng trong khi nó đang cố gắng tải nội dung trên gấp.2 main files. One file should contain the JavaScript needed in order to render the page, while the other file should contain all other JS which in turn should be deferred. This will allow you to load the web page much more quickly as the browser does not have to download and execute non-critical JS while it is trying to load above-the-fold content.
Đối với cách kết hợp các tệp JS, điều này có thể được thực hiện bằng cách sao chép / dán mã từ một tệp này sang tệp khác. Ví dụ: một khi mã từ Filea đã được sao chép vào FileB, Filea có thể được xóa cùng với cuộc gọi cho tệp này trong tài liệu HTML.
Kết hợp CSS bên ngoài
Để kết hợp các tệp CSS bên ngoài, bạn chỉ cần sao chép / dán tất cả mã CSS của mình vào một tệp chính. Do đó, tất cả các nội dung từ bên trong các tệp CSS khác hiện sẽ nằm trong tệp chính cho phép trình duyệt chỉ thực hiện một yêu cầu cho tệp CSS thay vì nhiều. Tương tự như JavaScript, một khi mã từ các tệp bên ngoài đã được chuyển sang tệp CSS chính, các cuộc gọi cho các tệp CSS cũ sẽ được xóa khỏi tài liệu HTML.make one request for a CSS file instead of multiple. Similar to JavaScript, once the code from external files has been moved to the main CSS file, the calls for the old CSS files should be removed from the HTML document.
Ngoài ra, tránh sử dụng @Import để nhập tất cả các tệp CSS bên ngoài của bạn vào một tệp chính. Phương pháp này có thể giới thiệu sự chậm trễ bổ sung vì nó không thể tải xuống nhiều bảng kiểu song song. Thay vào đó, hãy sử dụng phương thức được mô tả ở trên, kết hợp vật lý CSS từ một tệp này sang tệp khác, thay vì chỉ nhập nhiều tệp vào một.
HTTP/2 và kết hợp các tệp bên ngoài
Kết hợp các tệp JavaScript và CSS của bạn là một phương pháp hữu ích để giảm các yêu cầu HTTP cũng như độ trễ nếu bạn đang cung cấp chúng thông qua giao thức HTTP/1.x. Tuy nhiên, với việc tạo ra và áp dụng rộng lớn HTTP/2, việc thực hiện khuyến nghị này thực sự có thể gây hại cho khả năng cung cấp tài sản của bạn. Vì HTTP/2 có thể xử lý các bản tải xuống song song, nên nó không bị hạn chế về các yêu cầu HTTP như HTTP/1.x là.harm the deliverability of your assets. Since HTTP/2 can handle parallelized downloads, it is not restricted in terms of HTTP requests such as HTTP/1.x was.
Nếu cuối cùng bạn kết hợp tất cả các tệp JS và CSS thành một tệp và một yêu cầu được thực hiện cho một thành phần trong tệp đó, nó chỉ có một tùy chọn - để yêu cầu tệp lớn duy nhất. Tuy nhiên, nếu các tệp không được nối và yêu cầu được thực hiện cho một thành phần trong một tệp duy nhất, thời gian tải xuống sẽ ngắn hơn nhiều vì tệp không phải là một phần của tệp "chủ" lớn.
Với HTTP/2, điều quan trọng là tập trung nhiều hơn vào bộ nhớ đệm các tệp thông qua CDN, tận dụng bộ nhớ đệm trình duyệt, v.v.focus more heavily on the caching of files via a CDN, leveraging browser caching, etc. Concatenating JS and CSS files is no longer best practice with this new protocol.
Các mẹo tối ưu hóa JavaScript và CSS khác
Kết hợp JavaScript và CSS bên ngoài là một trong những khuyến nghị để giúp cải thiện hiệu suất trang tổng thể bằng cách tối ưu hóa hai loại tệp này nếu bạn vẫn đang sử dụng HTTP/1.x. Để biết thêm các đề xuất liên quan đến việc cải thiện hiệu suất của JavaScript và CSS của bạn, hãy đọc các bài viết cách làm khác của chúng tôi dưới đây.improving the performance of your JavaScript and CSS read our other how-to articles below.