Skip to content

Commit 5abff64

Browse files
TimerTimer
authored
Remove thread-loader (#5170)
* Remove thread-loader After the cache is warm, it is possible for thread-loader to hurt speed * Disable babel output formatting
1 parent 7f5ec49 commit 5abff64

File tree

4 files changed

+134
-202
lines changed

4 files changed

+134
-202
lines changed

‎fixtures/output/webpack-message-formatting/index.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ describe('webpack message formatting', () => {
1919
semaphore.release();
2020
});
2121

22-
it('formats babel syntax error', async () => {
22+
xit('formats babel syntax error', async () => {
2323
fs.copySync(
2424
path.join(__dirname, 'src', 'AppBabel.js'),
2525
path.join(testDirectory, 'src', 'App.js')

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

+67-102
Original file line numberDiff line numberDiff line change
@@ -218,115 +218,80 @@ module.exports = {
218218
{
219219
test: /\.(js|jsx)$/,
220220
include: paths.appSrc,
221-
use: [
222-
// This loader parallelizes code compilation, it is optional but
223-
// improves compile time on larger projects
224-
{
225-
loader: require.resolve('thread-loader'),
226-
options: {
227-
poolTimeout: Infinity, // keep workers alive for more effective watch mode
228-
// Forwards the process args (such as --require) to the child
229-
// workers. Ensures that the worker operates in the same kind
230-
// of environment than the current one (important in case a
231-
// preloaded script modifies the env)
232-
workerNodeArgs: process.execArgv,
233-
},
234-
},
235-
{
236-
loader: require.resolve('babel-loader'),
237-
options: {
238-
customize: require.resolve(
239-
'babel-preset-react-app/webpack-overrides'
240-
),
241-
// @remove-on-eject-begin
242-
babelrc: false,
243-
configFile: false,
244-
presets: [require.resolve('babel-preset-react-app')],
245-
// Make sure we have a unique cache identifier, erring on the
246-
// side of caution.
247-
// We remove this when the user ejects because the default
248-
// is sane and uses Babel options. Instead of options, we use
249-
// the react-scripts and babel-preset-react-app versions.
250-
cacheIdentifier: getCacheIdentifier('development', [
251-
'babel-plugin-named-asset-import',
252-
'babel-preset-react-app',
253-
'react-dev-utils',
254-
'react-scripts',
255-
]),
256-
// @remove-on-eject-end
257-
plugins: [
258-
[
259-
require.resolve('babel-plugin-named-asset-import'),
260-
{
261-
loaderMap: {
262-
svg: {
263-
ReactComponent:
264-
'@svgr/webpack?-prettier,-svgo![path]',
265-
},
266-
},
221+
loader: require.resolve('babel-loader'),
222+
options: {
223+
customize: require.resolve(
224+
'babel-preset-react-app/webpack-overrides'
225+
),
226+
// @remove-on-eject-begin
227+
babelrc: false,
228+
configFile: false,
229+
presets: [require.resolve('babel-preset-react-app')],
230+
// Make sure we have a unique cache identifier, erring on the
231+
// side of caution.
232+
// We remove this when the user ejects because the default
233+
// is sane and uses Babel options. Instead of options, we use
234+
// the react-scripts and babel-preset-react-app versions.
235+
cacheIdentifier: getCacheIdentifier('development', [
236+
'babel-plugin-named-asset-import',
237+
'babel-preset-react-app',
238+
'react-dev-utils',
239+
'react-scripts',
240+
]),
241+
// @remove-on-eject-end
242+
plugins: [
243+
[
244+
require.resolve('babel-plugin-named-asset-import'),
245+
{
246+
loaderMap: {
247+
svg: {
248+
ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
267249
},
268-
],
269-
],
270-
// This is a feature of `babel-loader` for webpack (not Babel itself).
271-
// It enables caching results in ./node_modules/.cache/babel-loader/
272-
// directory for faster rebuilds.
273-
cacheDirectory: true,
274-
// Don't waste time on Gzipping the cache
275-
cacheCompression: false,
276-
},
277-
},
278-
],
250+
},
251+
},
252+
],
253+
],
254+
// This is a feature of `babel-loader` for webpack (not Babel itself).
255+
// It enables caching results in ./node_modules/.cache/babel-loader/
256+
// directory for faster rebuilds.
257+
cacheDirectory: true,
258+
// Don't waste time on Gzipping the cache
259+
cacheCompression: false,
260+
},
279261
},
280262
// Process any JS outside of the app with Babel.
281263
// Unlike the application JS, we only compile the standard ES features.
282264
{
283265
test: /\.js$/,
284266
exclude: /@babel(?:\/|\\{1,2})runtime/,
285-
use: [
286-
// This loader parallelizes code compilation, it is optional but
287-
// improves compile time on larger projects
288-
{
289-
loader: require.resolve('thread-loader'),
290-
options: {
291-
poolTimeout: Infinity, // keep workers alive for more effective watch mode
292-
// Forwards the process args (such as --require) to the child
293-
// workers. Ensures that the worker operates in the same kind
294-
// of environment than the current one (important in case a
295-
// preloaded script modifies the env)
296-
workerNodeArgs: process.execArgv,
297-
},
298-
},
299-
{
300-
loader: require.resolve('babel-loader'),
301-
options: {
302-
babelrc: false,
303-
configFile: false,
304-
compact: false,
305-
presets: [
306-
[
307-
require.resolve('babel-preset-react-app/dependencies'),
308-
{ helpers: true },
309-
],
310-
],
311-
cacheDirectory: true,
312-
// Don't waste time on Gzipping the cache
313-
cacheCompression: false,
314-
// @remove-on-eject-begin
315-
cacheIdentifier: getCacheIdentifier('development', [
316-
'babel-plugin-named-asset-import',
317-
'babel-preset-react-app',
318-
'react-dev-utils',
319-
'react-scripts',
320-
]),
321-
// @remove-on-eject-end
322-
// If an error happens in a package, it's possible to be
323-
// because it was compiled. Thus, we don't want the browser
324-
// debugger to show the original code. Instead, the code
325-
// being evaluated would be much more helpful.
326-
sourceMaps: false,
327-
},
328-
},
329-
],
267+
loader: require.resolve('babel-loader'),
268+
options: {
269+
babelrc: false,
270+
configFile: false,
271+
compact: false,
272+
presets: [
273+
[
274+
require.resolve('babel-preset-react-app/dependencies'),
275+
{ helpers: true },
276+
],
277+
],
278+
cacheDirectory: true,
279+
// Don't waste time on Gzipping the cache
280+
cacheCompression: false,
281+
// @remove-on-eject-begin
282+
cacheIdentifier: getCacheIdentifier('development', [
283+
'babel-plugin-named-asset-import',
284+
'babel-preset-react-app',
285+
'react-dev-utils',
286+
'react-scripts',
287+
]),
288+
// @remove-on-eject-end
289+
// If an error happens in a package, it's possible to be
290+
// because it was compiled. Thus, we don't want the browser
291+
// debugger to show the original code. Instead, the code
292+
// being evaluated would be much more helpful.
293+
sourceMaps: false,
294+
},
330295
},
331296
// "postcss" loader applies autoprefixer to our CSS.
332297
// "css" loader resolves paths in CSS and adds assets as dependencies.

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

+66-98
Original file line numberDiff line numberDiff line change
@@ -283,111 +283,79 @@ module.exports = {
283283
{
284284
test: /\.(js|jsx)$/,
285285
include: paths.appSrc,
286-
use: [
287-
// This loader parallelizes code compilation, it is optional but
288-
// improves compile time on larger projects
289-
{
290-
loader: require.resolve('thread-loader'),
291-
options: {
292-
// Forwards the process args (such as --require) to the child
293-
// workers. Ensures that the worker operates in the same kind
294-
// of environment than the current one (important in case a
295-
// preloaded script modifies the env)
296-
workerNodeArgs: process.execArgv,
297-
},
298-
},
299-
{
300-
loader: require.resolve('babel-loader'),
301-
options: {
302-
customize: require.resolve(
303-
'babel-preset-react-app/webpack-overrides'
304-
),
305-
// @remove-on-eject-begin
306-
babelrc: false,
307-
configFile: false,
308-
presets: [require.resolve('babel-preset-react-app')],
309-
// Make sure we have a unique cache identifier, erring on the
310-
// side of caution.
311-
// We remove this when the user ejects because the default
312-
// is sane and uses Babel options. Instead of options, we use
313-
// the react-scripts and babel-preset-react-app versions.
314-
cacheIdentifier: getCacheIdentifier('production', [
315-
'babel-plugin-named-asset-import',
316-
'babel-preset-react-app',
317-
'react-dev-utils',
318-
'react-scripts',
319-
]),
320-
// @remove-on-eject-end
321-
plugins: [
322-
[
323-
require.resolve('babel-plugin-named-asset-import'),
324-
{
325-
loaderMap: {
326-
svg: {
327-
ReactComponent:
328-
'@svgr/webpack?-prettier,-svgo![path]',
329-
},
330-
},
286+
287+
loader: require.resolve('babel-loader'),
288+
options: {
289+
customize: require.resolve(
290+
'babel-preset-react-app/webpack-overrides'
291+
),
292+
// @remove-on-eject-begin
293+
babelrc: false,
294+
configFile: false,
295+
presets: [require.resolve('babel-preset-react-app')],
296+
// Make sure we have a unique cache identifier, erring on the
297+
// side of caution.
298+
// We remove this when the user ejects because the default
299+
// is sane and uses Babel options. Instead of options, we use
300+
// the react-scripts and babel-preset-react-app versions.
301+
cacheIdentifier: getCacheIdentifier('production', [
302+
'babel-plugin-named-asset-import',
303+
'babel-preset-react-app',
304+
'react-dev-utils',
305+
'react-scripts',
306+
]),
307+
// @remove-on-eject-end
308+
plugins: [
309+
[
310+
require.resolve('babel-plugin-named-asset-import'),
311+
{
312+
loaderMap: {
313+
svg: {
314+
ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
331315
},
332-
],
333-
],
334-
cacheDirectory: true,
335-
// Save disk space when time isn't as important
336-
cacheCompression: true,
337-
compact: true,
338-
},
339-
},
340-
],
316+
},
317+
},
318+
],
319+
],
320+
cacheDirectory: true,
321+
// Save disk space when time isn't as important
322+
cacheCompression: true,
323+
compact: true,
324+
},
341325
},
342326
// Process any JS outside of the app with Babel.
343327
// Unlike the application JS, we only compile the standard ES features.
344328
{
345329
test: /\.js$/,
346330
exclude: /@babel(?:\/|\\{1,2})runtime/,
347-
use: [
348-
// This loader parallelizes code compilation, it is optional but
349-
// improves compile time on larger projects
350-
{
351-
loader: require.resolve('thread-loader'),
352-
options: {
353-
// Forwards the process args (such as --require) to the child
354-
// workers. Ensures that the worker operates in the same kind
355-
// of environment than the current one (important in case a
356-
// preloaded script modifies the env)
357-
workerNodeArgs: process.execArgv,
358-
},
359-
},
360-
{
361-
loader: require.resolve('babel-loader'),
362-
options: {
363-
babelrc: false,
364-
configFile: false,
365-
compact: false,
366-
presets: [
367-
[
368-
require.resolve('babel-preset-react-app/dependencies'),
369-
{ helpers: true },
370-
],
371-
],
372-
cacheDirectory: true,
373-
// Save disk space when time isn't as important
374-
cacheCompression: true,
375-
// @remove-on-eject-begin
376-
cacheIdentifier: getCacheIdentifier('production', [
377-
'babel-plugin-named-asset-import',
378-
'babel-preset-react-app',
379-
'react-dev-utils',
380-
'react-scripts',
381-
]),
382-
// @remove-on-eject-end
383-
// If an error happens in a package, it's possible to be
384-
// because it was compiled. Thus, we don't want the browser
385-
// debugger to show the original code. Instead, the code
386-
// being evaluated would be much more helpful.
387-
sourceMaps: false,
388-
},
389-
},
390-
],
331+
loader: require.resolve('babel-loader'),
332+
options: {
333+
babelrc: false,
334+
configFile: false,
335+
compact: false,
336+
presets: [
337+
[
338+
require.resolve('babel-preset-react-app/dependencies'),
339+
{ helpers: true },
340+
],
341+
],
342+
cacheDirectory: true,
343+
// Save disk space when time isn't as important
344+
cacheCompression: true,
345+
// @remove-on-eject-begin
346+
cacheIdentifier: getCacheIdentifier('production', [
347+
'babel-plugin-named-asset-import',
348+
'babel-preset-react-app',
349+
'react-dev-utils',
350+
'react-scripts',
351+
]),
352+
// @remove-on-eject-end
353+
// If an error happens in a package, it's possible to be
354+
// because it was compiled. Thus, we don't want the browser
355+
// debugger to show the original code. Instead, the code
356+
// being evaluated would be much more helpful.
357+
sourceMaps: false,
358+
},
391359
},
392360
// "postcss" loader applies autoprefixer to our CSS.
393361
// "css" loader resolves paths in CSS and adds assets as dependencies.

‎packages/react-scripts/package.json

-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,6 @@
5959
"sass-loader": "7.1.0",
6060
"style-loader": "0.23.0",
6161
"terser-webpack-plugin": "1.1.0",
62-
"thread-loader": "1.2.0",
6362
"url-loader": "1.1.1",
6463
"webpack": "4.19.1",
6564
"webpack-dev-server": "3.1.9",

0 commit comments

Comments
 (0)