Realizando o ajuste de desempenho do Lume
Olá, sou um inútil.
As configurações, como o cache do lado do servidor, ainda eram as do WordPress anterior, então vou alterá-las novamente.
Nginx
Estou armazenando em cache todo o conteúdo necessário no lado do Nginx, que está atuando como proxy reverso.
Em termos de cache antes de chegar ao Apache do lado do backend, acho que pode ser imaginado como um servidor CDN próprio.
Alteração
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;
}
Eu não estava armazenando em cache HTML até agora, mas já que estou usando um gerador de "site estático", adicionei-o.
Além disso, se há algum sentido em ter uma ramificação para decidir se deve ou não armazenar em cache em um site estático, é o seguinte:
if ($request_uri ~* "/wp-admin/|/xmlrpc.php|wp-.*.php|/feed/|sitemap(_index)?.xml") {
set $skip_cache 1;
set $skip_reason URI;
}
Deixei o código aqui intencionalmente. Bem, também é para que eu possa voltar ao WordPress a qualquer momento, mas não quero armazenar em cache coisas como sitemaps, então estou evitando isso.
Dito isso, é mais ou menos isso para o lado do Nginx.
Além disso, como eu costumava ter artigos em /blog, eu tinha configurações de cache separadas para /blog. No entanto, também senti que não havia necessidade de separá-los, então decidi não fazer isso.
Lume
Dei uma olhada nos plugins do Lume e adicionei todos os que pareciam capazes de reduzir o código. Plugins
Terser
Terser
Vou dar uma olhada na documentação do Terser a partir do site do Terser.
É a parte da API Reference Minify options structure
, certo?
Vou alterar apenas as partes que parecem necessárias, enquanto consulto o AI.
É útil que ele adicione comentários para facilitar a compreensão.
$ 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,
},
}));
Altere as partes que pareciam necessárias e removi as partes que não funcionaram quando as adicionei ao meu ambiente.
Para ser honesto, fiquei bastante impressionado com a facilidade de configuração. Será que o JS está bom assim?
### 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,
},
}));
~~~
Para ser honesto, não tenho muito interesse, então não tenho nada de especial a dizer.
Acho que as configurações padrão são provavelmente suficientes, então poderia ter sido sem opções.
Minify HTML
Minify HTML Para ser honesto, já otimizei até certo ponto na etapa anterior, então pensei que isso era apenas algo divertido de se ter.
import minifyHTML from "lume/plugins/minify_html.ts";
~~~
site.use(minifyHTML());
O arquivo HTML após a construção fica assim.
Para quem mexe diretamente com arquivos HTML, isso deve causar repulsa, mas como eu só os toco através do arquivo .md antes da construção ou do navegador do LumeCMS, não me importo muito.
Resultado
Se não houver carregamento de coisas do Google, é rápido.
Para ser honesto, acabo me concentrando em como lidar com carregamentos externos, mas
Hmm... Na verdade, meu objetivo era acelerar o processo o máximo possível sem ter que fazer muito trabalho manual, então não pretendo aprofundar mais nisso. Não estou satisfeito, então talvez eu continue mexendo enquanto encaro o painel de Rede. É isso por enquanto.
É um final um tanto vago, mas conto com vocês novamente.
A propósito, acordei por volta da 1 da manhã e comecei a mexer nas coisas com uma sensação vaga, e foi assim que ficou. É o que chamo de "tempo fofo". Por favor, me dê também um "tempo macio e fofo".