Xáo trộn các lớp css

Đường dẫn nội dung cung cấp một khung để nối và thu nhỏ hoặc nén nội dung JavaScript và CSS. Nó cũng bổ sung khả năng viết các nội dung này bằng các ngôn ngữ và bộ tiền xử lý khác như CoffeeScript, Sass và ERB. Nó cho phép nội dung trong ứng dụng của bạn được tự động kết hợp với nội dung từ các loại đá quý khác

Đường dẫn nội dung được triển khai bởi đá quý sprockets-rails và được bật theo mặc định. Bạn có thể tắt nó trong khi tạo ứng dụng mới bằng cách chuyển tùy chọn

//= require home
//= require moovinator
//= require slider
//= require phonebox

8

$ rails new appname --skip-asset-pipeline

Bản sao

Rails có thể dễ dàng làm việc với Sass bằng cách thêm đá quý

//= require home
//= require moovinator
//= require slider
//= require phonebox

9 vào

app/assets/javascripts/sub/something.js

0 của bạn, được Sprockets sử dụng để biên dịch Sass

Để đặt các phương pháp nén nội dung, hãy đặt các tùy chọn cấu hình thích hợp trong

app/assets/javascripts/sub/something.js

1 - cho CSS và cho JavaScript của bạn

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

Bản sao

Đá quý

//= require home
//= require moovinator
//= require slider
//= require phonebox

9 được tự động sử dụng để nén CSS nếu được bao gồm trong

app/assets/javascripts/sub/something.js

0 và không có tùy chọn

app/assets/javascripts/sub/something.js

2 nào được đặt

Tính năng đầu tiên của quy trình là nối các nội dung, điều này có thể làm giảm số lượng yêu cầu mà trình duyệt thực hiện để hiển thị trang web. Các trình duyệt web bị giới hạn về số lượng yêu cầu mà chúng có thể thực hiện song song, do đó, ít yêu cầu hơn có nghĩa là ứng dụng của bạn tải nhanh hơn

Sprockets nối tất cả các tệp JavaScript thành một tệp

app/assets/javascripts/sub/something.js

7 chính và tất cả các tệp CSS thành một tệp

app/assets/javascripts/sub/something.js

8 chính. Như bạn sẽ tìm hiểu sau trong hướng dẫn này, bạn có thể tùy chỉnh chiến lược này để nhóm các tệp theo bất kỳ cách nào bạn muốn. Trong quá trình sản xuất, Rails chèn dấu vân tay SHA256 vào mỗi tên tệp để tệp được trình duyệt web lưu vào bộ đệm. Bạn có thể vô hiệu hóa bộ đệm bằng cách thay đổi dấu vân tay này, điều này tự động xảy ra bất cứ khi nào bạn thay đổi nội dung tệp

Tính năng thứ hai của quy trình nội dung là thu nhỏ hoặc nén nội dung. Đối với các tệp CSS, điều này được thực hiện bằng cách xóa khoảng trắng và nhận xét. Đối với JavaScript, có thể áp dụng các quy trình phức tạp hơn. Bạn có thể chọn từ một tập hợp các tùy chọn tích hợp sẵn hoặc chỉ định tùy chọn của riêng bạn

Tính năng thứ ba của đường dẫn nội dung là nó cho phép mã hóa nội dung thông qua ngôn ngữ cấp cao hơn, với khả năng biên dịch trước xuống nội dung thực tế. Các ngôn ngữ được hỗ trợ bao gồm Sass cho CSS, CoffeeScript cho JavaScript và ERB cho cả hai theo mặc định

Lấy dấu vân tay là một kỹ thuật làm cho tên của tệp phụ thuộc vào nội dung của tệp. Khi nội dung tệp thay đổi thì tên tệp cũng thay đổi. Đối với nội dung tĩnh hoặc ít thay đổi, điều này cung cấp một cách dễ dàng để biết liệu hai phiên bản của tệp có giống nhau hay không, thậm chí trên các máy chủ hoặc ngày triển khai khác nhau

Khi tên tệp là duy nhất và dựa trên nội dung của nó, các tiêu đề HTTP có thể được đặt để khuyến khích lưu vào bộ nhớ đệm ở mọi nơi (cho dù tại CDN, tại ISP, trong thiết bị mạng hoặc trong trình duyệt web) để giữ bản sao nội dung của riêng chúng. Khi nội dung được cập nhật, dấu vân tay sẽ thay đổi. Điều này sẽ khiến các máy khách từ xa yêu cầu một bản sao mới của nội dung. Điều này thường được gọi là phá bộ nhớ cache

Kỹ thuật mà Sprockets sử dụng để lấy dấu vân tay là chèn một hàm băm của nội dung vào tên, thường là ở cuối. Ví dụ: tệp CSS

app/assets/javascripts/sub/something.js

9

$ rails new appname --skip-asset-pipeline

2Bản sao

Đây là chiến lược được đường ống tài sản Rails áp dụng

Chiến lược cũ của Rails là nối chuỗi truy vấn dựa trên ngày vào mọi nội dung được liên kết với trình trợ giúp tích hợp. Trong nguồn, mã được tạo trông như thế này

$ rails new appname --skip-asset-pipeline

3Bản sao

Chiến lược chuỗi truy vấn có một số nhược điểm

1. Không phải tất cả các bộ nhớ cache sẽ lưu nội dung bộ nhớ cache một cách đáng tin cậy trong đó tên tệp chỉ khác nhau bởi các tham số truy vấn

   Steve Souders khuyến nghị, ". tránh một chuỗi truy vấn cho các tài nguyên có thể lưu trong bộ nhớ cache". Anh ấy thấy rằng trong trường hợp này, 5-20% yêu cầu sẽ không được lưu vào bộ đệm. Các chuỗi truy vấn nói riêng hoàn toàn không hoạt động với một số CDN do vô hiệu hóa bộ đệm

2. Tên tệp có thể thay đổi giữa các nút trong môi trường nhiều máy chủ

   Chuỗi truy vấn mặc định trong Rails 2. x dựa trên thời gian sửa đổi của tệp. Khi nội dung được triển khai cho một cụm, không có gì đảm bảo rằng các dấu thời gian sẽ giống nhau, dẫn đến các giá trị khác nhau được sử dụng tùy thuộc vào máy chủ nào xử lý yêu cầu

3. Quá nhiều vô hiệu bộ nhớ cache

   Khi các nội dung tĩnh được triển khai với mỗi lần phát hành mã mới, mtime (thời gian sửa đổi lần cuối) của tất cả các tệp này sẽ thay đổi, buộc tất cả các máy khách từ xa phải tìm nạp lại chúng, ngay cả khi nội dung của các nội dung đó không thay đổi

Lấy dấu vân tay khắc phục những sự cố này bằng cách tránh các chuỗi truy vấn và bằng cách đảm bảo rằng tên tệp nhất quán dựa trên nội dung của chúng

Vân tay được bật theo mặc định cho cả môi trường phát triển và sản xuất. Bạn có thể bật hoặc tắt nó trong cấu hình của mình thông qua tùy chọn

đọc thêm

