React Styleguidist 开始 slooooooow答案

【问题标题】：React Styleguidist starting slooooooowReact Styleguidist 开始 slooooooow
【发布时间】：2021-03-09 10:59:08
【问题描述】：

我们使用https://react-styleguidist.js.org/ 来开发和展示组件以供重复使用。我们使用它已经有几年了，它由 JS 和 TS 文件组成。以styleguidist server 开始时，项目速度慢得令人难以忍受（大约 4 分钟）。我尝试了很多方法来加快速度，但似乎没有任何区别。

我试过了：

this react-docgen-typescript 的解决方法，没有明显改善。
official 配置。
根据this 推荐在tsconfig.json 中设置skipLibCheck: true。

奇怪的是，当只使用默认的propsParser 而不使用react-docgen-typescript 时，启动似乎快了一点。但并不是所有的道具都包含在生成的文档中。

所以我真的没有想法......我们的风格指南是基于 CRA v4.0.1 构建的。也许CRA是问题所在？或者问题可能是我们的样式指南同时包含 JS 和 TS 文件，这在某种程度上“混淆”了 TS 编译器......？

欢迎任何帮助、建议或建议...

package.json

{
  "name": "@xxx/core",
  "version": "2.7.0",
  "scripts": {
    "build:transpile-files": "NODE_ENV=production babel --config-file ./babel.config.js src --out-dir dist --extensions '.ts','.tsx','.js','.jsx' --ignore **/*.d.ts,**/*.spec.tsx,**/*.spec.js,**/styleguide.styled.js,**/setupTests.ts",
    "build:copy-files": "node ./scripts/copy-files.js",
    "build:ts-prod": " tsc --p tsconfig.build.json",
    "build:ts-dev": "tsc --p tsconfig.json",
    "build": "rm -rf dist && yarn build:ts-prod && yarn build:transpile-files && yarn build:copy-files",
    "styleguide": "styleguidist server",
    "styleguide:build": "styleguidist build",
    "test": "DEBUG_PRINT_LIMIT=100000 react-scripts test --env=jest-environment-jsdom-sixteen --color --bail",
    "test:coverage": "CI=true react-scripts test --env=jest-environment-jsdom-sixteen --color --bail --coverage",
    "lint": "eslint src --ext .js,.jsx,.ts,.tsx,.snap",
    "prettier": "npx prettier \"src/**/*.{js,jsx,ts,tsx,scss}\"",
    "format": "yarn prettier --write"
  },
  "dependencies": {
    "@material-ui/lab": "^4.0.0-alpha.57",
    "@tippyjs/react": "^4.2.0",
    "antd": "^4.9.1",
    "fix-webm-duration": "1.0.0",
    "react-dates": "^21.8.0",
    "react-draggable": "^4.3.1",
    "react-virtualized-auto-sizer": "^1.0.2",
    "react-window": "^1.8.5",
    "react-window-infinite-loader": "^1.0.5",
    "recharts": "^1.8.5",
    "tippy.js": "^6.2.7",
    "underscore": "^1.9.1"
  },
  "peerDependencies": {
    "@material-ui/core": "4.11.0",
    "@material-ui/icons": "4.9.1",
    "moment": "^2.29.0",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-select": "^3.1.0",
    "styled-components": "^5.0.1"
  },
  "devDependencies": {
    "@babel/cli": "7.5.5",
    "@material-ui/core": "4.11.0",
    "@material-ui/icons": "4.9.1",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.3",
    "@testing-library/react-hooks": "^5.0.0",
    "@testing-library/user-event": "^12.6.0",
    "@types/dom-mediacapture-record": "^1.0.7",
    "@types/jest": "^26.0.20",
    "@types/node": "^14.14.22",
    "@types/react": "^16.14.2",
    "@types/react-dates": "^21.8.1",
    "@types/react-dom": "^16.9.10",
    "@types/react-select": "^3.1.2",
    "@types/recharts": "^1.8.19",
    "@types/styled-components": "^5.1.7",
    "@types/testing-library__react": "^10.2.0",
    "@types/testing-library__react-hooks": "^3.4.1",
    "@types/underscore": "^1.11.0",
    "@typescript-eslint/eslint-plugin": "^4.14.0",
    "@typescript-eslint/parser": "^4.14.0",
    "babel-loader": "^8.1.0",
    "enzyme": "3.10.0",
    "enzyme-adapter-react-16": "1.14.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^6.11.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-babel": "5.3.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jest": "^24.1.3",
    "eslint-plugin-jest-dom": "^3.6.5",
    "eslint-plugin-jsx-a11y": "6.4.1",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-testing-library": "^3.10.1",
    "fs-extra": "^8.1.0",
    "jest-canvas-mock": "^2.3.0",
    "jest-environment-jsdom-sixteen": "^1.0.3",
    "jest-enzyme": "7.0.2",
    "jest-styled-components": "^7.0.3",
    "moment": "^2.29.0",
    "prettier": "^1.19.1",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-docgen-typescript": "^1.21.0",
    "react-dom": "^16.13.1",
    "react-scripts": "^4.0.1",
    "react-select": "^3.1.0",
    "react-styleguidist": "^11.1.5",
    "react-test-renderer": "^16.13.1",
    "styled-components": "^5.0.1",
    "typescript": "^4.1.3"
  },
  "resolutions": {
    "acorn": "^7.1.1",
    "kind-of": "^6.0.3"
  },
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,tsx,ts}",
      "!src/**/{constants,styled,models}.{js,ts}",
      "!src/theme/illustrations/**",
      "!src/theme/icons/**"
    ]
  }
}

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "es6"
    ],
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": false,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react",
    "allowJs": true,
    "outDir": "dist",
    "sourceMap": true,
    "declaration": true,
    "noEmit": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": [
    "src"
  ]
}

