Realizando ajustes de rendimiento en Lume
Hola, soy un inútil.
La configuración del caché del lado del servidor, entre otras cosas, seguía siendo la misma que la de WordPress anterior, así que la cambiaré de nuevo.
Nginx
Todo el contenido necesario se almacena en caché en el lado de Nginx, que actúa como proxy inverso.
En el sentido de que se almacena en caché antes de llegar al Apache del lado del backend, se puede pensar como un servidor CDN propio.
Cambios
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;
}
Hasta ahora no había almacenado en caché HTML, pero ya que estoy usando un generador de "sitios estáticos", lo he añadido.
Además, me pregunto si tiene sentido incluir una bifurcación para decidir si almacenar en caché o no en un sitio estático en primer lugar.
if ($request_uri ~* "/wp-admin/|/xmlrpc.php|wp-.*.php|/feed/|sitemap(_index)?.xml") {
set $skip_cache 1;
set $skip_reason URI;
}
He dejado el código aquí a propósito. Bueno, en parte es para poder volver a WordPress en cualquier momento, pero también es porque no quiero almacenar en caché cosas como los sitemaps, así que los he excluido del caché.
Supongo que eso es todo por el lado de Nginx.
Antes, tenía artículos en /blog, así que había configurado un caché diferente para /blog. Sin embargo, me pregunté si realmente tenía sentido separarlos, así que decidí no hacerlo.
Lume
Eché un vistazo a los plugins de Lume y añadí todos los que parecían poder reducir el código. Plugins
Terser
Terser
Desde el sitio de Terser, echaré un vistazo a la documentación de Terser.
Es la parte de API Reference Minify options structure
.
Le pedí a la IA que cambiara solo las partes necesarias.
Agradezco que añada comentarios para que sea más fácil de entender.
$ 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,
},
}));
Cambié las partes necesarias y eliminé las que no funcionaban al añadirlas en mi entorno.
Honestamente, me impresionó bastante lo fácil que es configurarlo. ¿Estará bien así para 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,
},
}));
~~~
Honestamente, no me interesa mucho, así que no tengo nada especial que decir.
Probablemente la configuración predeterminada sea suficiente, así que pensé que estaría bien sin opciones.
Minificar HTML
Minify HTML Honestamente, ya he optimizado hasta cierto punto en la etapa anterior, así que esto es solo para divertirme y ver que también existe esta opción.
import minifyHTML from "lume/plugins/minify_html.ts";
~~~
site.use(minifyHTML());
El archivo HTML después de la compilación se ve así.
Para quienes manipulan archivos HTML directamente, esto podría generar aversión, pero en realidad, solo los toco desde los archivos .md antes de la compilación o desde el navegador de LumeCMS, así que no le presto mucha atención.
Resultado
Si no se incluyen las cargas de Google, es rápido.
Honestamente, al final todo se reduce a cómo manejar las cargas externas,
Hmm... En realidad, mi objetivo era acelerar las cosas sin tener que hacer mucho trabajo manual, así que no planeo profundizar más en esto. No estoy satisfecho, así que supongo que seguiré ajustando mientras miro el panel de red. Eso es todo por ahora.
Es un final un poco vago, pero espero contar con ustedes de nuevo.
Por cierto, me desperté alrededor de la 1 de la madrugada y, con una sensación de ligereza, empecé a trastear y así es como quedó. Lo que se conoce como 'tiempo esponjoso'. También quiero 'tiempo suave y peludo'.