Trong các phiên bản trước của Rails, tất cả nội dung được đặt trong các thư mục con của

$ rails new appname --skip-asset-pipeline

41, chẳng hạn như

$ rails new appname --skip-asset-pipeline

42,

$ rails new appname --skip-asset-pipeline

43 và

$ rails new appname --skip-asset-pipeline

44. Với quy trình nội dung, vị trí ưu tiên cho các nội dung này hiện là thư mục

$ rails new appname --skip-asset-pipeline

45. Các tệp trong thư mục này được phục vụ bởi phần mềm trung gian Sprockets

Nội dung vẫn có thể được đặt trong hệ thống phân cấp

$ rails new appname --skip-asset-pipeline

41. Bất kỳ nội dung nào trong

$ rails new appname --skip-asset-pipeline

41 sẽ được ứng dụng hoặc máy chủ web cung cấp dưới dạng tệp tĩnh khi được đặt thành true. Bạn nên sử dụng

$ rails new appname --skip-asset-pipeline

45 cho các tệp phải trải qua một số quá trình tiền xử lý trước khi chúng được phân phối

Trong sản xuất, Rails biên dịch trước các tệp này thành

//= require home
//= require moovinator
//= require slider
//= require phonebox

20 theo mặc định. Các bản sao được biên dịch trước sau đó được máy chủ web phục vụ dưới dạng nội dung tĩnh. Các tệp trong

$ rails new appname --skip-asset-pipeline

45 không bao giờ được phục vụ trực tiếp trong quá trình sản xuất

Khi bạn tạo giàn giáo hoặc bộ điều khiển, Rails cũng tạo tệp Cascading Style Sheet (hoặc tệp SCSS nếu

//= require home
//= require moovinator
//= require slider
//= require phonebox

22 nằm trong

app/assets/javascripts/sub/something.js

0) cho bộ điều khiển đó. Ngoài ra, khi tạo giàn giáo, Rails tạo tệp

//= require home
//= require moovinator
//= require slider
//= require phonebox

24 (hoặc

//= require home
//= require moovinator
//= require slider
//= require phonebox

25 nếu

//= require home
//= require moovinator
//= require slider
//= require phonebox

22 nằm trong tệp

app/assets/javascripts/sub/something.js

0. )

Ví dụ: nếu bạn tạo một

//= require home
//= require moovinator
//= require slider
//= require phonebox

28, Rails cũng sẽ thêm một tệp mới tại

//= require home
//= require moovinator
//= require slider
//= require phonebox

29. Theo mặc định, các tệp này sẽ sẵn sàng để ứng dụng của bạn sử dụng ngay lập tức bằng cách sử dụng chỉ thị

app/assets/javascripts/sub/something.js

20. Xem để biết thêm chi tiết về require_tree

Bạn cũng có thể chọn chỉ bao gồm các biểu định kiểu cụ thể của bộ điều khiển và các tệp JavaScript trong các bộ điều khiển tương ứng của chúng bằng cách sử dụng thông tin sau

app/assets/javascripts/sub/something.js

21 hoặc

app/assets/javascripts/sub/something.js

22

Khi thực hiện việc này, đảm bảo bạn không sử dụng chỉ thị

app/assets/javascripts/sub/something.js

20, vì điều đó sẽ dẫn đến việc tài sản của bạn được đưa vào nhiều lần

Khi sử dụng tính năng biên dịch trước nội dung, bạn sẽ cần đảm bảo rằng nội dung bộ điều khiển của bạn sẽ được biên dịch trước khi tải chúng trên cơ sở mỗi trang. Theo mặc định, các tệp

app/assets/javascripts/sub/something.js

24 và

app/assets/javascripts/sub/something.js

25 sẽ không được biên dịch trước. Xem để biết thêm thông tin về cách hoạt động của tiền biên dịch

Bạn phải có thời gian chạy được hỗ trợ bởi ExecJS để sử dụng CoffeeScript. Nếu bạn đang sử dụng macOS hoặc Windows, thì bạn đã cài đặt thời gian chạy JavaScript trong hệ điều hành của mình. Kiểm tra tài liệu để biết tất cả thời gian chạy JavaScript được hỗ trợ

Nội dung đường ống có thể được đặt bên trong một ứng dụng ở một trong ba vị trí.

$ rails new appname --skip-asset-pipeline

45,

app/assets/javascripts/sub/something.js

27 hoặc

app/assets/javascripts/sub/something.js

28

• $ rails new appname --skip-asset-pipeline
  

  45 dành cho các nội dung thuộc sở hữu của ứng dụng, chẳng hạn như hình ảnh tùy chỉnh, tệp JavaScript hoặc biểu định kiểu

• app/assets/javascripts/sub/something.js
  

  27 dành cho mã thư viện của riêng bạn không thực sự phù hợp với phạm vi của ứng dụng hoặc những thư viện được chia sẻ giữa các ứng dụng

• app/assets/javascripts/sub/something.js
  

  28 dành cho các nội dung thuộc sở hữu của các thực thể bên ngoài, chẳng hạn như mã cho plugin JavaScript và khung CSS. Hãy nhớ rằng mã của bên thứ ba có tham chiếu đến các tệp khác cũng được xử lý bởi Đường ống nội dung (hình ảnh, biểu định kiểu, v.v. ), sẽ cần phải được viết lại để sử dụng những người trợ giúp như

  config.assets.css_compressor = :yui
  config.assets.js_compressor = :terser
  

  02

Khi một tệp được tham chiếu từ tệp kê khai hoặc trình trợ giúp, Sprockets sẽ tìm kiếm ba vị trí nội dung mặc định cho tệp đó

Các vị trí mặc định là. các thư mục

$ rails new appname --skip-asset-pipeline

42,

$ rails new appname --skip-asset-pipeline

43 và

$ rails new appname --skip-asset-pipeline

44 trong thư mục

$ rails new appname --skip-asset-pipeline

45, nhưng các thư mục con này không đặc biệt - mọi đường dẫn trong

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

07 sẽ được tìm kiếm

Ví dụ, những tập tin này

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

0Bản sao

sẽ được tham chiếu trong một bảng kê khai như thế này

//= require home
//= require moovinator
//= require slider
//= require phonebox

Bản sao

Nội dung bên trong thư mục con cũng có thể được truy cập

app/assets/javascripts/sub/something.js

Bản sao

được tham chiếu như

$ rails new appname --skip-asset-pipeline

4Bản sao

Bạn có thể xem đường dẫn tìm kiếm bằng cách kiểm tra trong Rails console

Bên cạnh các đường dẫn

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

07 tiêu chuẩn, các đường dẫn bổ sung (đủ điều kiện) có thể được thêm vào đường dẫn trong

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

10. Ví dụ

//= require home
//= require moovinator
//= require slider
//= require phonebox

2Bản sao

Các đường dẫn được duyệt theo thứ tự chúng xuất hiện trong đường dẫn tìm kiếm. Theo mặc định, điều này có nghĩa là các tệp trong

$ rails new appname --skip-asset-pipeline

45 được ưu tiên và sẽ che dấu các đường dẫn tương ứng trong

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

12 và

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

13

