diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 74651384349..c975a58c790 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/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. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 829bcbd6114..222c4482eb1 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/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. diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 87f0693fcc7..aa7c62bc8fb 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -54,6 +54,7 @@ "react-dev-utils": "^4.2.1", "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",