• 跳至主要導覽
  • 跳至主要內容
  • 跳至主要資訊欄
Office 指南

Office 指南

辦公室工作實用教學

  • Excel
  • Word
  • PowerPoint
  • Windows
  • PowerShell
  • R

CSS 檔案最小化與壓縮處理教學與範例

介紹如何將 CSS 檔案透過 YUI Compressor 進行最小化處理,並以 Brotli 演算法壓縮。

最小化 CSS 檔案

最小化 CSS 檔案可以使用 YUI Compressor 最小化工具來處理,它可以對 JavaScript 與 CSS 兩種檔案進行最小化處理。

若在 CentOS 中可用 yum 安裝 YUI Compressor 最小化工具:

# 安裝 YUI Compressor 最小化工具
yum install yuicompressor

將 CSS 檔案進行最小化處理:

# 最小化 CSS 檔案
yuicompressor style.css -o style.min.css

這樣就可以大幅降低 style.css 的檔案大小,最小化之後的 CSS 會儲存在 style.min.css 這個檔案中。

Brotli 壓縮

經過最小化處理之後的 style.min.css 檔案還是一個普通的文字檔案,我們可以再用 Brotli 壓縮工具將其壓縮成更小的壓縮檔,以靜態壓縮檔的格式放在伺服器上。

若在 CentOS 中可用 yum 安裝 Brotli 壓縮工具:

# 安裝 Brotli 壓縮工具
yum install brotli

將最小化的 CSS 檔案再以 Brotli 演算法進行壓縮:

# 以 Brotli 演算法壓縮檔案
brotli -o style.min.css.br style.min.css

處理完成之後,在布署檔案時就可以將 style.min.css.br 連同 style.min.css 一起放在網頁伺服器上面,再配合網頁伺服器的設定,就可以讓伺服器使用靜態壓縮檔案,提升網站效能。

Nginx 設定

Nginx 伺服器安裝了 ngx_brotli 模組之後,只要啟用 brotli_static 功能,伺服器就自動檢查檔案是否有 .br 結尾的 Brotli 靜態壓縮檔版本,使用靜態壓縮檔可以省去壓縮的時間。

http {
  # 啟用 Brotli 壓縮功能
  brotli on;

  # 啟用 Brotli 靜態壓縮檔功能
  brotli_static on;

  # ...
}

分類:網站架設

讀者互動方式

發佈留言 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

主要資訊欄

搜尋

近期文章

  • C++ 語言使用 Crypto++ 實作 RSA 數位簽章教學與範例
  • C++ 語言使用 Crypto++ 實作 RSA-OAEP 搭配 SHA256 加密教學與範例
  • C++ 語言使用 Crypto++ 實作 AES 加密、解密、認證加密教學與範例
  • C++ 語言使用 Crypto++ 實作 MD5、SHA1、SHA2、BLAKE2 雜湊教學與範例
  • Ubuntu Linux 安裝、使用 Crypto++ 加密函式庫教學與範例
  • C 語言使用 OpenSSL 實作橢圓曲線 ECDH 金鑰交換教學與範例
  • Python 以 eciespy 實作 ECC 非對稱式加密方法教學與範例
  • C 語言使用 OpenSSL 實作 PBKDF2 教學與範例

推薦網站

  • Udemy 線上教學課程
  • Coursera 線上教學課程

關注本站

  • 電子郵件
  • Facebook

公益

  • 家扶基金會
  • 台灣世界展望會
  • Yahoo 奇摩公益
  • igiving 公益網
  • 兒福聯盟

Copyright © 2021 · Office Guide