create-react-appからViteへ移行しアプリを高速化する

2023-03-052024-04-01

はじめに

今回はreact-create-appで作成したアプリをviteへ移行する方法を解説します。
viteはビルド速度が爆速なのでおすすめです。
公式はこちら→https://ja.vitejs.dev/guide/

手順

パッケージのインストール

yarn add --dev vite @vitejs/plugin-react

これでvite本体とreactで使用するためのプラグインのインストールが完了しました。

package.jsonの修正

  "scripts": {
-    "start": "react-scripts start",
+    "start": "vite",
-    "build": "react-scripts build",
+    "build": "vite build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
  },

これでいつも通りyarn startをした時にviteが起動してくれる様になります。

vite.config.jsの追加

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

ルート直下に上記のファイルを作成してください。
ここにviteの設定を記載していきます。
今回はreact上で必要な最低限のプラグインのみを記載しています。

<!DOCTYPE html>
 <html lang="ja">
  <head>
    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+    <script type="module" src="/src/index.jsx"></script>
  </body>
</html>

上記の修正内容としては以下3点を行なっています