Điều quan trọng cần lưu ý là các tệp bạn muốn tham chiếu bên ngoài tệp kê khai phải được thêm vào mảng tiền biên dịch nếu không chúng sẽ không có sẵn trong môi trường sản xuất

Sprockets sử dụng các tệp có tên

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

14 (với các phần mở rộng có liên quan) cho mục đích đặc biệt

Ví dụ: nếu bạn có một thư viện jQuery với nhiều mô-đun, được lưu trữ trong

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

15, thì tệp

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

16 sẽ đóng vai trò là tệp kê khai cho tất cả các tệp trong thư viện này. Tệp này có thể bao gồm danh sách tất cả các tệp được yêu cầu theo thứ tự hoặc một chỉ thị

app/assets/javascripts/sub/something.js

20 đơn giản

Toàn bộ thư viện có thể được truy cập trong bảng kê khai ứng dụng như vậy

app/assets/javascripts/sub/something.js

2Bản sao

Điều này đơn giản hóa việc bảo trì và giữ mọi thứ sạch sẽ bằng cách cho phép mã liên quan được nhóm lại trước khi đưa vào nơi khác

Sprockets không thêm bất kỳ phương pháp mới nào để truy cập nội dung của bạn - bạn vẫn sử dụng

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

18 và

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

19 quen thuộc

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

0Bản sao

Nếu sử dụng đá quý turbolinks, được bao gồm theo mặc định trong Rails, thì hãy bao gồm tùy chọn 'data-turbo-track' để Turbo kiểm tra xem nội dung đã được cập nhật chưa và tải nội dung đó vào trang

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

1Bản sao

Ở chế độ xem thông thường, bạn có thể truy cập hình ảnh trong thư mục

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

20 như thế này

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

2Bản sao

Với điều kiện là đường dẫn được bật trong ứng dụng của bạn (và không bị tắt trong bối cảnh môi trường hiện tại), tệp này được cung cấp bởi Sprockets. Nếu một tệp tồn tại tại

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

21 thì tệp đó được phục vụ bởi máy chủ web

Ngoài ra, yêu cầu đối với tệp có hàm băm SHA256, chẳng hạn như

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

22, được xử lý theo cách tương tự. Cách các giá trị băm này được tạo sẽ được trình bày trong phần sau của hướng dẫn này

Sprockets cũng sẽ xem qua các đường dẫn được chỉ định trong , bao gồm các đường dẫn ứng dụng tiêu chuẩn và bất kỳ đường dẫn nào được thêm vào bởi các công cụ Rails

Hình ảnh cũng có thể được tổ chức thành các thư mục con nếu được yêu cầu và sau đó có thể được truy cập bằng cách chỉ định tên thư mục trong thẻ

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

3Bản sao

Nếu bạn đang biên dịch trước nội dung của mình (xem bên dưới), việc liên kết với nội dung không tồn tại sẽ đưa ra một ngoại lệ trong trang gọi điện. Điều này bao gồm liên kết đến một chuỗi trống. Do đó, hãy cẩn thận khi sử dụng

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

24 và những người trợ giúp khác với dữ liệu do người dùng cung cấp

Quy trình nội dung tự động đánh giá ERB. Điều này có nghĩa là nếu bạn thêm tiện ích mở rộng

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

25 vào nội dung CSS (ví dụ:

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

26), ​​thì các tiện ích trợ giúp như

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

02 sẽ có sẵn trong quy tắc CSS của bạn

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

4Bản sao

Điều này viết đường dẫn đến nội dung cụ thể được tham chiếu. Trong ví dụ này, sẽ hợp lý nếu có một hình ảnh trong một trong các đường dẫn tải nội dung, chẳng hạn như

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

28, sẽ được tham chiếu tại đây. Nếu hình ảnh này đã có sẵn trong

//= require home
//= require moovinator
//= require slider
//= require phonebox

20 dưới dạng tệp có dấu vân tay, thì đường dẫn đó được tham chiếu

Nếu bạn muốn sử dụng URI dữ liệu - phương pháp nhúng dữ liệu hình ảnh trực tiếp vào tệp CSS - bạn có thể sử dụng trình trợ giúp

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

30

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

5Bản sao

Thao tác này sẽ chèn URI dữ liệu được định dạng chính xác vào nguồn CSS

Lưu ý rằng thẻ đóng không được theo kiểu

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

31

Khi sử dụng đường dẫn nội dung, đường dẫn đến nội dung phải được viết lại và

//= require home
//= require moovinator
//= require slider
//= require phonebox

22 cung cấp trình trợ giúp

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

33 và

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

34 (được gạch nối bằng Sass, được gạch dưới bằng Ruby) cho các loại nội dung sau. hình ảnh, phông chữ, video, âm thanh, JavaScript và biểu định kiểu

• config.assets.css_compressor = :yui
  config.assets.js_compressor = :terser
  

  35 trả về

  config.assets.css_compressor = :yui
  config.assets.js_compressor = :terser
  

  36

• config.assets.css_compressor = :yui
  config.assets.js_compressor = :terser
  

  37 trả về

  config.assets.css_compressor = :yui
  config.assets.js_compressor = :terser
  

  38

Hình thức chung hơn cũng có thể được sử dụng

• config.assets.css_compressor = :yui
  config.assets.js_compressor = :terser
  

  39 trả về

  config.assets.css_compressor = :yui
  config.assets.js_compressor = :terser
  

  36

• config.assets.css_compressor = :yui
  config.assets.js_compressor = :terser
  

  41 trả về

  config.assets.css_compressor = :yui
  config.assets.js_compressor = :terser
  

  38

Nếu bạn thêm tiện ích mở rộng

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

25 vào nội dung JavaScript, biến nó thành thứ gì đó chẳng hạn như

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

44, thì bạn có thể sử dụng trình trợ giúp

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

02 trong mã JavaScript của mình

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

6Bản sao

Điều này viết đường dẫn đến nội dung cụ thể được tham chiếu

Sprockets sử dụng tệp kê khai để xác định nội dung nào sẽ bao gồm và phân phát. Các tệp kê khai này chứa các chỉ thị - hướng dẫn cho Sprockets biết tệp nào cần yêu cầu để tạo một tệp CSS hoặc JavaScript. Với các lệnh này, Sprockets tải các tệp được chỉ định, xử lý chúng nếu cần, nối chúng thành một tệp duy nhất và sau đó nén chúng (dựa trên giá trị của

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

46). Bằng cách phục vụ một tệp thay vì nhiều tệp, thời gian tải trang có thể giảm đáng kể do trình duyệt thực hiện ít yêu cầu hơn. Nén cũng làm giảm kích thước tệp, cho phép trình duyệt tải xuống nhanh hơn

Ví dụ: với tệp

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

47 chứa các dòng sau

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

7Bản sao

Trong các tệp JavaScript, chỉ thị Sprockets bắt đầu bằng

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

48. Trong trường hợp trên, tệp đang sử dụng các chỉ thị

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

49 và

app/assets/javascripts/sub/something.js

20. Chỉ thị

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

49 được sử dụng để báo cho Sprockets các tệp bạn muốn yêu cầu. Tại đây, bạn đang yêu cầu các tệp

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

