本程式碼研究室是壓縮及壓縮網路酬載的擴充功能
程式碼研究室
並假設您已熟悉壓縮的基本概念。阿斯
相較於 gzip
等其他壓縮演算法,本程式碼研究室會探討如何
使用 Brotli 壓縮後,可進一步減少壓縮率和應用程式整體
大小
測量
著手新增最佳化項目之前,最好先進行分析 應用程式目前狀態
- 按一下「Remix to Edit」即可編輯專案。
- 如要預覽網站,請按下「查看應用程式」。然後按下
全螢幕
。
在上一個壓縮及壓縮網路酬載中
程式碼研究室,
我們將 main.js
的大小從 225 KB 縮減為 61.6 KB。在本程式碼研究室中
將探討 Brotli 壓縮如何進一步縮減這個套件大小。
Brotli 壓縮
波羅利文
是較新的壓縮演算法,能提供更優異的文字壓縮體驗
比 gzip
低的結果。根據
CertSimple,Bratli 成效良好:
- JavaScript 比
gzip
小 14% - HTML 比
gzip
小 21% - CSS 比
gzip
小 17%
如要使用 Brotli,你的伺服器必須支援 HTTPS。
大多數瀏覽器的最新版本。瀏覽器
支援 Brotli 的 Accept-Encoding
標頭會包含 br
:
Accept-Encoding: gzip, deflate, br
您可以透過 Content-Encoding
決定要使用哪種壓縮演算法
欄位 (Command+Option+I
或
Ctrl+Alt+I
):
![網路面板](https://web.dev/static/articles/codelab-text-compression-brotli/image/network-panel-9ae4f0c414193.png?authuser=1&hl=zh-tw)
啟用 Brotli
動態壓縮
動態壓縮需要即時壓縮 瀏覽器要求。
優點
- 即使沒有建立或更新資產的壓縮版本 完成。
- 即時壓縮功能特別適用於 動態產生。
缺點
- 以較高的層級壓縮檔案來提升壓縮率, 更久。使用者等待素材資源執行完畢,可能會發生成效命中 伺服器傳送檔案之前先行壓縮
使用 Node/Express 動態壓縮
server.js
檔案負責設定託管的 Node 伺服器
應用程式
var express = require('express');
var app = express();
app.use(express.static('public'));
var listener = app.listen(process.env.PORT, function() {
console.log('Your app is listening on port ' + listener.address().port);
});
目前這項操作是匯入 express
並使用 express.static
中介軟體會將所有靜態 HTML、JS 和 CSS 檔案
public/directory
(而這些檔案是由 webpack 與每個版本建立)。
為了確保所有素材資源每次都會使用 brotli 壓縮
已要求,shrink-ray
如何定義模組第一步,是將其新增為 package.json
中的 devDependency
:
"devDependencies": {
//...
"shrink-ray": "^0.1.3"
},
並匯入伺服器檔案 server.js
:
var express = require('express');
var shrinkRay = require('shrink-ray');
並在掛接 express.static
前將其新增為中介軟體:
//...
var app = express();
// compress all requests
app.use(shrinkRay());
app.use(express.static('public'));
現在,請重新載入應用程式,然後在「網路」面板中查看軟體包大小:
![採用動態 Brotli 壓縮格式的軟體包大小](https://web.dev/static/articles/codelab-text-compression-brotli/image/bundle-size-dynamic-brot-1b3deb34e927b.png?authuser=1&hl=zh-tw)
您現在可以在 Content-Encoding
標頭中看到 brotli
從 bz
套用。
main.bundle.js
從 225 KB 縮減為 53.1 KB!比大約減少 14%
與 gzip
(61.6 KB) 相比。
靜態壓縮
靜態壓縮的功用是將素材資源壓縮並提前儲存 讓應用程式從可以最快做出回應的位置 回應使用者要求
優點
- 再也不用擔心因為壓縮等級造成延遲的問題。無 只能即時壓縮檔案
缺點
- 每個版本都需要壓縮資產。建構時間可能會增加 如果使用高壓縮率,成效會相當顯著
使用 Node/Express 和 webpack 進行靜態壓縮
由於靜態壓縮涉及事先壓縮檔案,Webpack
在建構步驟中,您可以修改設定來壓縮資產。
brotli-webpack-plugin
可用於這種情況。
第一步,是將其新增為 package.json
中的 devDependency
:
"devDependencies": {
//...
"brotli-webpack-plugin": "^1.1.0"
},
就像任何其他 webpack 外掛程式一樣
請匯入設定檔
webpack.config.js
:
var path = require("path");
//...
var BrotliPlugin = require('brotli-webpack-plugin');
並在 Plugins 陣列中加入這個程式碼:
module.exports = {
// ...
plugins: [
// ...
new BrotliPlugin({
asset: '[file].br',
test: /\.(js)$/
})
]
},
外掛程式陣列使用下列引數:
asset
:目標資產名稱。- 系統會將
[file]
替換為原始素材資源檔案名稱。 test
:與這個規則運算式相符的所有素材資源 (也就是結尾為.js
),
舉例來說,main.js
可能會重新命名為 main.js.br
。
應用程式重新載入並重新建構時,主套件的壓縮版本會變為
建立完成開啟 Glitch 主控台,看看最終成果
public/
目錄,由節點伺服器提供的。
- 按一下「工具」按鈕。
- 按一下「Console」按鈕。
- 在控制台中執行下列指令,切換至
public
目錄並查看其所有檔案:
cd public
ls -lh
![使用靜態 Brotli 壓縮的軟體包大小](https://web.dev/static/articles/codelab-text-compression-brotli/image/bundle-size-static-brotl-d7b6cec6c6ef7.png?authuser=1&hl=zh-tw)
軟體包 main.bundle.js.br
的舊版壓縮版本已儲存
這裡也與大小減少了約 76% (225 KB 與 53 KB 相較)
main.bundle.js
。
接下來,指示伺服器一律傳送這些已壓縮檔
所請求的是原始 JS 版本方法是定義新的
透過 express.static
提供檔案之前 server.js
中的路徑。
var express = require('express');
var app = express();
app.get('*.js', (req, res, next) => {
req.url = req.url + '.br';
res.set('Content-Encoding', 'br');
res.set('Content-Type', 'application/javascript; charset=UTF-8');
next();
});
app.use(express.static('public'));
app.get
用於指示伺服器如何回應應用程式的 GET
要求
特定端點接著,回呼函式會用於定義處理方式
請求。路線的運作方式如下:
- 將
'*.js'
指定為第一個引數,表示這個引數適用於 端點,用於擷取 JS 檔案。 - 在回呼中,
.br
會附加至要求的網址,Content-Encoding
回應標頭已設為br
。 Content-Type
標頭已設為application/javascript; charset=UTF-8
為 指定 MIME 類型。- 最後,
next()
可確保該序列會持續處理任何可能 下一個可能性
某些瀏覽器可能不支援 brotli 壓縮,因此請確認 brotli 是
確認無誤後,再傳回未壓縮檔的
Accept-Encoding
要求標頭包含 br
:
var express = require('express');
var app = express();
app.get('*.js', (req, res, next) => {
if (req.header('Accept-Encoding').includes('br')) {
req.url = req.url + '.br';
console.log(req.header('Accept-Encoding'));
res.set('Content-Encoding', 'br');
res.set('Content-Type', 'application/javascript; charset=UTF-8');
}
next();
});
app.use(express.static('public'));
應用程式重新載入後,請再次查看「網路」面板。
![套件大小:53.1 KB (來自 225 KB)](https://web.dev/static/articles/codelab-text-compression-brotli/image/bundle-size-531-kb-22-4ffeb537cb8ee.png?authuser=1&hl=zh-tw)
大功告成!您已使用 Brotli 壓縮功能進一步壓縮素材資源!
結論
在本程式碼研究室中,您將說明 brotli
如何進一步降低應用程式的整體品質
大小如果支援,brotli
是比
gzip
。