styleguide.config.js

const path = require('path')

module.exports = {
  title: 'CoreWeb',
  propsParser: require('react-docgen-typescript').withCustomConfig('./tsconfig.json').parse,
  pagePerSection: true,
  skipComponentsWithoutExample: true,
  styleguideComponents: {
    Wrapper: path.join(__dirname, './src/utils/styleguidist/ThemeWrapper'),
  },
  template: {
    head: {
      links: [
        {
          rel: 'stylesheet',
          href: 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700',
        },
      ],
    },
  },
  sections: [
    {
      name: 'Charts',
      components: () => [
        'src/components/Charts/BarChart/index.tsx',
        'src/components/Charts/LineChart/index.tsx',
        'src/components/Charts/PieChart/index.tsx',
        'src/components/GoalCharts/TaskGoalMetrics/index.tsx',
        'src/components/RegistrationCharts/PainBarChart/index.tsx',
        'src/components/RegistrationCharts/MoodBarChart/index.tsx',
        'src/components/RegistrationCharts/SleepBarChart/index.tsx',
        'src/components/RegistrationCharts/AlcoholBarChart/index.tsx',
        'src/components/RegistrationCharts/BloodPressureBarChart/index.tsx',
        'src/components/RegistrationCharts/ExerciseBarChart/index.tsx',
        'src/components/RegistrationCharts/StepsBarChart/index.tsx',
        'src/components/RegistrationCharts/SmokingBarChart/index.tsx',
        'src/components/RegistrationCharts/WeightLineChart/index.tsx',
        'src/components/RegistrationCharts/WaistHipLineChart/index.tsx',
      ],
    },
    {
      name: 'Data display',
      components: () => [
        'src/components/Avatar/layout.tsx',
        'src/components/Chip/layout.tsx',
        'src/components/DefinitionItem/layout.js',
        'src/components/Graphs/Donut/layout.js',
        'src/components/Image/layout.js',
        'src/components/Lightbox/layout.js',
        'src/components/LinkifyText/layout.js',
        'src/components/ListItemIcon/layout.js',
        'src/components/MediaMosaic/layout.js',
        'src/components/Person/index.tsx',
        'src/components/Table/layout.tsx',
        'src/components/TableSelection/layout.js',
        'src/components/Tag/layout.js',
        'src/components/TruncateWithShow/layout.js',
        'src/components/Typography/layout.tsx',
        'src/components/UnreadItems/index.tsx',
        'src/components/Video/layout.tsx',
        'src/components/CircleWithContent/layout.tsx',
      ],
    },
    {
      name: 'Inputs',
      components: () => [
        'src/components/Button/layout.tsx',
        'src/components/ButtonDropdownSelector/layout.js',
        'src/components/Checkbox/layout.tsx',
        'src/components/DatePickers/InlineDatePicker/layout.js',
        'src/components/DatePickers/Range/layout.js',
        'src/components/DatePickers/Single/index.tsx',
        'src/components/DatePickers/HourMin/index.tsx',
        'src/components/EmojiInputBase/layout.js',
        'src/components/EmojiPicker/layout.js',
        'src/components/FilePicker/layout.tsx',
        'src/components/FilledInput/layout.js',
        'src/components/GenderSelector/layout.tsx',
        'src/components/InputButton/layout.js',
        'src/components/MenuButton/index.tsx',
        'src/components/MultiSelectDropdown/layout.js',
        'src/components/RadioGroup/layout.tsx',
        'src/components/SearchTextField/layout.js',
        'src/components/Select/layout.tsx',
        'src/components/Slider/layout.js',
        'src/components/Switch/layout.js',
        'src/components/TextField/layout.tsx',
        'src/components/TimeSelect/layout.js',
        'src/components/ToggleButtonGroup/layout.tsx',
      ],
    },
    {
      name: 'Surfaces',
      components: () => [
        'src/components/Card/index.tsx',
        'src/components/CardContent/layout.tsx',
        'src/components/ProfileCard/layout.js',
        'src/components/MenuList/layout.js',
      ],
    },
    {
      name: 'Navigation',
      components: () => [
        'src/components/CardTabs/layout.tsx',
        'src/components/Tabs/layout.tsx',
        'src/components/SideNavigation/layout.tsx',
      ],
    },
    {
      name: 'Feedback',
      components: () => [
        'src/components/Confirm/index.tsx',
        'src/components/Dialog/layout.js',
        'src/components/EmptyState/index.tsx',
        'src/components/ErrorBoundary/layout.js',
        'src/components/FormDrawer/layout.js',
        'src/components/InfiniteScroller/layout.js',
        'src/components/Inform/layout.js',
        'src/components/InformDialog/layout.js',
        'src/components/Loading/layout.js',
        'src/components/LoadingV2/layout.js',
        'src/components/LoadingV2/layout.js',
        'src/components/SystemMessage/layout.js',
        'src/components/Tooltip/index.tsx',
      ],
    },
    {
      name: 'Drafts',
      components: () => ['src/components/DraftStatus/layout.tsx'],
    },
    {
      name: 'Goals',
      components: () => [
        'src/components/ExerciseActivityForm/index.tsx',
        'src/components/ExerciseIcon/layout.js',
        'src/components/MoodIcon/layout.js',
        'src/components/PainIcon/layout.js',
        'src/components/GoalIcon/index.tsx',
      ],
    },
    {
      name: 'Groups',
      components: () => [
        'src/components/GroupForm/layout.js',
        'src/components/GroupItem/layout.js',
        'src/components/MessageActionComment/layout.js',
        'src/components/MessageActionLike/layout.js',
        'src/components/GroupPost/index.tsx',
        'src/components/MessageComment/layout.tsx',
        'src/components/MessageStatusComments/layout.js',
        'src/components/MessageStatusLikes/layout.js',
      ],
    },
    {
      name: 'Messages',
      components: () => [
        'src/components/MessageAttachmentLinkForm/layout.js',
        'src/components/MessageEditor/layout.js',
        'src/components/MessageMediaAttachment/layout.js',
      ],
    },
    {
      name: 'Notes',
      components: () => ['src/components/Note/layout.js'],
    },
    {
      name: 'Registrations',
      components: () => [
        'src/components/RegistrationInputTag/layout.js',
        'src/components/RegistrationItem/layout.js',
      ],
    },
    {
      name: 'Media',
      components: () => [
        'src/components/CaptureWebcamImageDialog/index.tsx',
        'src/components/RecordWebcamVideoDialog/index.tsx',
        'src/components/VideoAudioUnavailable/layout.js',
      ],
    },
    {
      name: 'Theme',
      components: () => ['src/theme/colors/layout.js', 'src/theme/borderRadius/layout.tsx'],
    },
    {
      name: 'Icons',
      components: ['src/theme/icons/**/layout.tsx'],
    },
    {
      name: 'Illustrations',
      components: ['src/theme/illustrations/**/layout.js', 'src/theme/illustrations/**/layout.tsx'],
    },
    {
      name: 'Utilities',
      components: () => ['src/utils/**/layout.js'],
    },
  ],
}

【问题讨论】：

这么慢多久了？也许答案隐藏在版本控制历史中。

标签： javascript reactjs typescript create-react-app react-styleguidist

【解决方案1】：

由于您正在使用 TypeScript 并且可能使用 ts-loader（和 babel-loader），您可以尝试使用更快的 TS 转译器，例如 SWC-loader。对我来说，它将初始加载时间减少了大约一半。

实现起来非常简单，只需安装依赖项（@swc/core 和swc-loader）并将加载器添加到styleguide.config.js（custom webpack config）中的webapckConfig。

webpackConfig: {
    ... // your other config here
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          exclude: /(node_modules)/,
          use: {
            loader: "swc-loader",
          }
        },
      ... // your other rules here
      ],
    },
  }

【讨论】：