52 và

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

53 có sẵn ở đâu đó trong đường dẫn tìm kiếm Sprockets. Bạn không cần cung cấp tiện ích mở rộng một cách rõ ràng. Sprockets cho rằng bạn đang yêu cầu tệp

app/assets/javascripts/sub/something.js

7 khi được thực hiện từ bên trong tệp

app/assets/javascripts/sub/something.js

7

Chỉ thị

app/assets/javascripts/sub/something.js

20 yêu cầu Sprockets bao gồm đệ quy tất cả các tệp JavaScript trong thư mục đã chỉ định vào đầu ra. Các đường dẫn này phải được chỉ định liên quan đến tệp kê khai. Bạn cũng có thể sử dụng lệnh

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

57 chỉ bao gồm tất cả các tệp JavaScript trong thư mục được chỉ định mà không cần đệ quy

Các chỉ thị được xử lý từ trên xuống dưới, nhưng thứ tự các tệp được bao gồm bởi

app/assets/javascripts/sub/something.js

20 không được chỉ định. Bạn không nên dựa vào bất kỳ thứ tự cụ thể nào trong số đó. Nếu bạn cần đảm bảo một số JavaScript cụ thể kết thúc trên một số khác trong tệp được nối, trước tiên hãy yêu cầu tệp điều kiện tiên quyết trong tệp kê khai. Lưu ý rằng họ chỉ thị

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

49 ngăn các tệp được đưa vào hai lần trong đầu ra

Rails cũng tạo một tệp

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

60 mặc định chứa các dòng này

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

8Bản sao

Rails tạo

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

60 bất kể tùy chọn

//= require home
//= require moovinator
//= require slider
//= require phonebox

8 có được sử dụng khi tạo ứng dụng Rails mới hay không. Điều này là để bạn có thể dễ dàng thêm quy trình nội dung sau này nếu muốn

Các lệnh hoạt động trong tệp JavaScript cũng hoạt động trong biểu định kiểu (mặc dù rõ ràng là bao gồm biểu định kiểu chứ không phải tệp JavaScript). Lệnh

app/assets/javascripts/sub/something.js

20 trong tệp kê khai CSS hoạt động giống như lệnh JavaScript, yêu cầu tất cả các biểu định kiểu từ thư mục hiện tại

Trong ví dụ này,

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

64 được sử dụng. Điều này đặt CSS có trong tệp (nếu có) tại vị trí chính xác của lệnh gọi

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

64

Nếu bạn muốn sử dụng nhiều tệp Sass, bạn thường nên sử dụng thay vì các chỉ thị Sprockets này. Khi sử dụng chỉ thị Sprockets, các tệp Sass tồn tại trong phạm vi riêng của chúng, làm cho các biến hoặc mixin chỉ khả dụng trong tài liệu mà chúng được xác định trong

Bạn cũng có thể thực hiện tệp toàn cầu bằng cách sử dụng

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

67 và

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

68 để thêm toàn bộ cây tương đương với cách hoạt động của

app/assets/javascripts/sub/something.js

20. Kiểm tra để biết thêm thông tin và cảnh báo quan trọng

Bạn có thể có bao nhiêu tệp kê khai tùy thích. Ví dụ: tệp kê khai

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

70 và

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

71 có thể chứa tệp JS và CSS được sử dụng cho phần quản trị của ứng dụng

Các nhận xét tương tự về thứ tự được thực hiện ở trên được áp dụng. Cụ thể, bạn có thể chỉ định các tệp riêng lẻ và chúng được biên dịch theo thứ tự được chỉ định. Ví dụ: bạn có thể nối ba tệp CSS lại với nhau theo cách này

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

9Bản sao

Phần mở rộng tệp được sử dụng trên nội dung xác định quy trình tiền xử lý nào được áp dụng. Khi một bộ điều khiển hoặc giàn giáo được tạo bằng gemset Rails mặc định, một tệp SCSS sẽ được tạo thay cho một tệp CSS thông thường. Ví dụ được sử dụng trước đây là một bộ điều khiển có tên là "dự án", tạo ra tệp

//= require home
//= require moovinator
//= require slider
//= require phonebox

29

Trong chế độ phát triển hoặc nếu đường dẫn nội dung bị vô hiệu hóa, khi tệp này được yêu cầu, nó sẽ được xử lý bởi bộ xử lý do đá quý

//= require home
//= require moovinator
//= require slider
//= require phonebox

22 cung cấp và sau đó được gửi trở lại trình duyệt dưới dạng CSS. Khi bật tính năng đường ống nội dung, tệp này được xử lý trước và được đặt trong thư mục

//= require home
//= require moovinator
//= require slider
//= require phonebox

20 để phục vụ bởi ứng dụng Rails hoặc máy chủ web

Có thể yêu cầu các lớp tiền xử lý bổ sung bằng cách thêm các tiện ích mở rộng khác, trong đó mỗi tiện ích mở rộng được xử lý theo cách từ phải sang trái. Chúng nên được sử dụng theo thứ tự xử lý nên được áp dụng. Ví dụ: biểu định kiểu có tên

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

75 trước tiên được xử lý dưới dạng ERB, sau đó là SCSS và cuối cùng được phân phối dưới dạng CSS. Điều tương tự cũng áp dụng cho tệp JavaScript -

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

76 được xử lý dưới dạng ERB, sau đó là CoffeeScript và được phân phối dưới dạng JavaScript

Hãy nhớ rằng thứ tự của các bộ tiền xử lý này rất quan trọng. Ví dụ: nếu bạn gọi tệp JavaScript của mình là

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

77 thì trước tiên, tệp này sẽ được xử lý bằng trình thông dịch CoffeeScript, trình thông dịch này sẽ không hiểu ERB và do đó bạn sẽ gặp sự cố

Trong chế độ phát triển, nội dung được phân phối dưới dạng tệp nối

Bản kê khai này

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

47

$ rails new appname --skip-asset-pipeline

20Bản sao

sẽ tạo HTML này

$ rails new appname --skip-asset-pipeline

21Bản sao

Nếu bạn đang sử dụng sprockets-ray >= 3. 2. 0, bạn có thể định cấu hình điều gì sẽ xảy ra khi thực hiện tra cứu nội dung và không tìm thấy gì. Nếu bạn tắt "dự phòng nội dung" thì sẽ xảy ra lỗi khi không tìm thấy nội dung

$ rails new appname --skip-asset-pipeline

22Bản sao

Nếu "dự phòng nội dung" được bật thì khi không tìm thấy nội dung, đường dẫn sẽ được xuất ra thay vào đó và không có lỗi phát sinh. Hành vi dự phòng nội dung bị tắt theo mặc định

Bạn có thể tắt thông báo bằng cách cập nhật

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

79 để bao gồm

$ rails new appname --skip-asset-pipeline

23Bản sao

Khi tùy chọn này là đúng, thông báo sẽ được tạo cho các URL nội dung

Bạn có thể bật bản đồ nguồn bằng cách cập nhật

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

79 để bao gồm

$ rails new appname --skip-asset-pipeline

24Bản sao

