[frontend] バンドルサイズ削減したい優先度低 #24

h-takeyeah · 2023-09-01T04:44:08Z

next build してできるファイルが大きすぎてかなわないので，サイズを減らしたいです．Chakra-UI がかなり悪さをしているようなのでそこをなんとかすればいい線行くと思います．

Chakra UI のバンドルサイズを削る方法 2023/01版

@next/bundle-analyzer で分析した結果を添付します．
analyze.zip

The text was updated successfully, but these errors were encountered:

h-takeyeah · 2023-09-08T15:07:41Z

だんだん減らしていく．

next.config.js は基本的にこの内容
SSR はしない．参照→ Deploying: Static Exports | Next.js
app router も使ってない．page router モード
- app router 使うと Static Exports したときに Dynamic Routing が使えなくなるから

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",
};

module.exports = nextConfig;

まずは， 5e8e648 時点で NEXT_PUBLIC_ENVOY_BASE_URL=http://localhost:8080 pnpm build した結果)(以降同じコマンドでビルドを試す)．

chunks/pages/_app-f26f9992b30fc3be.js 96 kB が曲者っぽい．

何もしてない状態

> next build

- info Linting and checking validity of types
- info Creating an optimized production build
- info Compiled successfully
- info Collecting page data
- info Generating static pages (7/7)
- info Finalizing page optimization

Route (pages)                              Size     First Load JS
┌ ○ /                                      1.04 kB         176 kB
├   /_app                                  0 B             172 kB
├ ○ /404                                   180 B           172 kB
├ ○ /contests/[contest_slug]/tasks         3.77 kB         178 kB
├ ○ /healthcheck                           2.95 kB         196 kB
├ ○ /login                                 3.15 kB         213 kB
└ ○ /register                              6.31 kB         217 kB
+ First Load JS shared by all              172 kB
  ├ chunks/framework-a336eba791abf541.js   45.2 kB
  ├ chunks/main-688d2f0a2d2b6d4a.js        28.5 kB
  ├ chunks/pages/_app-f26f9992b30fc3be.js  96 kB
  └ chunks/webpack-469dd8363f428160.js     1.91 kB

○  (Static)  automatically rendered as static HTML (uses no initial props)

h-takeyeah · 2023-09-08T15:41:03Z

75d46ef (未 push)

かなり減ったが，まだまだ

Provider 変更 Toast 無効化

> next build

- info Linting and checking validity of types
- info Creating an optimized production build
- info Compiled successfully
- info Collecting page data
- info Generating static pages (7/7)
- info Finalizing page optimization

Route (pages)                              Size     First Load JS
┌ ○ /                                      1.04 kB         139 kB
├   /_app                                  0 B             130 kB
├ ○ /404                                   180 B           130 kB
├ ○ /contests/[contest_slug]/tasks         4.16 kB         142 kB
├ ○ /healthcheck                           3.21 kB         160 kB
├ ○ /login                                 3.1 kB          177 kB
└ ○ /register                              6.34 kB         180 kB
+ First Load JS shared by all              130 kB
  ├ chunks/framework-a336eba791abf541.js   45.2 kB
  ├ chunks/main-688d2f0a2d2b6d4a.js        28.5 kB
  ├ chunks/pages/_app-def69c1bb1c488a3.js  54.1 kB
  └ chunks/webpack-6b5d230168ba4bdc.js     1.91 kB

○  (Static)  automatically rendered as static HTML (uses no initial props)

h-takeyeah · 2023-09-08T16:05:15Z

MSW を抜いてみた．もともと dynamic import しているため変化なし．

Route (pages)                              Size     First Load JS
┌ ○ /                                      1.04 kB         138 kB
├   /_app                                  0 B             129 kB
├ ○ /404                                   180 B           129 kB
├ ○ /contests/[contest_slug]/tasks         4.16 kB         141 kB
├ ○ /healthcheck                           472 B           157 kB
├ ○ /login                                 3.02 kB         175 kB
└ ○ /register                              6.27 kB         178 kB
+ First Load JS shared by all              129 kB
  ├ chunks/framework-a336eba791abf541.js   45.2 kB
  ├ chunks/main-688d2f0a2d2b6d4a.js        28.5 kB
  ├ chunks/pages/_app-a9fdaaaf3d7872f3.js  54.1 kB
  └ chunks/webpack-2d6c20b89449f43d.js     1.04 kB

