对 Lume 进行性能调优

6 min

lume
language: ja bn en es hi pt ru zh-cn zh-tw

大家好，我是无能。
服务器端的缓存等设置仍然是以前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,  // ゲッターを純粋な関数として扱う  
      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,  // ソースマップを完全に無効化  
    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 面板再调整一下吧。就到这里。
虽然结束得有点模糊，但下次再见。

顺便说一句，大约凌晨 1 点醒来，心情迷迷糊糊地捣鼓了一下，就变成了这样。这就是所谓的“迷糊时间”。也请给我“毛茸茸时间”吧。