Khi chế độ gỡ lỗi được bật, Sprockets sẽ tạo Bản đồ nguồn cho từng nội dung. Điều này cho phép bạn gỡ lỗi từng tệp riêng lẻ trong các công cụ dành cho nhà phát triển của trình duyệt của bạn

Nội dung được biên dịch và lưu vào bộ đệm theo yêu cầu đầu tiên sau khi máy chủ được khởi động. Sprockets đặt tiêu đề HTTP

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

81 Kiểm soát bộ đệm để giảm chi phí yêu cầu cho các yêu cầu tiếp theo - trên các yêu cầu này, trình duyệt nhận được phản hồi 304 (Không được sửa đổi)

Nếu bất kỳ tệp nào trong tệp kê khai thay đổi giữa các yêu cầu, máy chủ sẽ phản hồi bằng một tệp được biên dịch mới

Trong môi trường sản xuất, Sprockets sử dụng lược đồ lấy dấu vân tay được nêu ở trên. Theo mặc định, Rails giả sử nội dung đã được biên dịch trước và sẽ được máy chủ web của bạn phân phát dưới dạng nội dung tĩnh

Trong giai đoạn tiền biên dịch, SHA256 được tạo từ nội dung của các tệp đã biên dịch và được chèn vào tên tệp khi chúng được ghi vào đĩa. Những tên có dấu vân tay này được sử dụng bởi những người trợ giúp Rails thay cho tên tệp kê khai

ví dụ này

$ rails new appname --skip-asset-pipeline

25Bản sao

tạo ra một cái gì đó như thế này

$ rails new appname --skip-asset-pipeline

26Bản sao

với Đường ống tài sản, các tùy chọn

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

82 và

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

83 không được sử dụng nữa, hãy xóa các tùy chọn này khỏi

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

18 và

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

19

Hành vi lấy dấu vân tay được kiểm soát bởi tùy chọn khởi tạo (mặc định là

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

87)

Trong các trường hợp bình thường, không nên thay đổi tùy chọn

$ rails new appname --skip-asset-pipeline

40 mặc định. Nếu không có phần tóm tắt trong tên tệp và tiêu đề tương lai xa được đặt, máy khách từ xa sẽ không bao giờ biết để tìm nạp lại tệp khi nội dung của chúng thay đổi

Rails đi kèm với một lệnh để biên dịch bảng kê khai nội dung và các tệp khác trong đường dẫn

Tài sản tổng hợp được ghi vào vị trí được chỉ định trong. Theo mặc định, đây là thư mục

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

90

Bạn có thể gọi lệnh này trên máy chủ trong quá trình triển khai để tạo các phiên bản nội dung đã biên dịch trực tiếp trên máy chủ. Xem phần tiếp theo để biết thông tin về biên dịch cục bộ

Lệnh là

$ rails new appname --skip-asset-pipeline

27Bản sao

Điều này liên kết thư mục được chỉ định trong

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

89 đến

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

92. Nếu bạn đã sử dụng thư mục dùng chung này, bạn sẽ cần viết lệnh triển khai của riêng mình

Điều quan trọng là thư mục này được chia sẻ giữa các lần triển khai để các trang được lưu trong bộ nhớ cache từ xa tham chiếu đến các nội dung đã biên dịch cũ vẫn hoạt động trong suốt vòng đời của trang được lưu trong bộ nhớ cache

Trình so khớp mặc định để biên dịch tệp bao gồm

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

93,

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

94 và tất cả tệp không phải JS/CSS (điều này sẽ tự động bao gồm tất cả nội dung hình ảnh) từ thư mục

$ rails new appname --skip-asset-pipeline

45 bao gồm cả đá quý của bạn

$ rails new appname --skip-asset-pipeline

28Bản sao

Trình so khớp (và các thành viên khác của mảng tiền biên dịch; xem bên dưới) được áp dụng cho tên tệp được biên dịch cuối cùng. Điều này có nghĩa là mọi thứ biên dịch thành JS/CSS đều bị loại trừ, cũng như các tệp JS/CSS thô;

Nếu bạn có các tệp kê khai hoặc biểu định kiểu riêng lẻ và tệp JavaScript khác để đưa vào, bạn có thể thêm chúng vào mảng

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

98 trong

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

10

$ rails new appname --skip-asset-pipeline

29Bản sao

Luôn chỉ định tên tệp được biên dịch dự kiến ​​kết thúc bằng

app/assets/javascripts/sub/something.js

7 hoặc

app/assets/javascripts/sub/something.js

8, ngay cả khi bạn muốn thêm tệp Sass hoặc CoffeeScript vào mảng tiền biên dịch

Lệnh này cũng tạo ra một

$ rails new appname --skip-asset-pipeline

202 (trong đó

$ rails new appname --skip-asset-pipeline

203 là một chuỗi hex ngẫu nhiên 16 byte) chứa một danh sách có tất cả nội dung của bạn và dấu vân tay tương ứng của chúng. Điều này được sử dụng bởi các phương thức của trình trợ giúp Rails để tránh chuyển các yêu cầu ánh xạ trở lại Sprockets. Một tệp kê khai điển hình trông giống như

$ rails new appname --skip-asset-pipeline

30Bản sao

Vị trí mặc định cho tệp kê khai là thư mục gốc của vị trí được chỉ định trong

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

89 ('/assets' theo mặc định)

Nếu thiếu các tệp biên dịch sẵn trong quá trình sản xuất, bạn sẽ nhận được một ngoại lệ

$ rails new appname --skip-asset-pipeline

205 cho biết tên của (các) tệp bị thiếu

Nội dung biên dịch sẵn tồn tại trên hệ thống tệp và được phục vụ trực tiếp bởi máy chủ web của bạn. Theo mặc định, chúng không có các tiêu đề tương lai xa, vì vậy, để nhận được lợi ích của việc lấy dấu vân tay, bạn sẽ phải cập nhật cấu hình máy chủ của mình để thêm các tiêu đề đó

Đối với Apache

$ rails new appname --skip-asset-pipeline

31Bản sao

Đối với NGINX

$ rails new appname --skip-asset-pipeline

32Bản sao

Đôi khi, bạn có thể không muốn hoặc không thể biên dịch nội dung trên máy chủ sản xuất. Chẳng hạn, bạn có thể có quyền truy cập ghi hạn chế vào hệ thống tệp sản xuất của mình hoặc bạn có thể lập kế hoạch triển khai thường xuyên mà không thực hiện bất kỳ thay đổi nào đối với nội dung của mình

Trong những trường hợp như vậy, bạn có thể biên dịch trước nội dung cục bộ — nghĩa là thêm một bộ nội dung đã biên dịch hoàn chỉnh, sẵn sàng sản xuất vào kho lưu trữ mã nguồn của bạn trước khi chuyển sang sản xuất. Bằng cách này, chúng không cần phải được biên dịch trước riêng biệt trên máy chủ sản xuất sau mỗi lần triển khai

Như trên, bạn có thể thực hiện bước này bằng cách sử dụng

$ rails new appname --skip-asset-pipeline

27Bản sao

Lưu ý những lưu ý sau

