掌握 create-react-app 的使用技巧，揭秘源码内涵

2023-09-23 08:33:01

现在大部分 React 项目都是基于 create-react-app 初始化的。对于普通的项目，使用默认的 webpack 配置完全够用。然而，随着项目逐渐复杂，默认配置可能无法满足项目需求，你需要对项目进行针对性的优化。

使用技巧

使用 ejected 命令

create-react-app 提供了 ejected 命令，可以将项目从 create-react-app 中 ejected 出来，生成一个完整的 webpack 配置文件。这样，你就可以对 webpack 配置进行自定义。
使用 webpack-bundle-analyzer 插件

webpack-bundle-analyzer 插件可以帮助你分析 webpack 打包后的文件大小，并生成一个可视化报告。这样，你可以轻松找到项目中哪些文件体积过大，并进行优化。
使用 code-splitting 技术

code-splitting 技术可以将项目代码拆分成多个小的代码块，按需加载。这样，可以减少首次加载的时间，并提升页面的性能。
使用 lazy loading 技术

lazy loading 技术可以延迟加载某些组件，直到它们真正需要被使用时才加载。这样，可以进一步减少首次加载的时间，并提升页面的性能。
使用服务端渲染

服务端渲染可以将 React 组件预先渲染成 HTML，然后再发送到客户端。这样，可以减少客户端的渲染时间，并提升页面的性能。

源码分析

create-react-app 的源码位于 https://github.com/facebook/create-react-app。源码结构如下：

create-react-app
├── bin
│  ├── create-react-app
│  └── react-scripts
├── config
│  ├── paths.js
│  ├── webpack.config.dev.js
│  ├── webpack.config.prod.js
├── node_modules
├── package.json
├── scripts
│  ├── build.js
│  ├── eject.js
│  ├── lint.js
│  ├── start.js
│  ├── test.js
├── src
│  ├── commands
│  ├── createApp.js
│  ├── index.js
│  ├── templates
├── yarn.lock

其中，bin 目录包含 create-react-app 和 react-scripts 命令的实现；config 目录包含 webpack 的配置；node_modules 目录包含 create-react-app 的依赖包；package.json 文件包含 create-react-app 的元数据；scripts 目录包含 create-react-app 的脚本命令；src 目录包含 create-react-app 的源代码；yarn.lock 文件包含 create-react-app 的依赖包版本。