○  (Static)  automatically rendered as static HTML (uses no initial props)

h-takeyeah · 2023-09-09T05:00:28Z

a5c6d50 (未コミット)

.swcrc 追加してみた．

{
  "env": {
    "targets": "> 0.25%, not dead"
  }
}

browserslist を明示したがほぼ変化なし．このコミットだけではないが，ページ別に見ると gRPC 叩いてるページはどうしてもサイズが大きくなってしまうな．

Route (pages)                                Size     First Load JS
┌ ○ /                                        1.04 kB         139 kB
├   /_app                                    0 B             130 kB
├ ○ /404                                     180 B           130 kB
├ ○ /contests/[contest_slug]/tasks (341 ms)  4.16 kB         142 kB
├ ○ /healthcheck                             3.21 kB         160 kB
├ ○ /login                                   3.1 kB          177 kB
└ ○ /register                                6.34 kB         180 kB
+ First Load JS shared by all                130 kB
  ├ chunks/framework-a336eba791abf541.js     45.2 kB
  ├ chunks/main-688d2f0a2d2b6d4a.js          28.5 kB
  ├ chunks/pages/_app-def69c1bb1c488a3.js    54.1 kB
  └ chunks/webpack-6b5d230168ba4bdc.js       1.91 kB

○  (Static)  automatically rendered as static HTML (uses no initial props)

h-takeyeah · 2023-09-09T05:35:45Z

Chakra に手を入れる．まず extendBaseTheme を使い，(はじめから全テーマが使えるようになっている状態ではなく)テーマを一つずつ追加していくのをやる．

参考

chakra-ui/chakra-ui/issues/4975
https://chakra-ui.com/changelog/v2.4.2#react-242

h-takeyeah · 2023-09-09T06:15:33Z

74c76a0 未コミット

chakra-ui-optimization-loader 使ってみたけどあまり変化なし．その前に extendBaseTheme を extendTheme に置き換えてしまったので最初の何もしてない状態と比べるのがよいと思われる．それでもあまり減ってないな．

Route (pages)                              Size     First Load JS
┌ ○ /                                      1.04 kB         139 kB
├   /_app                                  0 B             130 kB
├ ○ /404                                   180 B           130 kB
├ ○ /contests/[contest_slug]/tasks         4.16 kB         142 kB
├ ○ /healthcheck                           3.21 kB         160 kB
├ ○ /login                                 3.1 kB          177 kB
└ ○ /register                              6.34 kB         180 kB
+ First Load JS shared by all              130 kB
  ├ chunks/framework-a336eba791abf541.js   45.2 kB
  ├ chunks/main-688d2f0a2d2b6d4a.js        28.5 kB
  ├ chunks/pages/_app-ee6ad91167551c18.js  54.1 kB
  └ chunks/webpack-6b5d230168ba4bdc.js     1.91 kB

○  (Static)  automatically rendered as static HTML (uses no initial props)

h-takeyeah · 2023-09-09T06:23:39Z

突然だが，pages/_app.tsx を下記のようにして

-import customizedTheme from "@/src/config/theme";
+//import customizedTheme from "@/src/config/theme";
 import { defaultErrorMap } from "@/src/config/zod";
 //import { ChakraBaseProvider } from "@chakra-ui/react";
 import { ChakraProvider as ChakraBaseProvider } from "@chakra-ui/provider"