• Nếu có sẵn nội dung được biên dịch trước, chúng sẽ được phục vụ — ngay cả khi chúng không còn khớp với nội dung gốc (chưa được biên dịch), ngay cả trên máy chủ phát triển

  Để đảm bảo rằng máy chủ phát triển luôn biên dịch nội dung một cách nhanh chóng (và do đó luôn phản ánh trạng thái mã gần đây nhất), môi trường phát triển phải được định cấu hình để giữ nội dung biên dịch sẵn ở một vị trí khác với vị trí sản xuất. Mặt khác, bất kỳ nội dung nào được biên dịch trước để sử dụng trong sản xuất sẽ ghi đè các yêu cầu đối với chúng trong quá trình phát triển (i. e. , những thay đổi tiếp theo mà bạn thực hiện đối với nội dung sẽ không được phản ánh trong trình duyệt)

  Bạn có thể làm điều này bằng cách thêm dòng sau vào

  config.assets.css_compressor = :yui
  config.assets.js_compressor = :terser
  

  79

  $ rails new appname --skip-asset-pipeline
  

  34Bản sao

• Tác vụ tiền biên dịch nội dung trong công cụ triển khai của bạn (e. g. , Capistrano) nên bị vô hiệu hóa

• Mọi máy nén hoặc công cụ khai thác cần thiết phải có sẵn trên hệ thống phát triển của bạn

Trong một số trường hợp, bạn có thể muốn sử dụng biên dịch trực tiếp. Trong chế độ này, tất cả các yêu cầu đối với nội dung trong đường ống đều được xử lý trực tiếp bởi Sprockets

Để kích hoạt bộ tùy chọn này

$ rails new appname --skip-asset-pipeline

35Bản sao

Ở yêu cầu đầu tiên, nội dung được biên dịch và lưu vào bộ nhớ cache như được nêu trong và tên tệp kê khai được sử dụng trong trình trợ giúp được thay đổi để bao gồm hàm băm SHA256

Sprockets cũng đặt tiêu đề HTTP

$ rails new appname --skip-asset-pipeline

207 thành

$ rails new appname --skip-asset-pipeline

208. Điều này báo hiệu tất cả các bộ đệm giữa máy chủ của bạn và trình duyệt máy khách rằng nội dung này (tệp được cung cấp) có thể được lưu vào bộ đệm trong 1 năm. Tác dụng của việc này là giảm số lượng yêu cầu đối với nội dung này từ máy chủ của bạn;

Chế độ này sử dụng nhiều bộ nhớ hơn, hoạt động kém hơn chế độ mặc định và không được khuyến nghị

Nếu bạn đang triển khai một ứng dụng sản xuất cho một hệ thống không có bất kỳ thời gian chạy JavaScript nào có sẵn, bạn có thể muốn thêm một thời gian chạy vào

app/assets/javascripts/sub/something.js

0 của mình

$ rails new appname --skip-asset-pipeline

36Bản sao

CDN là viết tắt của Mạng phân phối nội dung, chúng được thiết kế chủ yếu để lưu trữ nội dung trên toàn thế giới để khi trình duyệt yêu cầu nội dung, bản sao được lưu trong bộ nhớ cache sẽ gần về mặt địa lý với trình duyệt đó. Nếu bạn đang phân phối nội dung trực tiếp từ máy chủ Rails của mình trong quá trình sản xuất, cách tốt nhất là sử dụng CDN trước ứng dụng của bạn

Một mẫu phổ biến để sử dụng CDN là đặt ứng dụng sản xuất của bạn làm máy chủ "gốc". Điều này có nghĩa là khi một trình duyệt yêu cầu một nội dung từ CDN và có lỗi bộ nhớ cache, trình duyệt sẽ nhanh chóng lấy tệp từ máy chủ của bạn và sau đó lưu vào bộ nhớ cache. Ví dụ: nếu bạn đang chạy ứng dụng Rails trên

$ rails new appname --skip-asset-pipeline

210 và có CDN được định cấu hình tại

$ rails new appname --skip-asset-pipeline

211, thì khi yêu cầu được gửi tới

$ rails new appname --skip-asset-pipeline

212, CDN sẽ truy vấn máy chủ của bạn một lần tại

$ rails new appname --skip-asset-pipeline

213 và lưu vào bộ đệm yêu cầu. Yêu cầu tiếp theo tới CDN đến cùng một URL sẽ nhấn vào bản sao được lưu trong bộ nhớ cache. Khi CDN có thể phân phối nội dung trực tiếp, yêu cầu không bao giờ chạm vào máy chủ Rails của bạn. Vì nội dung từ CDN gần với trình duyệt hơn về mặt địa lý nên yêu cầu sẽ nhanh hơn và vì máy chủ của bạn không cần dành thời gian phân phối nội dung nên nó có thể tập trung vào việc cung cấp mã ứng dụng nhanh nhất có thể

Để thiết lập CDN của bạn, bạn phải chạy ứng dụng của mình trong sản xuất trên internet tại một URL có sẵn công khai, ví dụ:

$ rails new appname --skip-asset-pipeline

210. Tiếp theo, bạn sẽ cần đăng ký dịch vụ CDN từ nhà cung cấp dịch vụ lưu trữ đám mây. Khi thực hiện việc này, bạn cần định cấu hình "nguồn gốc" của CDN để trỏ lại trang web của bạn

$ rails new appname --skip-asset-pipeline

210, hãy kiểm tra nhà cung cấp của bạn để biết tài liệu về cách định cấu hình máy chủ gốc

CDN mà bạn đã cung cấp sẽ cung cấp cho bạn một tên miền phụ tùy chỉnh cho ứng dụng của bạn, chẳng hạn như

$ rails new appname --skip-asset-pipeline

211 (lưu ý hư cấu-cdn. com không phải là nhà cung cấp CDN hợp lệ tại thời điểm viết bài này). Bây giờ bạn đã định cấu hình máy chủ CDN của mình, bạn cần yêu cầu các trình duyệt sử dụng CDN của bạn để lấy nội dung thay vì trực tiếp máy chủ Rails của bạn. Bạn có thể làm điều này bằng cách định cấu hình Rails để đặt CDN của bạn làm máy chủ nội dung thay vì sử dụng đường dẫn tương đối. Để đặt máy chủ nội dung của bạn trong Rails, bạn cần đặt trong

$ rails new appname --skip-asset-pipeline

218

$ rails new appname --skip-asset-pipeline

37Bản sao

Bạn chỉ cần cung cấp "host", đây là tên miền phụ và tên miền gốc, bạn không cần chỉ định giao thức hay "lược đồ" như

$ rails new appname --skip-asset-pipeline

219 hoặc

$ rails new appname --skip-asset-pipeline

220. Khi một trang web được yêu cầu, giao thức trong liên kết đến nội dung của bạn được tạo sẽ khớp với cách trang web được truy cập theo mặc định

Bạn cũng có thể đặt giá trị này thông qua một biến môi trường để chạy bản sao theo giai đoạn của trang web của bạn dễ dàng hơn

$ rails new appname --skip-asset-pipeline

38Bản sao

Bạn cần đặt

