コンパイルしたファイルがでかすぎて怒られた

いざ、赤線なくなったのでビルド！
…してみたら通ったけど、下記のようなワーニングがでていた

ファイルの容量デカスギ！！！！って怒られているみたい。
箇条書きになってる部分が解決方法なのかな？

1つ目、2つ目の方法

ファイルを分割せよ、とのこと。下記を真似してみる？

3つ目の方法

許容サイズをでかくせよ、とのこと
chunkSizeWarningLimitにパラメータを与えて大きくしてやれば簡単に無視できそうだけど、できればちゃんと解決した方がいいかな

webpack とか bundle analizer とかわからなかったので別スレ立てて考えてからみていく

あざらし

てなわけでバンドル（分割）していく

まずは下記を読んだ

そんなわけで、rollup-plugin-visualizer をインスコしてみたところ、なんかごちゃごちゃしていた（小並感）
はじめてみたからよくわからなかった…(´・ω・｀)
けど、サードパーティー製（特にMUI）がデカデカと占拠しているように見えた
（多分視覚的にわかりやすいや～つだから感覚はあっているはず）

次に、splitVendorChunkPluginを使って、index.js と vendor.js に分割！ここでの考え方を「チャンク」というらしい

チャンクについては下記を読んだ

この、index.js と vendor.js に分割してもまだ先述のワーニングがでたままだったので、
manualChunks で設定してみることにした

とかも参考にしつつ、さっくり書いてみた結果が下記

import { defineConfig, splitVendorChunkPlugin } from "vite";
import react from "@vitejs/plugin-react-swc";
import { visualizer } from "rollup-plugin-visualizer";

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    rollupOptions: {
      plugins: [react(), visualizer(), splitVendorChunkPlugin()],
      output: {
        manualChunks: {
          vendor: ["axios", "react", "react-router-dom", "react-dom"],
          material: ["@mui/material"],
        },
      },
    },
  },
});

これだとワーニングをなくせた！やったね

残る疑問は、実はmui はmaterial以外にも、iconとかx-data-grid も使っている
⇒ material.js にまとめたいなぁと思ったんだけど、index.js でなくて material.js のファイルサイズが多くなってしまった

同じサードパーティー製はまとめるべきなんじゃないの
結局、ファイルサイズはどこくらいまでなら許容なの（わかんなくてデフォルトから変更してない）
まぁでもビルドしたファイルを直接見たり書いたりするわけではないからいいのか？

というのがまだ気になったりする

あざらし

IISでサービスを動かす

基本的にこの記事の通りだけど、IPをたたいてみたら画面真っ白！！！！
⇒画面真っ白になった記事はたくさん出てきたけど、自分の場合はその記事では解決できなかったのであとでスクラップではなく記事に残そうと思う……

【追記】書いた

でも根本解決はできなかった(´・ω・`)

あざらし

とはいえ、これで一応別環境にデプロイすることができたので一旦クローズとする
別Webサーバーにあげることになったら別スレ立てる