Оптимизация производительности Lume

8 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-файл после сборки выглядит так:
Image
Те, кто работает с HTML-файлами напрямую, вероятно, будут испытывать отвращение, но я не особо об этом беспокоюсь, так как я работаю только с .md-файлами до сборки или через браузер LumeCMS.

Результат
Быстро, если не загружать Google-сервисы.
Image

Честно говоря, в конечном итоге все сводится к тому, как обрабатывать внешние загрузки.
Хм... На самом деле, моя цель состояла в том, чтобы ускорить процесс, не прилагая слишком много усилий, поэтому я не планирую углубляться дальше. Я не удовлетворен, поэтому, возможно, я просто буду возиться с панелью Network. Вот и все.
Это немного расплывчатое завершение, но я надеюсь на дальнейшее сотрудничество.

Кстати, я проснулся около часа ночи и, находясь в расслабленном состоянии, начал возиться, и вот что получилось. Так называемое "пушистое время". Дайте мне также "мягкое время".