Pourquoi mon serveur Create React App Dev prend-il tant de temps à démarrer ?

Question

J'ai créé une application web en React avec Create React App. Quelque part dans mon processus de développement, le temps de lancement de mon serveur de développement a énormément augmenté. Il faut maintenant environ 8 minutes pour le lancer. J'utilise Craco pour modifier ma configuration Webpack et pour compiler mon thème Less, mais je peux confirmer que le lancement sans Craco prend autant de temps. Lorsque je lance mon serveur avec Craco et Webpackbar, je peux dire que la majorité du temps de lancement est pris par babel-loader qui transpose les fichiers dans node_modules, donc je soupçonne qu'il s'agit d'un problème avec mes configurations ou mes dépendances. Le projet est écrit en TypeScript et mes deux plus grandes dépendances en plus de React sont Ant Design (antd) et Ant Design Icons (@antd/icons).

J'ai inclus mon package.json et craco.config.js ainsi que les dépendances de mes fichiers ci-dessous pour montrer l'arbre de dépendance :

//package.json
{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ant-design/icons": "^4.7.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "antd": "^4.17.2",
    "axios": "^0.23.0",
    "craco-less": "^1.20.0",
    "rc-footer": "^0.6.6",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.3.0",
    "react-syntax-highlighter": "^15.4.4",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@craco/craco": "^6.4.3",
    "@types/antd": "^1.0.0",
    "@types/react-router-dom": "^5.1.9",
    "@types/react-syntax-highlighter": "^13.5.2",
    "@types/webpack-bundle-analyzer": "^4.4.1",
    "@types/webpackbar": "^4.0.2",
    "craco-antd": "^1.19.0",
    "react-scripts": "4.0.3",
    "webpack-bundle-analyzer": "^4.5.0",
    "webpackbar": "^5.0.0-3"
  }
}

//craco.config.js
const CracoAntDesignPlugin = require( "craco-antd" )
const WebpackBar = require( "webpackbar" )
const { BundleAnalyzerPlugin } = require( "webpack-bundle-analyzer" )
const path = require( "path" )
const { getThemeVariables } = require( "antd/dist/theme" )

module.exports = {
  eslint: {
    enable: false // This doesn't seem to do anything, either. I still get eslint warnings after launching.
  },
  webpack: {
    cacheDirectory: true, // I'm not sure if this has any effect.
    plugins: [
      // @ts-ignore
      new WebpackBar( { profile: true } ),
      new BundleAnalyzerPlugin(
        {
          openAnalyzer: false,
          analyzerMode: "static",
          reportFilename: path.join( __dirname,  "build", "bundle_analysis.html" )
        }
      )
    ]
  },
  plugins: [
    {
      plugin: CracoAntDesignPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: getThemeVariables( {
              dark: true
            } )
          }
        }
      }
    }
  ]
}

//Imports in index.tsx
import React, { createElement, lazy, Suspense, useEffect, useState } from "react";
import ReactDOM from "react-dom";
import PropTypes, { InferProps } from "prop-types";
import {
  BrowserRouter,
  Switch,
  Route,
  Redirect,
  NavLink,
  useRouteMatch
} from "react-router-dom"
import { Col, Empty, Layout, Menu, Row, Skeleton } from "antd"
import { MenuOutlined } from "@ant-design/icons"

import { Callback, Repeat } from "./Utils"
import Header from "./Header"
import Footer from "./Footer"

import "./index.less"
import "rc-footer/assets/index.css"
import reportWebVitals from "./reportWebVitals"

//Imports in Header.tsx
import { useEffect, useState } from "react"

//Imports in Footer.tsx
import { Button, Card, Space } from "antd"
import useBreakpoint from "antd/lib/grid/hooks/useBreakpoint"
import RCFooter from "rc-footer"

//Imports in MyAccount.tsx
import { Button, Card, Col, Form, Input, Row } from "antd";

//Imports in Utils.tsx
import { useEffect } from "react"
import PropTypes, { InferProps } from "prop-types"

//Imports in index.less
@import "normalize.css";
@import "~antd/dist/antd.less";
@import "~antd/dist/antd.dark.less";

Comment puis-je modifier ma configuration Craco pour avoir un temps de lancement du serveur de développement raisonnable ?

Answer 1

Je réponds à ma propre question parce que j'ai trouvé une solution viable, mais je ne la marque pas comme correcte parce que je ne pense pas avoir complètement résolu le problème. J'ai réduit le temps de lancement à environ 2 minutes, mais je ne pense toujours pas que le lancement devrait prendre autant de temps, étant donné que mon projet n'est pas trop compliqué. Je pense toujours que Babel transpose plus qu'il ne le devrait.

Bien que l'utilisation de eslint: { enable: false } ne semble pas avoir d'effet dans ma configuration Craco, le réglage de DISABLE_ESLINT_PLUGIN=true en .env semble fonctionner ( documents ).

J'ai ajouté les options suivantes à ma configuration Craco, ce qui a considérablement amélioré le temps de lancement de mon serveur de développement :

//craco.config.js

//Imports are unchanged

module.exports = {
  typescript: {
    // Visual Studio Code does type checking, so CRA doesn't need to:
    enableTypeChecking: false
  },
  babel: {
    loaderOptions: {
      //Enable babel-loader cache:
      cacheDirectory: true, //This is the correct location for cacheDirectory (it was wrong in the question)
      //Compress cache which improves launch speed at the expense of disk space:
      cacheCompression: false
    }
  },
  webpack: {
    configure: {
      cache: {
        //Enable Webpack cache:
        type: "filesystem"
        //This have any effect until Craco updates to CRA v5
        //which has support for Webpack v5 (see notes below)
      }
    },
    plugins: [ //Webpack plugins:
      new WebpackBar(
        {
          reporters: process.env.NODE_ENV === "development"
            ? [
                //Enable default progress bar:
                "fancy",
                //Display time for compile steps after compilation:
                "profile",
                //(Optional) Display launch time and chunck size:
                "stats"
              ]
            : [
                //Hide fancy progress bar and profiling for production build:
                "basic"
              ]
        }
      ),
      new BundleAnalyzerPlugin( { /* Options are unchanged */ } )
    ]
  },
  plugins: [ //Craco plugins:
    {
      plugin: CracoAntDesignPlugin,
      options: { /* Options are unchanged */ }
    }
  ]
}

Quelques points à noter :

• Bien que la mise en cache de Babel fait travail, mise en cache Webpack ne sera pas travailler jusqu'à ce que Craco se met à jour pour prendre en charge la nouvelle version de CRA v5 (publié il y a 3 jours) avec la prise en charge de Webpack v5 Persistent Caching . En attendant, l'option de configuration supplémentaire est ignorée.
• Bien que ces paramètres fonctionnent pour ~95% des constructions, les développeurs de Webpack s'attendent à ce que cela échoue dans ~5% des projets
• Bien que je n'aie pu le trouver documenté nulle part, tous les noms des reporters de la ce dossier de la source Webpackbar peuvent être transmises sous forme de chaînes de caractères à la fonction reporters de la gamme.
• J'ai également essayé de faire en sorte que mon projet compiler avec SWC pour améliorer les performances mais lorsque je visite mon application, elle me dit que React n'est pas défini. Je vais peut-être approfondir la question.

Ressources utiles :

• Cet article de Medium sur la mise en cache de Webpack/Babel/ESLint
• Les documents de Webpack sur Webpack Cache
• Le guide officiel de Webpack sur la mise en cache persistante
• Les documents Webpack sur les options babel-loader
• Liste des variables d'environnement de la configuration avancée de Create React App