diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 7465138434..c975a58c79 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 829bcbd611..222c4482eb 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 5d819ae99a..e8f8fdc5ca 100644 --- a/packages/react-scripts/package.json +++ b/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",