ビルドとデプロイ手順の検討をする #9

h-takeyeah · 2022-10-27T06:49:03Z

ビルドオプションの選択
デプロイ先の選択

h-takeyeah · 2022-10-27T06:52:17Z

ビルド関係は vite.config.ts を調整していく。

まずは何も変更しないでビルドした場合 vite.config.ts #aaaab

❯ npm run build

> [email protected] build
> vue-tsc --noEmit && vite build

vite v3.1.8 building for production...
✓ 1447 modules transformed.
dist/index.html                                      0.42 KiB
dist/assets/index.7abdeec0.js                        0.41 KiB / gzip: 0.30 KiB
dist/assets/tasks.1a44d3f9.js                        1.11 KiB / gzip: 0.71 KiB
dist/assets/submits.c8e8b36c.js                      1.80 KiB / gzip: 0.80 KiB
dist/assets/_arrayPush.169b7e0f.js                   0.47 KiB / gzip: 0.32 KiB
dist/assets/ranking.9827e2ac.js                      1.80 KiB / gzip: 0.79 KiB
dist/assets/login.2f51994a.js                        46.45 KiB / gzip: 15.89 KiB
dist/assets/index.ddb9f88c.css                       0.77 KiB / gzip: 0.34 KiB
dist/assets/ranking.8e86ad24.css                     0.65 KiB / gzip: 0.25 KiB
dist/assets/index.cf276d29.css                       3.16 KiB / gzip: 0.99 KiB
dist/assets/submits.dcd516c1.css                     0.65 KiB / gzip: 0.25 KiB
dist/assets/login.2f26d0aa.css                       16.70 KiB / gzip: 2.39 KiB
dist/assets/szpp-judge-default-layout.eb0cd6cf.css   21.81 KiB / gzip: 3.50 KiB
dist/assets/el-table-column.ee7fa436.css             29.17 KiB / gzip: 4.24 KiB
dist/assets/el-col.d6a11303.css                      56.55 KiB / gzip: 7.06 KiB
dist/assets/el-table-column.c2e24d38.js              77.05 KiB / gzip: 26.22 KiB
dist/assets/szpp-judge-default-layout.a5fea94f.js    88.57 KiB / gzip: 29.80 KiB
dist/assets/el-col.ba7328e5.js                       46.41 KiB / gzip: 16.61 KiB
dist/assets/index.49fd28ec.js                        1323.69 KiB / gzip: 399.54 KiB

(!) Some chunks are larger than 500 KiB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

index が 1.3MB と大きすぎるので怒られている

h-takeyeah · 2022-10-27T06:58:46Z

次に以下の設定を追加した場合

build: {
    rollupOptions: {
      output: {
        manualChunks: {
          axios: ['axios'],
          pinia: ['pinia'],
          vue: ['vue'],
          'vue-router': ['vue-router']
        }
      }
    }
  }

ライブラリの分離をしてもらう

❯ npm run build

> [email protected] build
> vue-tsc --noEmit && vite build

vite v3.1.8 building for production...
✓ 1447 modules transformed.
dist/index.html                                      0.72 KiB
dist/assets/axios.4e67a48b.js                        0.58 KiB / gzip: 0.33 KiB
dist/assets/pinia.460e468a.js                        3.60 KiB / gzip: 1.83 KiB
dist/assets/index.0f393fee.js                        0.52 KiB / gzip: 0.35 KiB
dist/assets/tasks.02ad7688.js                        1.23 KiB / gzip: 0.76 KiB
dist/assets/submits.ea2c075a.js                      1.93 KiB / gzip: 0.86 KiB
dist/assets/_arrayPush.f84827cc.js                   0.47 KiB / gzip: 0.32 KiB
dist/assets/ranking.62e380a8.js                      1.92 KiB / gzip: 0.84 KiB
dist/assets/index.ddb9f88c.css                       0.77 KiB / gzip: 0.34 KiB
dist/assets/index.cf276d29.css                       3.16 KiB / gzip: 0.99 KiB
dist/assets/submits.dcd516c1.css                     0.65 KiB / gzip: 0.25 KiB
dist/assets/ranking.8e86ad24.css                     0.65 KiB / gzip: 0.25 KiB
dist/assets/szpp-judge-default-layout.eb0cd6cf.css   21.81 KiB / gzip: 3.50 KiB
dist/assets/login.8b462c42.js                        46.57 KiB / gzip: 15.95 KiB
dist/assets/login.2f26d0aa.css                       16.70 KiB / gzip: 2.39 KiB
dist/assets/el-table-column.ee7fa436.css             29.17 KiB / gzip: 4.24 KiB
dist/assets/el-col.d6a11303.css                      56.55 KiB / gzip: 7.06 KiB
dist/assets/vue-router.5657e1fe.js                   22.13 KiB / gzip: 9.07 KiB
dist/assets/el-col.ff23cb11.js                       46.40 KiB / gzip: 16.61 KiB
dist/assets/szpp-judge-default-layout.2fa579d0.js    88.64 KiB / gzip: 29.84 KiB
dist/assets/el-table-column.f784511b.js              77.05 KiB / gzip: 26.23 KiB
dist/assets/vue.03be7e72.js                          85.01 KiB / gzip: 33.57 KiB
dist/assets/index.0e1b6cf3.js                        1212.34 KiB / gzip: 356.00 KiB

