Compile code in parallel (facebook#3778)

* Cheap perf gains * Whoopsie

Author: Timer

packages/react-scripts/config/webpack.config.dev.js

@@ -164,29 +164,45 @@ module.exports = {
  {
  test: /\.(js|jsx|mjs)$/,
  include: paths.appSrc,
- loader: require.resolve('babel-loader'),
- options: {
- // @remove-on-eject-begin
- babelrc: false,
- presets: [require.resolve('babel-preset-react-app')],
- // @remove-on-eject-end
- // This is a feature of `babel-loader` for webpack (not Babel itself).
- // It enables caching results in ./node_modules/.cache/babel-loader/
- // directory for faster rebuilds.
- cacheDirectory: true,
- },
+ use: [
+ // This loader parallelizes code compilation, it is optional but
+ // improves compile time on larger projects
+ require.resolve('thread-loader'),
+ {
+ loader: require.resolve('babel-loader'),
+ options: {
+ // @remove-on-eject-begin
+ babelrc: false,
+ presets: [require.resolve('babel-preset-react-app')],
+ // @remove-on-eject-end
+ // This is a feature of `babel-loader` for webpack (not Babel itself).
+ // It enables caching results in ./node_modules/.cache/babel-loader/
+ // directory for faster rebuilds.
+ cacheDirectory: true,
+ },
+ },
+ ],
  },
  // Process any JS outside of the app with Babel.
  // Unlike the application JS, we only compile the standard ES features.
  {
  test: /\.js$/,
- loader: require.resolve('babel-loader'),
- options: {
- babelrc: false,
- compact: false,
- presets: [require.resolve('babel-preset-react-app/dependencies')],
- cacheDirectory: true,
- },
+ use: [
+ // This loader parallelizes code compilation, it is optional but
+ // improves compile time on larger projects
+ require.resolve('thread-loader'),
+ {
+ loader: require.resolve('babel-loader'),
+ options: {
+ babelrc: false,
+ compact: false,
+ presets: [
+ require.resolve('babel-preset-react-app/dependencies'),
+ ],
+ cacheDirectory: true,
+ },
+ },
+ ],
  },
  // "postcss" loader applies autoprefixer to our CSS.
  // "css" loader resolves paths in CSS and adds assets as dependencies.

packages/react-scripts/config/webpack.config.prod.js

@@ -172,26 +172,42 @@ module.exports = {
  {
  test: /\.(js|jsx|mjs)$/,
  include: paths.appSrc,
- loader: require.resolve('babel-loader'),
- options: {
- // @remove-on-eject-begin
- babelrc: false,
- presets: [require.resolve('babel-preset-react-app')],
- // @remove-on-eject-end
- compact: true,
- },
+ use: [
+ // This loader parallelizes code compilation, it is optional but
+ // improves compile time on larger projects
+ require.resolve('thread-loader'),
+ {
+ loader: require.resolve('babel-loader'),
+ options: {
+ // @remove-on-eject-begin
+ babelrc: false,
+ presets: [require.resolve('babel-preset-react-app')],
+ // @remove-on-eject-end
+ compact: true,
+ },
+ },
+ ],
  },
  // Process any JS outside of the app with Babel.
  // Unlike the application JS, we only compile the standard ES features.
  {
  test: /\.js$/,
- loader: require.resolve('babel-loader'),
- options: {
- babelrc: false,
- compact: false,
- presets: [require.resolve('babel-preset-react-app/dependencies')],
- cacheDirectory: true,
- },
+ use: [
+ // This loader parallelizes code compilation, it is optional but
+ // improves compile time on larger projects
+ require.resolve('thread-loader'),
+ {
+ loader: require.resolve('babel-loader'),
+ options: {
+ babelrc: false,
+ compact: false,
+ presets: [
+ require.resolve('babel-preset-react-app/dependencies'),
+ ],
+ cacheDirectory: true,
+ },
+ },
+ ],
  },
  // The notation here is somewhat confusing.
  // "postcss" loader applies autoprefixer to our CSS.

packages/react-scripts/package.json

@@ -54,6 +54,7 @@
  "react-dev-utils": "^5.0.0",
  "style-loader": "0.19.0",
  "sw-precache-webpack-plugin": "0.11.4",
+ "thread-loader": "1.1.2",
  "uglifyjs-webpack-plugin": "1.1.6",
  "url-loader": "0.6.2",
  "webpack": "3.8.1",