對 Lume 進行效能調優
大家好，我是無能。
由於伺服器端的快取等設定仍沿用以前 WordPress 的設定，因此我將再次進行更改。
Nginx
在執行反向代理的 Nginx 端，所有必要的內容都已快取。
如果從在到達後端 Apache 之前就進行快取的意義上來說，可以想像成是自建的 CDN 伺服器。
變更
if ($request_uri ~* "\.(jpg|jpeg|png|webp|gif|mp4|css|js|ico|woff2|svg|pdf|zip|eot|ttf|xml|json|txt|html)(\?.*)?$") {
set $do_not_cache 0;
}
之前沒有快取 HTML，但既然使用了「靜態網站」產生器，我就把它加進去了。
此外，在靜態網站中加入是否快取的判斷分支，是否有意義呢？
if ($request_uri ~* "/wp-admin/|/xmlrpc.php|wp-.*.php|/feed/|sitemap(_index)?.xml") {
set $skip_cache 1;
set $skip_reason URI;
}
這裡我特意保留了程式碼。雖然也是為了隨時可以回到 WordPress，但像 sitemap 這種不想快取的內容，我就設定不快取。
Nginx 端大概就這些吧。
以前我把文章放在 /blog，所以對 /blog 進行了不同的快取設定。但後來覺得特意分開是否有意義，所以就不再分開了。
Lume
我查看了 Lume 的外掛，並將所有可以縮小程式碼的外掛都安裝了。 Plugins
Terser
Terser
從 Terser 網站內部查看 Terser 的文件。
就是 API Reference Minify options structure
這個部分。
我會一邊請教 AI，一邊只修改必要的部份。
加上註解讓它更容易理解，這點很棒。
$ cat _config.ts
import lume from "lume/mod.ts";
import blog from "blog/mod.ts";
import plugins from "./plugins.ts";
import nunjucks from "lume/plugins/nunjucks.ts";
import basePath from "lume/plugins/base_path.ts";
import terser from "lume/plugins/terser.ts";
import minifyHTML from "lume/plugins/minify_html.ts";
import lightningCss from "lume/plugins/lightningcss.ts";
const site = lume({
src: "./src",
location: new URL("https://soulminingrig.com"),
});
site.use(basePath());
site.use(plugins());
site.use(nunjucks());
// 文件壓縮
site.use(terser({
options: {
compress: {
drop_console: true,
passes: 5, // 增加遍歷次數以嘗試進一步壓縮
unsafe: true,
pure_getters: true, // 將 getter 視為純函數
unsafe_arrows: true, // 箭頭函數優化
unsafe_comps: true, // 比較優化
unsafe_Function: true, // Function 構造函數優化
unsafe_math: true, // 數學優化
unsafe_methods: true, // 方法調用優化
unsafe_proto: true, // __proto__ 優化
unsafe_regexp: true, // 正則表達式優化
conditionals: true, // 條件語句優化
dead_code: true, // 移除死碼
evaluate: true, // 評估常數表達式
booleans: true, // 布林運算優化
loops: true, // 循環優化
unused: true, // 刪除未使用的程式碼
hoist_funs: true, // 函數宣告提升
keep_fargs: false, // 刪除未使用的函數參數
hoist_vars: true, // 變數宣告提升
if_return: true, // if-return 優化
inline: true, // 行內化
join_vars: true, // 變數宣告合併
side_effects: true, // 刪除有副作用的表達式
warnings: false, // 禁用警告
},
mangle: {
properties: {
reserved: ['$', '_'],
regex: /^_/, // 保護以下劃線開頭的屬性
},
toplevel: true, // 頂層變數名也進行混淆
},
format: {
comments: false,
beautify: false,
ascii_only: true, // 只使用 ASCII 字元
wrap_iife: true, // 包裹 IIFE
},
sourceMap: false, // 完全禁用 Source Map
ecma: 2023,
enclose: false,
keep_classnames: false,
keep_fnames: false,
ie8: false,
module: false,
nameCache: null,
safari10: false,
toplevel: true,
},
}));
我修改了必要的部份，並刪除了在我的環境中添加後無法運作的部份。
說實話，設定的便利性確實讓我相當感動。JS 這樣應該可以了吧。
### Lightning CSS
Lightning CSS
import lightningCss from "lume/plugins/lightningcss.ts";
~
site.use(lightningCss({
extensions: [".css"],
include: /.+\.css$/,
options: {
minify: true,
sourceMap: false,
drafts: {
nesting: true,
customMedia: true,
},
nonStandard: {
deepSelectorCombinator: true, // 啟用深層選擇器組合器（如果需要）
},
targets: {
android: 98,
chrome: 98,
edge: 98,
firefox: 97,
ios_saf: 15,
safari: 15,
opera: 83,
samsung: 16,
},
browserslist: null,
},
}));
~~~
說實話，我對這個不太感興趣，所以沒什麼特別要說的。
我想預設設定應該就足夠了，所以沒有選項也沒關係。
Minify HTML
Minify HTML 說實話，由於前一個階段已經進行了某種程度的優化，所以這只是抱著玩玩的心態，想說還有這種東西。
import minifyHTML from "lume/plugins/minify_html.ts";
~~~
site.use(minifyHTML());
建置後的 HTML 檔案會像這樣。
對於直接接觸 HTML 檔案的人來說，這可能只會感到厭惡，但實際上我只會從建置前的 .md 檔案或 LumeCMS 的瀏覽器中操作，所以不太在意。
結果
如果沒有載入 Google 相關的內容，速度會很快。
說實話，最終還是會歸結到如何處理外部載入的問題上。
嗯…… 實際上，我的目的是盡可能減少手動操作來加速，所以不打算再深入探究了。雖然還不滿意，但大概就是盯著 Network 面板再調整一下吧。就這樣了。
雖然結束得有點模糊，但還是請大家多多指教。
順帶一提，我大概在凌晨一點左右醒來，心情飄飄然地擺弄了一下，結果就變成這樣了。這就是所謂的「飄飄然時光」。也請給我「毛茸茸時光」。