@@ -12,7 +12,7 @@ z.setErrorMap(defaultErrorMap);
 const MyApp = ({ Component, pageProps }: AppProps) => {
   return (
     //<ChakraBaseProvider toastOptions={{ defaultOptions: { isClosable: true } }} theme={customizedTheme}>
-    <ChakraBaseProvider theme={customizedTheme}>
+    <ChakraBaseProvider>
       <Component {...pageProps} />
     </ChakraBaseProvider>
   );

反則だが theme を一切渡さないと 20kB くらい減る．逆に言えば Chakra をこねくり回して到達できる理想値はここ．実際は一切テーマを当てないということはないのであり得ない値にはなってしまうが．

Route (pages)                              Size     First Load JS
┌ ○ /                                      1.04 kB         121 kB
├   /_app                                  0 B             112 kB
├ ○ /404                                   180 B           112 kB
├ ○ /contests/[contest_slug]/tasks         4.16 kB         125 kB
├ ○ /healthcheck                           3.21 kB         142 kB
├ ○ /login                                 3.1 kB          160 kB
└ ○ /register                              6.34 kB         163 kB
+ First Load JS shared by all              112 kB
  ├ chunks/framework-a336eba791abf541.js   45.2 kB
  ├ chunks/main-688d2f0a2d2b6d4a.js        28.5 kB
  ├ chunks/pages/_app-1efd29dd5970e005.js  36.7 kB
  └ chunks/webpack-6b5d230168ba4bdc.js     1.91 kB

○  (Static)  automatically rendered as static HTML (uses no initial props)

右端の縦長の長方形が pages/_app.tsx 由来のコード．もともと 20kB (Gzipped) くらいあったのが 3kB (Gzipped) くらいにまで減っている．

h-takeyeah · 2023-09-09T06:28:17Z

zod が必要なのは form 周りだけなので pages/_app.tsx で読み込まなくてもいい説．ただ日本語表記とかを当てようとすると結局ルートで読み込んでおいたほうが面倒がないんだろうなとは思う．こういうときに React 的にはどう解決するのがスマートなんだろうか．

追記 ca969e6 で修正された

h-takeyeah self-assigned this Sep 1, 2023

h-takeyeah changed the title ~~[frontend] バンドルサイズの改善に挑戦~~ [frontend] バンドルサイズの改善に挑戦優先度低 Sep 1, 2023

h-takeyeah changed the title ~~[frontend] バンドルサイズの改善に挑戦優先度低~~ [frontend] バンドルサイズ削減したい優先度低 Sep 1, 2023

This comment has been minimized.

Sign in to view

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[frontend] バンドルサイズ削減したい優先度低 #24

[frontend] バンドルサイズ削減したい優先度低 #24

h-takeyeah commented Sep 1, 2023

h-takeyeah commented Sep 8, 2023 •

edited

Loading

h-takeyeah commented Sep 8, 2023 •

edited

Loading

h-takeyeah commented Sep 8, 2023 •

edited

Loading

h-takeyeah commented Sep 9, 2023 •

edited

Loading

h-takeyeah commented Sep 9, 2023 •

edited

Loading

h-takeyeah commented Sep 9, 2023

h-takeyeah commented Sep 9, 2023 •

edited

Loading

h-takeyeah commented Sep 9, 2023 •

edited

Loading

This comment has been minimized.

[frontend] バンドルサイズ削減したい 優先度低 #24

[frontend] バンドルサイズ削減したい 優先度低 #24

Comments

h-takeyeah commented Sep 1, 2023

h-takeyeah commented Sep 8, 2023 • edited Loading

h-takeyeah commented Sep 8, 2023 • edited Loading

h-takeyeah commented Sep 8, 2023 • edited Loading

h-takeyeah commented Sep 9, 2023 • edited Loading

h-takeyeah commented Sep 9, 2023 • edited Loading

h-takeyeah commented Sep 9, 2023

h-takeyeah commented Sep 9, 2023 • edited Loading

h-takeyeah commented Sep 9, 2023 • edited Loading

This comment has been minimized.

[frontend] バンドルサイズ削減したい優先度低 #24

[frontend] バンドルサイズ削減したい優先度低 #24

h-takeyeah commented Sep 8, 2023 •

edited

Loading

h-takeyeah commented Sep 8, 2023 •

edited

Loading

h-takeyeah commented Sep 8, 2023 •

edited

Loading

h-takeyeah commented Sep 9, 2023 •

edited

Loading

h-takeyeah commented Sep 9, 2023 •

edited

Loading

h-takeyeah commented Sep 9, 2023 •

edited

Loading

h-takeyeah commented Sep 9, 2023 •

edited

Loading