create-react-app 使用技巧及源码分析

现在大部分 react 项目都是基于 create-react-app 初始化的，对于普通的项目，使用默认的 webpack 配置完全够用。今天讲讲 create-react-app 的使用技巧和源码分析。

如何加速构建

代码写多了会发现 webpack 每次启动都很慢，可以通过删除配置、添加多线程处理来优化体验。

去除 eslint-loader

eslint-loader 的功能是将 eslint 检测的内容显示到命令行，如果确保写的代码没有问题，可以去除掉。去除之后 webpack-dev-server 开启速度明显提升。

去除上面的代码

使用 thread-loader 或者 happypack

thread-loader^[1] 会将后面的 loader 放置在一个 worker 池里面运行，以达到多线程构建。每个 worker 都是一个单独的有 600ms 限制的 node.js 进程。同时跨进程的数据交换也会被限制，请在高开销的 loader 中使用。

{
  test: /\.(js|ts)x?$/i,
  use: [
    'thread-loader',
    {
      loader: 'babel-loader',
      options: {
        cacheDirectory: true,
      },
    },
  ],
  exclude: /node_modules/,
},

happypack^[2] 通过多线程并发加速构建过程，不过包作者现在很少维护了，推荐用 thread-loader。配置略微复杂，而且对复杂的 js less 配置不太友好。

**exports.plugins = [
  new HappyPack({
    id: 'jsx',
    threads: 4,
    loaders: [ 'babel-loader' ]
  }),

  new HappyPack({
    id: 'styles',
    threads: 2,
    loaders: [ 'style-loader', 'css-loader', 'less-loader' ]
  })
];

exports.module.rules = [
  {
    test: /\.js$/,
    use: 'happypack/loader?id=jsx'
  },

  {
    test: /\.less$/,
    use: 'happypack/loader?id=styles'
  },
]**

偷懒的话选择 thread-loader 就好了，加一行代码。

react-app-rewired 和 customize-cra

如果不想 eject 项目怎么办？

react-app-rewired^[3] 可以在不 eject 也不创建额外 react-scripts 的情况下修改 create-react-app 内置的 webpack 配置，然后你将拥有 create-react-app 的一切特性，且可以根据你的需要去配置 webpack 的 plugins, loaders 等，推荐配合 customize-cra 一起使用。

使用方法

yarn add react-app-rewired customize-cra -D

更改 package.json

"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": &