(!) Some chunks are larger than 500 KiB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

あまり変化は見られなかった

h-takeyeah · 2022-10-27T07:20:58Z

ここでサイズの大きなファイルが何なのか素性を調べるために minify を止めて再度ビルドしてみた。デフォルトではesbuldがminify処理を引き受けている。

build: {
    minify: false
  }

結果はこちら。

❯ npm run build

> [email protected] build
> vue-tsc --noEmit && vite build

vite v3.1.8 building for production...
✓ 1447 modules transformed.
dist/index.html                                      0.42 KiB
dist/assets/index.7abdeec0.js                        0.86 KiB / gzip: 0.46 KiB
dist/assets/tasks.1a44d3f9.js                        1.57 KiB / gzip: 0.88 KiB
dist/assets/_arrayPush.169b7e0f.js                   1.03 KiB / gzip: 0.48 KiB
dist/assets/ranking.9827e2ac.js                      4.42 KiB / gzip: 1.19 KiB
dist/assets/submits.c8e8b36c.js                      4.52 KiB / gzip: 1.21 KiB
dist/assets/index.cff1e9f2.css                       0.77 KiB / gzip: 0.34 KiB
dist/assets/szpp-judge-default-layout.3afe89de.css   22.08 KiB / gzip: 3.59 KiB
dist/assets/submits.e93c3dcf.css                     0.79 KiB / gzip: 0.27 KiB
dist/assets/el-table-column.b00953e2.css             29.54 KiB / gzip: 4.25 KiB
dist/assets/ranking.87af3d85.css                     0.79 KiB / gzip: 0.27 KiB
dist/assets/login.c08f418c.css                       16.71 KiB / gzip: 2.40 KiB
dist/assets/index.afc8db33.css                       3.48 KiB / gzip: 1.08 KiB
dist/assets/el-col.789bd5ac.css                      56.65 KiB / gzip: 7.09 KiB
dist/assets/login.2f51994a.js                        104.30 KiB / gzip: 23.18 KiB
dist/assets/el-col.ba7328e5.js                       90.70 KiB / gzip: 22.20 KiB
dist/assets/szpp-judge-default-layout.a5fea94f.js    179.08 KiB / gzip: 40.03 KiB
dist/assets/el-table-column.c2e24d38.js              163.63 KiB / gzip: 36.30 KiB
dist/assets/index.49fd28ec.js                        1656.93 KiB / gzip: 433.03 KiB

警告は出なかった。minifyしてる割に大きかったら警告するだけでminifyをオフにしてたらチェックされないのかも。
サイズの大きかった dist/assets/index.49fd28ec.js の中身を調べたところ…ちょっと分からなかったのでツールを導入して調べる

h-takeyeah · 2022-10-27T07:28:22Z

Vite製のアプリケーションにBundle Analyzerを設定するを参考にした。

plugins: [
...
    visualizer({
      open: true,
      filename: 'dist/stats.html',
      gzipSize: true,
      brotliSize: true
    })
]

出力されたファイルのスクリーンショットがこれ

おそらく vue3-markdown-it がデカさの原因だな、ということでコイツを外に分ける。

先ほどの manualChunks があまり効果がなかったのは vue や vue-router よりも vue3-markdown-it の方がバンドルサイズに与える影響が大きかったからということだろう

h-takeyeah · 2022-10-27T07:36:11Z

vue3-markdown-it を分ける設定

  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'vue3-markdown-it': ['vue3-markdown-it']
        }
      }
    }
  }

結果、予想通り vue-markdown-it 自体は仕方ないが、それ以外のファイルをコンパクトにすることができた

❯ npm run build

> [email protected] build
> vue-tsc --noEmit && vite build