$ rails new appname --skip-asset-pipeline

221 trên máy chủ của mình thành

$ rails new appname --skip-asset-pipeline

222 để tính năng này hoạt động

Khi bạn đã định cấu hình máy chủ và CDN của mình, đường dẫn nội dung từ những người trợ giúp, chẳng hạn như

$ rails new appname --skip-asset-pipeline

39Bản sao

Sẽ được hiển thị dưới dạng URL CDN đầy đủ như

$ rails new appname --skip-asset-pipeline

223 (đã bỏ qua phần thông báo để dễ đọc)

Nếu CDN có một bản sao của

$ rails new appname --skip-asset-pipeline

224, nó sẽ phân phối nó tới trình duyệt và máy chủ của bạn thậm chí không biết nó đã được yêu cầu. Nếu CDN không có bản sao, nó sẽ cố gắng tìm nó tại "gốc"

$ rails new appname --skip-asset-pipeline

213, sau đó lưu trữ để sử dụng trong tương lai

Nếu bạn chỉ muốn phân phát một số nội dung từ CDN của mình, thì bạn có thể sử dụng tùy chọn

$ rails new appname --skip-asset-pipeline

226 tùy chỉnh trong trình trợ giúp nội dung của mình, tùy chọn này sẽ ghi đè giá trị được đặt trong

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

00Bản sao

CDN hoạt động bằng cách lưu trữ nội dung. Nếu CDN có nội dung cũ hoặc xấu, thì điều đó có hại hơn là giúp ích cho ứng dụng của bạn. Mục đích của phần này là để mô tả hành vi bộ nhớ đệm chung của hầu hết các CDN, nhà cung cấp cụ thể của bạn có thể hoạt động hơi khác một chút

4. 4. 2. Bộ nhớ đệm yêu cầu 1 CDN

Mặc dù CDN được mô tả là tốt cho việc lưu nội dung vào bộ đệm, nhưng trên thực tế, toàn bộ yêu cầu sẽ được lưu vào bộ đệm. Điều này bao gồm nội dung của nội dung cũng như bất kỳ tiêu đề nào. Điều quan trọng nhất là

$ rails new appname --skip-asset-pipeline

207 cho CDN (và trình duyệt web) biết cách lưu nội dung vào bộ nhớ cache. Điều này có nghĩa là nếu ai đó yêu cầu một nội dung không tồn tại

$ rails new appname --skip-asset-pipeline

229 và ứng dụng Rails của bạn trả về lỗi 404, thì CDN của bạn có thể sẽ lưu vào bộ đệm trang 404 nếu có tiêu đề

$ rails new appname --skip-asset-pipeline

207 hợp lệ

Một cách để kiểm tra các tiêu đề được lưu vào bộ đệm chính xác trong CDN của bạn là sử dụng curl. Bạn có thể yêu cầu các tiêu đề từ cả máy chủ và CDN của mình để xác minh chúng giống nhau

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

01Bản sao

So với bản sao CDN

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

02Bản sao

Kiểm tra tài liệu CDN của bạn để biết bất kỳ thông tin bổ sung nào mà họ có thể cung cấp, chẳng hạn như

$ rails new appname --skip-asset-pipeline

231 hoặc để biết bất kỳ tiêu đề bổ sung nào mà họ có thể thêm vào

4. 4. 2. 3 CDN và Tiêu đề kiểm soát bộ đệm

Đây là một đặc điểm kỹ thuật của W3C mô tả cách một yêu cầu có thể được lưu vào bộ đệm. Khi không sử dụng CDN, trình duyệt sẽ sử dụng thông tin này để lưu trữ nội dung. Điều này rất hữu ích đối với các nội dung không được sửa đổi để trình duyệt không cần tải xuống lại CSS hoặc JavaScript của trang web theo mọi yêu cầu. Nói chung, chúng tôi muốn máy chủ Rails của chúng tôi thông báo cho CDN (và trình duyệt) của chúng tôi rằng nội dung là "công khai", điều đó có nghĩa là bất kỳ bộ đệm nào cũng có thể lưu trữ yêu cầu. Ngoài ra, chúng tôi thường muốn đặt

$ rails new appname --skip-asset-pipeline

232 là khoảng thời gian bộ đệm sẽ lưu trữ đối tượng trước khi vô hiệu hóa bộ đệm. Giá trị

$ rails new appname --skip-asset-pipeline

232 được đặt thành giây với giá trị tối đa có thể là

$ rails new appname --skip-asset-pipeline

234 là một năm. Bạn có thể làm điều này trong ứng dụng Rails của mình bằng cách đặt

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

03Bản sao

Giờ đây, khi ứng dụng của bạn phân phát nội dung trong sản xuất, CDN sẽ lưu trữ nội dung đó trong tối đa một năm. Vì hầu hết các CDN cũng lưu trữ các tiêu đề của yêu cầu, nên

$ rails new appname --skip-asset-pipeline

207 này sẽ được chuyển cho tất cả các trình duyệt tìm kiếm nội dung này trong tương lai, trình duyệt sẽ biết rằng nó có thể lưu trữ nội dung này trong một thời gian rất dài trước khi cần yêu cầu lại.

4. 4. 2. 4 CDN và Vô hiệu hóa bộ nhớ cache dựa trên URL

Hầu hết các CDN sẽ lưu trữ nội dung của nội dung dựa trên URL hoàn chỉnh. Điều này có nghĩa là một yêu cầu để

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

04Bản sao

Sẽ là một bộ đệm hoàn toàn khác với

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

05Bản sao

Nếu bạn muốn đặt

$ rails new appname --skip-asset-pipeline

232 trong tương lai xa trong

$ rails new appname --skip-asset-pipeline

207 của mình (và bạn cũng vậy), thì hãy đảm bảo rằng khi bạn thay đổi nội dung, bộ đệm của bạn sẽ bị vô hiệu. Ví dụ: khi thay đổi mặt cười trong một hình ảnh từ màu vàng sang màu xanh lam, bạn muốn tất cả khách truy cập vào trang web của mình có khuôn mặt màu xanh lam mới. Khi sử dụng CDN với đường dẫn nội dung Rails,

$ rails new appname --skip-asset-pipeline

40 được đặt thành true theo mặc định để mỗi nội dung sẽ có một tên tệp khác khi nó được thay đổi. Bằng cách này, bạn không cần phải vô hiệu hóa bất kỳ mục nào trong bộ đệm theo cách thủ công. Thay vào đó, bằng cách sử dụng một tên nội dung duy nhất khác, người dùng của bạn sẽ nhận được nội dung mới nhất

Một trong những tùy chọn để nén CSS là YUI. Trình nén CSS YUI cung cấp khả năng thu nhỏ

Dòng sau cho phép nén YUI và yêu cầu đá quý

$ rails new appname --skip-asset-pipeline

239

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

06Bản sao

Tùy chọn khác để nén CSS nếu bạn đã cài đặt sass-rails gem là

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

07Bản sao

Các tùy chọn có thể có để nén JavaScript là

$ rails new appname --skip-asset-pipeline

240,

$ rails new appname --skip-asset-pipeline

241 và

