为什么我的 Create React App Dev Server 需要很长时间才能启动？

Question

我已经使用 Create React App 在 React 中创建了一个 Web 应用程序。在我的开发过程中，我的开发服务器的启动时间急剧增加。现在启动大约需要 8 分钟。我正在使用 Craco 修改我的 Webpack 配置并编译我的 Less 主题，但我可以确认，不使用 Craco 启动也需要同样的时间。当我使用 Craco 和 Webpackbar 运行我的服务器时，我可以看出大部分启动时间都是由 babel-loader 转译 node_modules 中的文件占用的，所以我怀疑这要么是我的配置或我的依赖项的问题。该项目是用 TypeScript 编写的，除了 React 之外，我最大的两个依赖项是 Ant Design (antd) 和 Ant Design Icons (@antd/icons)。

我已包含 package.json 和 craco.config.js 以及下面文件的依赖项以显示依赖项树：

//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";

如何修改我的 Craco 配置以获得合理的开发服务器启动时间？

Answer 1

我正在回答我自己的问题，因为我找到了一个可行的解决方案，但我没有将其标记为正确，因为我不相信我已经完全解决了问题。我将启动时间缩短到了 2 分钟左右，但考虑到我的项目并不太复杂，我仍然认为启动不应该花那么长时间。我仍然相信 Babel 的转译超出了应有的程度。

尽管使用eslint: { enable: false }似乎对我的 Craco 配置没有任何影响，但设置DISABLE_ESLINT_PLUGIN=true似乎.env有效（文档）。

我在 Craco 配置中添加了以下选项，这大大缩短了开发服务器的启动时间：

//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 */ }
    }
  ]
}

需要注意的几点：

• 虽然 Babel 缓存确实可以工作，但在Craco 更新以支持新发布的 CRA v5（3 天前发布）并支持Webpack v5 持久缓存之前，Webpack 缓存将无法工作。同时，额外的配置选项将被忽略。
• 虽然这些设置适用于约 95% 的构建，但Webpack 开发人员预计这会在约 5% 的项目中失败
• 尽管我在任何地方都找不到它的记录，但Webpackbar 源的此文件夹中的所有报告者名称都可以作为字符串传递到reporters数组中。
• 我还尝试让我的项目使用 SWC 进行编译以提高性能，但是当我访问我的应用程序时，它告诉我 React 未定义。我可能会进一步调查这一点。

有用的资源：

• 这篇关于 Webpack/Babel/ESLint 缓存的中型文章
• 关于 Webpack 缓存的 Webpack 文档
• 关于持久缓存的官方 Webpack 指南
• 关于 babel-loader 选项的 Webpack 文档
• Create React App 高级配置环境变量列表