vite v3.1.8 building for production...
✓ 1447 modules transformed.
dist/index.html                                      0.50 KiB
dist/assets/index.9aa94278.js                        30.09 KiB / gzip: 11.94 KiB
dist/assets/index.2eb0ecc4.js                        0.44 KiB / gzip: 0.32 KiB
dist/assets/tasks.8c088c88.js                        1.15 KiB / gzip: 0.73 KiB
dist/assets/submits.2b505a81.js                      1.85 KiB / gzip: 0.83 KiB
dist/assets/_arrayPush.b3cd0af1.js                   0.47 KiB / gzip: 0.32 KiB
dist/assets/ranking.59468e76.js                      1.84 KiB / gzip: 0.81 KiB
dist/assets/index.ddb9f88c.css                       0.77 KiB / gzip: 0.34 KiB
dist/assets/login.45068399.js                        46.49 KiB / gzip: 15.91 KiB
dist/assets/submits.dcd516c1.css                     0.65 KiB / gzip: 0.25 KiB
dist/assets/index.cf276d29.css                       3.16 KiB / gzip: 0.99 KiB
dist/assets/szpp-judge-default-layout.eb0cd6cf.css   21.81 KiB / gzip: 3.50 KiB
dist/assets/ranking.8e86ad24.css                     0.65 KiB / gzip: 0.25 KiB
dist/assets/login.2f26d0aa.css                       16.70 KiB / gzip: 2.39 KiB
dist/assets/el-col.2f991adf.js                       46.42 KiB / gzip: 16.62 KiB
dist/assets/el-table-column.ee7fa436.css             29.17 KiB / gzip: 4.24 KiB
dist/assets/szpp-judge-default-layout.7ee565b5.js    88.62 KiB / gzip: 29.83 KiB
dist/assets/el-col.d6a11303.css                      56.55 KiB / gzip: 7.06 KiB
dist/assets/el-table-column.eb026ef3.js              77.06 KiB / gzip: 26.23 KiB
dist/assets/vue3-markdown-it.e74dc7a2.js             1293.76 KiB / gzip: 388.02 KiB

(!) Some chunks are larger than 500 KiB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

h-takeyeah · 2022-10-27T08:00:41Z

issues になっているほどデカいらしい。これは仕方ない
JanGuillermo/vue3-markdown-it#327

h-takeyeah · 2022-10-27T08:19:44Z

かなり画質悪いけどブラウザで見ると当該ファイルが他のファイルの数倍から十数倍であることが見て取れる

h-takeyeah · 2022-10-27T08:46:49Z

ひとまず #9 (comment) の設定でビルドすることにする。

see GH-9

h-takeyeah · 2022-10-28T09:36:20Z

デプロイは

1. main に merge
2. GitHub Actions で npm run build
3. firebase hosting に デプロイ

で行く

ビルド時の環境変数を読み込むため、repository secrets を用いる。

方法

まず firebase のセットアップ(firebase のプロジェクトは作成済みとして)

firebase init hosting

途中で GitHub Actions の設定をしてもらう(.github/workflows/**.ymlが作成される)。ここでできたファイルを以下のページを参考に、改変して目標を達成する。

h-takeyeah · 2022-10-29T08:22:54Z

この辺りで導入したのでクローズ

52896a4

h-takeyeah · 2022-10-30T04:43:39Z

#1 (comment)__

h-takeyeah added a commit that referenced this issue Oct 27, 2022

perf: ビルド時に vue3-markdown-it を分けるように設定した

1bc02ee

see GH-9

h-takeyeah closed this as completed Oct 29, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ビルドとデプロイ手順の検討をする #9

ビルドとデプロイ手順の検討をする #9

h-takeyeah commented Oct 27, 2022 •

edited

Loading

h-takeyeah commented Oct 27, 2022 •

edited

Loading

h-takeyeah commented Oct 27, 2022 •

edited

Loading

h-takeyeah commented Oct 27, 2022

h-takeyeah commented Oct 27, 2022 •

edited

Loading

h-takeyeah commented Oct 27, 2022

h-takeyeah commented Oct 27, 2022 •

edited

Loading

h-takeyeah commented Oct 27, 2022

h-takeyeah commented Oct 27, 2022

h-takeyeah commented Oct 28, 2022

h-takeyeah commented Oct 29, 2022

h-takeyeah commented Oct 30, 2022

ビルドとデプロイ手順の検討をする #9

ビルドとデプロイ手順の検討をする #9

Comments

h-takeyeah commented Oct 27, 2022 • edited Loading

h-takeyeah commented Oct 27, 2022 • edited Loading

h-takeyeah commented Oct 27, 2022 • edited Loading

h-takeyeah commented Oct 27, 2022

h-takeyeah commented Oct 27, 2022 • edited Loading

h-takeyeah commented Oct 27, 2022

h-takeyeah commented Oct 27, 2022 • edited Loading

h-takeyeah commented Oct 27, 2022

h-takeyeah commented Oct 27, 2022

h-takeyeah commented Oct 28, 2022

方法

h-takeyeah commented Oct 29, 2022

h-takeyeah commented Oct 30, 2022

h-takeyeah commented Oct 27, 2022 •

edited

Loading

h-takeyeah commented Oct 27, 2022 •

edited

Loading

h-takeyeah commented Oct 27, 2022 •

edited

Loading

h-takeyeah commented Oct 27, 2022 •

edited

Loading

h-takeyeah commented Oct 27, 2022 •

edited

Loading