Nuxt3 テキスト圧縮の有効化
Nuxt3 nuxt.config.js 3 83 Nitro Web Nuxt Nitro NitroNuxt3 text compression can be enabled by adding three lines to nuxt.config.js. This reduced the textbased transfer size by about 83 for this website. Nitro is a superfast web server engine that runs anywhere, and Nuxt is powered by Nitro. The three lines added are settings related to Nitro.
by JanitorAug 31, 2023
Nuxt3のテキスト圧縮の有効化の方法です。nuxt.config.jsに3行追加しただけで約83%も削減されました。どうやらデフォルトはfalseのようです。
Nuxt3のテキスト圧縮の有効化の方法です。nuxt.config.jsに3行追加しただけで約83%も削減されました。どうやらデフォルトはfalseのようです。
Jump Links
1.nuxt.config.jsの編集
2.buildして確認
3.結果
4.おわりに
1.nuxt.config.jsの編集
1.nuxt.config.jsの編集
下記3行を追加します。
下記3行を追加します。
nitro: {
compressPublicAssets: true,
},
nitro: {
compressPublicAssets: true,
},
Nitro
https://nitro.unjs.io
NuxtとNitroの関係
https://nuxt.com/docs/guide/concepts/server-engine
Nitro
https://nitro.unjs.io
NuxtとNitroの関係
https://nuxt.com/docs/guide/concepts/server-engine
上のリンク先のウェブサイトを見ると、Nitroというのはどこでも動くウルトラファストなウェブサーバエンジンで、Nuxt3はそのNitroを使って動いています、とのことです。追加した3行はそのNitroに関する設定のようです。
上のリンク先のウェブサイトを見ると、Nitroというのはどこでも動くウルトラファストなウェブサーバエンジンで、Nuxt3はそのNitroを使って動いています、とのことです。追加した3行はそのNitroに関する設定のようです。
2.buildして確認
2.buildして確認
buildして作成されたフォルダ内に「.js.br」というような拡張子のファイルができていればテキスト圧縮の有効化がされています。
buildして作成されたフォルダ内に「.js.br」というような拡張子のファイルができていればテキスト圧縮の有効化がされています。
3.結果
3.結果
Lighthouseで確認してみたところ、下の画像のように、転送サイズが1495.5 KiBから249.1KiBに削減されました。何の苦労もなく何かが83%削減されるなんてことがあっていいのでしょうか。すごい仕組みです。
Lighthouseで確認してみたところ、下の画像のように、転送サイズが1495.5 KiBから249.1KiBに削減されました。何の苦労もなく何かが83%削減されるなんてことがあっていいのでしょうか。すごい仕組みです。
4.おわりに
4.おわりに
まだまだたくさん改善点がありそうです。
まだまだたくさん改善点がありそうです。
Nuxt3 テキスト圧縮の有効化
Nuxt3 nuxt.config.js 3 83 Nitro Web Nuxt Nitro NitroNuxt3 text compression can be enabled by adding three lines to nuxt.config.js. This reduced the textbased transfer size by about 83 for this website. Nitro is a superfast web server engine that runs anywhere, and Nuxt is powered by Nitro. The three lines added are settings related to Nitro.
by JanitorAug 31, 2023
Nuxt3のテキスト圧縮の有効化の方法です。nuxt.config.jsに3行追加しただけで約83%も削減されました。どうやらデフォルトはfalseのようです。
Nuxt3のテキスト圧縮の有効化の方法です。nuxt.config.jsに3行追加しただけで約83%も削減されました。どうやらデフォルトはfalseのようです。
Jump Links
1.nuxt.config.jsの編集
2.buildして確認
3.結果
4.おわりに
1.nuxt.config.jsの編集
1.nuxt.config.jsの編集
下記3行を追加します。
下記3行を追加します。
nitro: {
compressPublicAssets: true,
},
nitro: {
compressPublicAssets: true,
},
Nitro
https://nitro.unjs.io
NuxtとNitroの関係
https://nuxt.com/docs/guide/concepts/server-engine
Nitro
https://nitro.unjs.io
NuxtとNitroの関係
https://nuxt.com/docs/guide/concepts/server-engine
上のリンク先のウェブサイトを見ると、Nitroというのはどこでも動くウルトラファストなウェブサーバエンジンで、Nuxt3はそのNitroを使って動いています、とのことです。追加した3行はそのNitroに関する設定のようです。
上のリンク先のウェブサイトを見ると、Nitroというのはどこでも動くウルトラファストなウェブサーバエンジンで、Nuxt3はそのNitroを使って動いています、とのことです。追加した3行はそのNitroに関する設定のようです。
2.buildして確認
2.buildして確認
buildして作成されたフォルダ内に「.js.br」というような拡張子のファイルができていればテキスト圧縮の有効化がされています。
buildして作成されたフォルダ内に「.js.br」というような拡張子のファイルができていればテキスト圧縮の有効化がされています。
3.結果
3.結果
Lighthouseで確認してみたところ、下の画像のように、転送サイズが1495.5 KiBから249.1KiBに削減されました。何の苦労もなく何かが83%削減されるなんてことがあっていいのでしょうか。すごい仕組みです。
Lighthouseで確認してみたところ、下の画像のように、転送サイズが1495.5 KiBから249.1KiBに削減されました。何の苦労もなく何かが83%削減されるなんてことがあっていいのでしょうか。すごい仕組みです。
4.おわりに
4.おわりに
まだまだたくさん改善点がありそうです。
まだまだたくさん改善点がありそうです。