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 会将后面的 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 经过多线程并发加速构建过程，不过包做者如今不多维护了，推荐用 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 能够在不 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

/* package.json */

"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test --env=jsdom",
+ "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
}
复制代码

在根目录下建立 config-overrides.js 文件，而后改为你想要的的配置

const {
  override,
  addDecoratorsLegacy,
  disableEsLint,
  addBundleVisualizer,
  addWebpackAlias,
  adjustWorkbox
} = require("customize-cra");
const path = require("path");

module.exports = override(
  // enable legacy decorators babel plugin
  addDecoratorsLegacy(),

  // disable eslint in webpack
  disableEsLint(),

  // add webpack bundle visualizer if BUNDLE_VISUALIZE flag is enabled
  process.env.BUNDLE_VISUALIZE == 1 && addBundleVisualizer(),

  // add an alias for "ag-grid-react" imports
  addWebpackAlias({
    ["ag-grid-react$"]: path.resolve(__dirname, "src/shared/agGridWrapper.js")
  }),

  // adjust the underlying workbox
  adjustWorkbox(wb =>
    Object.assign(wb, {
      skipWaiting: true,
      exclude: (wb.exclude || []).concat("index.html")
    })
  )
);
复制代码

定制化使用

添加 less

create-react-app 中默认开启了 sass 预处理器编译，想使用 less 须要手工添加。另外对于 css modules ，其内置的作法是对这类文件使用 /\.module\.(scss|sass)$/ 或者 /\.module\.css$/ 检测。若是想要直接对 .css 或 .less 开启 css modules ，须要针对 src 和 node_modules 写两套 loader 处理规则，缘由是 node_modules 下的文件不须要开启 css modules。

create-react-app 内置规则

安装 less 相关依赖

yarn add less less-loader -D
复制代码

对 src 文件夹下面的 less、css文件进行处理，并开启 css modules，这里要注意下，这个配置不针对 node_modules 下的样式文件，node_modules 下的不须要开启 css modules，不然会出问题。

// webpack.config.js
{
  test: /\.(le|c)ss$/i,
  use: [
    isProd
      ? {
          loader: MiniCssExtractPlugin.loader,
        }
      : 'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: {
          localIdentName: isProd ? '[hash:base64]' : '[path][name]__[local]--[hash:base64:5]',
        },
      },
    },
    {
      loader: 'less-loader',
      options: {
        javascriptEnabled: true,
      },
    },
  ].filter(Boolean),
  include: srcPath,
},
复制代码

对 node_modules 的配置

{
  test: /\.(le|c)ss$/i,
  use: [
    isProd
      ? {
          loader: MiniCssExtractPlugin.loader,
        }
      : 'style-loader',
    'css-loader',
    { loader: 'less-loader', options: { javascriptEnabled: true } },
  ].filter(Boolean),
  include: [/node_modules/],
},
复制代码

源码分析总结

terser-webpack-plugin

较新版本的脚手架中使用 terser-webpack-plugin 压缩 js 代码，uglifyjs 已经再也不推荐使用。

terser 这样介绍：uglify-es再也不维护，而且 uglify-js 不支持 ES6+ 语法。

简单使用

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};
复制代码

file-loader 置于末尾，文件会被自动编译到 static/media 目录下

在 webpack.config.js 中，file-loader 是在 oneOf 的数组中的最后一个，表示任何一个文件若是没有命中前面的任何一个 loader，则归 file-loader 接管了。exclude 表示除了这些它都会处理，默认会重命名文件，并复制到 build/static/media/ 目录下。

另外代码中也给出了提示，不要在 file-loader 后面添加 loader，由于全部的剩余文件都会被 file-loader 处理掉

// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
// This loader doesn't use a "test" so it will catch all modules
// that fall through the other loaders.
{
  loader: require.resolve('file-loader'),
  // Exclude `js` files to keep "css" loader working as it injects
  // its runtime that would otherwise be processed through "file" loader.
  // Also exclude `html` and `json` extensions so they get processed
  // by webpacks internal loaders.
  exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
  options: {
    name: 'static/media/[name].[hash:8].[ext]',
  },
},
// ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader.
复制代码

file-loader 和 url-loader 的区别

看看 use-loader 的配置，会发现 options.name 和 file-loader 一致，其实 file-loader 是 url-loader 的退化版本，也就是当文件大小是小于 10000 byte 时，url-loader 会将文件转换成 base64 编码插入到 html 中，不做为独立的一个文件，这样能够减小页面发起的请求数，若是超过这个大小，则使用 file-loader 将文件重命名并复制到 build/static/media 目录下。

// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
  test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
  loader: require.resolve('url-loader'),
  options: {
    limit: imageInlineSizeLimit, // 内置的是 10000 byte
    name: 'static/media/[name].[hash:8].[ext]',
  },
},
复制代码

momentjs 冗余多语言文件

若是有用到 ant design 或直接使用了 momentjs，默认会把多语言的包(node_modules/moment/local/*.js)所有打进来，致使包体积增长，可是咱们不会用到这么多语言，因此须要排除掉。

plugins:[
    ...,
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
]
复制代码

env

create-react-app 能够经过 .env.xxx 来预置一些参数到 process.env 中。具体源码在 react-scripts/config/env.js 中。

核心代码

// 从如下文件中加载配置
const dotenvFiles = [
  `${paths.dotenv}.${NODE_ENV}.local`, // 推荐本地使用
  `${paths.dotenv}.${NODE_ENV}`, // .env.production 或者 .env.development
  NODE_ENV !== 'test' && `${paths.dotenv}.local`, // 推荐本地使用
  paths.dotenv, // .env
].filter(Boolean);
复制代码

// 将 .env 文件的设置应用到 process.env 中
dotenvFiles.forEach(dotenvFile => {
  if (fs.existsSync(dotenvFile)) {
    require('dotenv-expand')(
      require('dotenv').config({
        path: dotenvFile,
      })
    );
  }
});
复制代码

以 REACT_APP_ 开头的将会经过 new webpack.DefinePlugin(env.stringified) 注入到全局的 process.env 中。

// env.js
const REACT_APP = /^REACT_APP_/i;

function getClientEnvironment(publicUrl) {
  const raw = Object.keys(process.env)
    .filter(key => REACT_APP.test(key))
    .reduce(
      (env, key) => {
        env[key] = process.env[key];
        return env;
      },
      {
        // 预置的两个
        NODE_ENV: process.env.NODE_ENV || 'development',
        PUBLIC_URL: publicUrl,
      }
    );
  // Stringify all values so we can feed into Webpack DefinePlugin
  const stringified = {
    'process.env': Object.keys(raw).reduce((env, key) => {
      env[key] = JSON.stringify(raw[key]);
      return env;
    }, {}),
  };
  return { raw, stringified };
}
复制代码

因此你能够愉快的设置一些变量

// .env
REACT_APP_IS_ENV_FILE=TRUE

// .env.development
REACT_APP_IS_DEV_ENV_FILE=TRUE

// .env.local
REACT_APP_IS_LOCAL_ENV_FILE=TRUE
复制代码

浏览器中打印

babel-preset-react-app

babel-preset-react-app 是 create-react-app 下面的一个包，它是 create-react-app 默认的 babel preset，能够用来处理 js 和 ts 。这样就不须要额外的配置 ts-loader，另外它内置支持了 ts 的一些功能（装饰器等），能够很方便的使用。

在咱们的 webpack 配置中引入 babel-preset-react-app 能够简化配置。

---

欢迎你们关注个人掘金和公众号，算法、TypeScript、React 及其生态源码按期讲解。