$ rails new appname --skip-asset-pipeline

242. Những thứ này yêu cầu sử dụng đá quý

$ rails new appname --skip-asset-pipeline

243,

$ rails new appname --skip-asset-pipeline

244 hoặc

$ rails new appname --skip-asset-pipeline

239 tương ứng

Lấy ví dụ về đá quý

$ rails new appname --skip-asset-pipeline

243. Viên ngọc này bao bọc Terser (được viết cho Node. js) trong Ruby. Nó nén mã của bạn bằng cách loại bỏ khoảng trắng và nhận xét, rút ​​ngắn tên biến cục bộ và thực hiện các tối ưu hóa vi mô khác, chẳng hạn như thay đổi câu lệnh

$ rails new appname --skip-asset-pipeline

247 và

$ rails new appname --skip-asset-pipeline

248 thành toán tử bậc ba nếu có thể

Dòng sau đây gọi

$ rails new appname --skip-asset-pipeline

243 để nén JavaScript

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

08Bản sao

Bạn sẽ cần một thời gian chạy được hỗ trợ để sử dụng

$ rails new appname --skip-asset-pipeline

243. Nếu bạn đang sử dụng macOS hoặc Windows, bạn đã cài đặt thời gian chạy JavaScript trong hệ điều hành của mình

Theo mặc định, phiên bản được nén của nội dung đã biên dịch sẽ được tạo cùng với phiên bản không được nén của nội dung. Tài sản được nén giúp giảm việc truyền dữ liệu qua dây. Bạn có thể định cấu hình điều này bằng cách đặt cờ

$ rails new appname --skip-asset-pipeline

251

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

09Bản sao

Tham khảo tài liệu của máy chủ web của bạn để biết hướng dẫn về cách cung cấp nội dung được nén

Cài đặt cấu hình máy nén cho CSS và JavaScript cũng lấy bất kỳ đối tượng nào. Đối tượng này phải có một phương thức

$ rails new appname --skip-asset-pipeline

252 lấy một chuỗi làm đối số duy nhất và nó phải trả về một chuỗi

//= require home
//= require moovinator
//= require slider
//= require phonebox

0Bản sao

Để kích hoạt tính năng này, hãy chuyển một đối tượng mới vào tùy chọn cấu hình trong

$ rails new appname --skip-asset-pipeline

253

//= require home
//= require moovinator
//= require slider
//= require phonebox

1Bản sao

Đường dẫn chung mà Sprockets sử dụng theo mặc định là

config.assets.css_compressor = :yui
config.assets.js_compressor = :terser

90

Cái này có thể đổi thành cái khác

//= require home
//= require moovinator
//= require slider
//= require phonebox

2Bản sao

Đây là một tùy chọn hữu ích nếu bạn đang cập nhật một dự án cũ hơn không sử dụng đường dẫn nội dung và đã sử dụng đường dẫn này hoặc bạn muốn sử dụng đường dẫn này cho một tài nguyên mới

Tiêu đề X-Sendfile là một chỉ thị cho máy chủ web để bỏ qua phản hồi từ ứng dụng và thay vào đó phục vụ một tệp được chỉ định từ đĩa. Tùy chọn này bị tắt theo mặc định nhưng có thể được bật nếu máy chủ của bạn hỗ trợ. Khi được bật, điều này sẽ chuyển trách nhiệm phân phối tệp đến máy chủ web, nhanh hơn. Hãy xem cách sử dụng tính năng này

Apache và NGINX hỗ trợ tùy chọn này, có thể được kích hoạt trong

$ rails new appname --skip-asset-pipeline

218

//= require home
//= require moovinator
//= require slider
//= require phonebox

3Bản sao

Nếu bạn đang nâng cấp một ứng dụng hiện có và có ý định sử dụng tùy chọn này, hãy cẩn thận chỉ dán tùy chọn cấu hình này vào

app/assets/javascripts/sub/something.js

1 và bất kỳ môi trường nào khác mà bạn xác định với hành vi sản xuất (không phải

$ rails new appname --skip-asset-pipeline

253)

Để biết thêm chi tiết, hãy xem tài liệu của máy chủ web sản xuất của bạn. - Apache - NGINX

Theo mặc định, Sprockets lưu trữ nội dung trong

$ rails new appname --skip-asset-pipeline

258 trong môi trường phát triển và sản xuất. Điều này có thể được thay đổi như sau

//= require home
//= require moovinator
//= require slider
//= require phonebox

4Bản sao

Để tắt lưu trữ bộ đệm nội dung

//= require home
//= require moovinator
//= require slider
//= require phonebox

5Bản sao

Tài sản cũng có thể đến từ các nguồn bên ngoài dưới dạng đá quý

Một ví dụ điển hình về điều này là đá quý

$ rails new appname --skip-asset-pipeline

259. Viên ngọc này chứa một lớp động cơ kế thừa từ

$ rails new appname --skip-asset-pipeline

260. Bằng cách này, Rails được thông báo rằng thư mục dành cho đá quý này có thể chứa nội dung và các thư mục

$ rails new appname --skip-asset-pipeline

45,

app/assets/javascripts/sub/something.js

27 và

app/assets/javascripts/sub/something.js

28 của công cụ này được thêm vào đường dẫn tìm kiếm của Sprockets

Sprockets sử dụng Bộ xử lý, Máy biến áp, Máy nén và Bộ xuất khẩu để mở rộng chức năng của Sprockets. Hãy xem Extending Sprockets để tìm hiểu thêm. Ở đây, chúng tôi đã đăng ký một bộ tiền xử lý để thêm nhận xét vào cuối tệp văn bản/css (

app/assets/javascripts/sub/something.js

8)

//= require home
//= require moovinator
//= require slider
//= require phonebox

6Bản sao

Bây giờ bạn đã có một mô-đun sửa đổi dữ liệu đầu vào, đã đến lúc đăng ký nó làm bộ tiền xử lý cho loại kịch câm của bạn

//= require home
//= require moovinator
//= require slider
//= require phonebox

7Bản sao

Phản hồi

Bạn được khuyến khích giúp cải thiện chất lượng của hướng dẫn này

Vui lòng đóng góp nếu bạn thấy bất kỳ lỗi chính tả hoặc lỗi thực tế nào. Để bắt đầu, bạn có thể đọc phần của chúng tôi

Bạn cũng có thể tìm thấy nội dung không đầy đủ hoặc nội dung không được cập nhật. Vui lòng thêm bất kỳ tài liệu còn thiếu nào cho chính. Đảm bảo kiểm tra Hướng dẫn cạnh trước để xác minh xem sự cố đã được khắc phục hay chưa trên nhánh chính. Kiểm tra Hướng dẫn Hướng dẫn Ruby on Rails để biết phong cách và quy ước

Nếu vì bất kỳ lý do gì mà bạn phát hiện ra điều gì đó cần khắc phục nhưng không thể tự vá nó, vui lòng mở một vấn đề

Và cuối cùng nhưng không kém phần quan trọng, bất kỳ loại thảo luận nào liên quan đến tài liệu Ruby on Rails đều rất được hoan nghênh trên Diễn đàn Ruby on Rails chính thức