Skip to content
This repository has been archived by the owner on Jan 26, 2019. It is now read-only.

Commit

Permalink
Add support for happypack to get faster builds on large projects
Browse files Browse the repository at this point in the history
  • Loading branch information
Koen Van Geert committed Nov 23, 2017
1 parent bdc024d commit 7abc0bb
Show file tree
Hide file tree
Showing 4 changed files with 71 additions and 22 deletions.
3 changes: 3 additions & 0 deletions packages/react-scripts/config/paths.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ module.exports = {
testsSetup: resolveApp('src/setupTests.ts'),
appNodeModules: resolveApp('node_modules'),
appTsConfig: resolveApp('tsconfig.json'),
appTsLint: resolveApp('tslint.json'),
publicUrl: getPublicUrl(resolveApp('package.json')),
servedPath: getServedPath(resolveApp('package.json')),
};
Expand All @@ -80,6 +81,7 @@ module.exports = {
testsSetup: resolveApp('src/setupTests.ts'),
appNodeModules: resolveApp('node_modules'),
appTsConfig: resolveApp('tsconfig.json'),
appTsLint: resolveApp('tslint.json'),
appTsTestConfig: resolveApp('tsconfig.test.json'),
publicUrl: getPublicUrl(resolveApp('package.json')),
servedPath: getServedPath(resolveApp('package.json')),
Expand Down Expand Up @@ -112,6 +114,7 @@ if (
testsSetup: resolveOwn('template/src/setupTests.ts'),
appNodeModules: resolveOwn('node_modules'),
appTsConfig: resolveOwn('template/tsconfig.json'),
appTsLint: resolveOwn('template/tslint.json'),
appTsTestConfig: resolveOwn('template/tsconfig.test.json'),
publicUrl: getPublicUrl(resolveOwn('package.json')),
servedPath: getServedPath(resolveOwn('package.json')),
Expand Down
42 changes: 32 additions & 10 deletions packages/react-scripts/config/webpack.config.dev.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@ const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const HappyPack = require('happypack');
const os = require('os');
const getClientEnvironment = require('./env');
const paths = require('./paths');

Expand Down Expand Up @@ -119,15 +122,6 @@ module.exports = {
// TODO: Disable require.ensure as it's not a standard language feature.
// We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
// { parser: { requireEnsure: false } },

// First, run the linter.
// It's important to do this before Babel processes the JS.
{
test: /\.(ts|tsx)$/,
loader: require.resolve('tslint-loader'),
enforce: 'pre',
include: paths.appSrc,
},
{
test: /\.js$/,
loader: require.resolve('source-map-loader'),
Expand All @@ -154,7 +148,14 @@ module.exports = {
{
test: /\.(ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('ts-loader'),
use: [
{
loader: require.resolve('happypack/loader'),
options: {
id: 'ts',
},
},
],
},
// Process JS with Babel.
{
Expand Down Expand Up @@ -264,6 +265,27 @@ module.exports = {
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

// Perform type checking and linting in a separate process to speed up compilation
new ForkTsCheckerWebpackPlugin({
async: false,
tsconfig: paths.appTsConfig,
tslint: paths.appTsLint,
}),

// Makes initial webpack builds faster by transforming files in parallel.
new HappyPack({
id: 'ts',
threads: Math.max(Math.min(os.cpus().length - 1, 4), 1),
loaders: [
{
loader: require.resolve('ts-loader'),
options: {
happyPackMode: true,
},
},
],
}),
],
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
Expand Down
43 changes: 33 additions & 10 deletions packages/react-scripts/config/webpack.config.prod.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ const ManifestPlugin = require('webpack-manifest-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const HappyPack = require('happypack');
const os = require('os');
const paths = require('./paths');
const getClientEnvironment = require('./env');

Expand Down Expand Up @@ -50,7 +53,7 @@ const cssFilename = 'static/css/[name].[contenthash:8].css';
// To have this structure working with relative paths, we have to use custom options.
const extractTextPluginOptions = shouldUseRelativeAssetPaths
? // Making sure that the publicPath goes back to to build folder.
{ publicPath: Array(cssFilename.split('/').length).join('../') }
{ publicPath: Array(cssFilename.split('/').length).join('../') }
: {};

// This is the production configuration.
Expand Down Expand Up @@ -126,14 +129,6 @@ module.exports = {
// We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
// { parser: { requireEnsure: false } },

// First, run the linter.
// It's important to do this before Babel processes the JS.
{
test: /\.(ts|tsx)$/,
loader: require.resolve('tslint-loader'),
enforce: 'pre',
include: paths.appSrc,
},
{
test: /\.js$/,
loader: require.resolve('source-map-loader'),
Expand All @@ -159,7 +154,14 @@ module.exports = {
{
test: /\.(ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('ts-loader')
use: [
{
loader: require.resolve('happypack/loader'),
options: {
id: 'ts',
},
},
],
},
// Process JS with Babel.
{
Expand Down Expand Up @@ -350,6 +352,27 @@ module.exports = {
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

// Perform type checking and linting in a separate process to speed up compilation
new ForkTsCheckerWebpackPlugin({
async: false,
tsconfig: paths.appTsConfig,
tslint: paths.appTsLint,
}),

// Makes initial webpack builds faster by transforming files in parallel.
new HappyPack({
id: 'ts',
threads: Math.max(Math.min(os.cpus().length - 1, 4), 1),
loaders: [
{
loader: require.resolve('ts-loader'),
options: {
happyPackMode: true,
},
},
],
}),
],
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
Expand Down
5 changes: 3 additions & 2 deletions packages/react-scripts/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,9 @@
"dotenv": "4.0.0",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.5",
"fork-ts-checker-webpack-plugin": "^0.2.8",
"fs-extra": "3.0.1",
"happypack": "^4.0.0",
"html-webpack-plugin": "2.29.0",
"jest": "20.0.4",
"object-assign": "4.1.1",
Expand All @@ -53,7 +55,6 @@
"ts-jest": "^21.1.4",
"ts-loader": "^3.1.1",
"tslint": "^5.8.0",
"tslint-loader": "^3.5.3",
"tslint-react": "^3.2.0",
"typescript": "~2.6.1",
"source-map-loader": "^0.2.3"
Expand All @@ -65,4 +66,4 @@
"optionalDependencies": {
"fsevents": "1.1.2"
}
}
}

0 comments on commit 7abc0bb

Please sign in to comment.