-
-
Notifications
You must be signed in to change notification settings - Fork 8.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[DO-NOT-MERGE] RFC: use esbuild to significantly speedup building #4487
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -8,13 +8,10 @@ | |
// fork of Buble which removes Buble's large dependency and weighs in | ||
// at a smaller size of ~51kB | ||
// https://github.com/FormidableLabs/react-live#what-bundle-size-can-i-expect | ||
const {transform, features: bubleFeatures} = require('@philpl/buble'); | ||
import {transform, features as bubleFeatures} from '@philpl/buble'; | ||
|
||
// This file is designed to mimic what's written in | ||
// https://github.com/kitten/buble/blob/mini/src/index.js, with custom transforms options, | ||
// so that webpack can consume it correctly. | ||
exports.features = bubleFeatures; | ||
|
||
exports.transform = function customTransform(source, options) { | ||
function customTransform(source, options) { | ||
return transform(source, {...options, transforms: {asyncAwait: false}}); | ||
}; | ||
} | ||
|
||
export {bubleFeatures as features, customTransform as transform}; | ||
Comment on lines
-11
to
+17
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Need to turn this into esm to make esbuild happy. |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -17,9 +17,10 @@ import webpack, { | |
Stats, | ||
} from 'webpack'; | ||
import fs from 'fs-extra'; | ||
import TerserPlugin from 'terser-webpack-plugin'; | ||
import OptimizeCSSAssetsPlugin from 'optimize-css-assets-webpack-plugin'; | ||
import CleanCss from 'clean-css'; | ||
// import TerserPlugin from 'terser-webpack-plugin'; | ||
import {ESBuildMinifyPlugin} from 'esbuild-loader'; | ||
// import OptimizeCSSAssetsPlugin from 'optimize-css-assets-webpack-plugin'; | ||
// import CleanCss from 'clean-css'; | ||
import path from 'path'; | ||
import crypto from 'crypto'; | ||
import chalk from 'chalk'; | ||
|
@@ -29,7 +30,7 @@ import { | |
ConfigurePostCssFn, | ||
PostCssOptions, | ||
} from '@docusaurus/types'; | ||
import CssNanoPreset from '@docusaurus/cssnano-preset'; | ||
// import CssNanoPreset from '@docusaurus/cssnano-preset'; | ||
import {version as cacheLoaderVersion} from 'cache-loader/package.json'; | ||
import { | ||
BABEL_CONFIG_FILE_NAME, | ||
|
@@ -143,11 +144,16 @@ export function getBabelOptions({ | |
|
||
export function getBabelLoader( | ||
isServer: boolean, | ||
// eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
babelOptions?: TransformOptions | string, | ||
): Loader { | ||
return { | ||
loader: require.resolve('babel-loader'), | ||
options: getBabelOptions({isServer, babelOptions}), | ||
loader: require.resolve('esbuild-loader'), | ||
options: { | ||
loader: 'tsx', | ||
format: isServer ? 'cjs' : 'esm', | ||
target: 'es2017', | ||
}, | ||
}; | ||
} | ||
Comment on lines
145
to
158
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I plan to make this function be like if (process.env.ESBUILD) {
return {
loader: require.resolve('esbuild-loader'),
options: {
loader: 'tsx',
format: isServer ? 'cjs' : 'esm',
target: 'es2017',
},
};
return {
loader: require.resolve('babel-loader'),
options: getBabelOptions({isServer, babelOptions}),
}
} In this way all the existing code that uses the Do maintainers have any options? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
|
||
|
@@ -463,6 +469,7 @@ export function getHttpsConfig(): boolean | {cert: Buffer; key: Buffer} { | |
} | ||
|
||
// See https://github.com/webpack-contrib/terser-webpack-plugin#parallel | ||
// eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
function getTerserParallel() { | ||
let terserParallel: boolean | number = true; | ||
if (process.env.TERSER_PARALLEL === 'false') { | ||
|
@@ -476,74 +483,7 @@ function getTerserParallel() { | |
return terserParallel; | ||
} | ||
|
||
// eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
export function getMinimizer(useSimpleCssMinifier = false): Plugin[] { | ||
const minimizer = [ | ||
new TerserPlugin({ | ||
cache: true, | ||
parallel: getTerserParallel(), | ||
sourceMap: false, | ||
terserOptions: { | ||
parse: { | ||
// we want uglify-js to parse ecma 8 code. However, we don't want it | ||
// to apply any minification steps that turns valid ecma 5 code | ||
// into invalid ecma 5 code. This is why the 'compress' and 'output' | ||
// sections only apply transformations that are ecma 5 safe | ||
// https://github.com/facebook/create-react-app/pull/4234 | ||
ecma: 8, | ||
}, | ||
compress: { | ||
ecma: 5, | ||
warnings: false, | ||
}, | ||
mangle: { | ||
safari10: true, | ||
}, | ||
output: { | ||
ecma: 5, | ||
comments: false, | ||
// Turned on because emoji and regex is not minified properly using default | ||
// https://github.com/facebook/create-react-app/issues/2488 | ||
ascii_only: true, | ||
}, | ||
}, | ||
}), | ||
]; | ||
|
||
if (useSimpleCssMinifier) { | ||
minimizer.push( | ||
new OptimizeCSSAssetsPlugin({ | ||
cssProcessorPluginOptions: { | ||
preset: 'default', | ||
}, | ||
}), | ||
); | ||
} else { | ||
minimizer.push( | ||
...[ | ||
new OptimizeCSSAssetsPlugin({ | ||
cssProcessorPluginOptions: { | ||
preset: CssNanoPreset, | ||
}, | ||
}), | ||
new OptimizeCSSAssetsPlugin({ | ||
cssProcessor: CleanCss, | ||
cssProcessorOptions: { | ||
inline: false, | ||
level: { | ||
1: { | ||
all: false, | ||
}, | ||
2: { | ||
all: true, | ||
restructureRules: true, | ||
removeUnusedAtRules: false, | ||
}, | ||
}, | ||
}, | ||
}), | ||
], | ||
); | ||
} | ||
|
||
return minimizer; | ||
return [new ESBuildMinifyPlugin({target: 'es2017', css: true})]; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Wonder how much different this minification is compared to the old one? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Earlier stat because I mess up the build shows that it reduces the output by 1%. |
||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Somehow esbuild doesn't like that the client files are not in esm, so I setup the script to compile the client files to esm.