From fa2e263ce821280a96e8903dabc754450b967b1f Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Sun, 29 Mar 2020 18:32:26 +0300 Subject: [PATCH] feat(v2): add ability to create unminimized bundles (#2474) --- packages/docusaurus-types/src/index.d.ts | 1 + packages/docusaurus/bin/docusaurus.js | 7 ++- packages/docusaurus/src/commands/build.ts | 27 ++++---- packages/docusaurus/src/webpack/base.ts | 77 ++++++++++++----------- packages/docusaurus/src/webpack/client.ts | 7 ++- packages/docusaurus/src/webpack/server.ts | 7 ++- website/docs/cli.md | 1 + 7 files changed, 73 insertions(+), 54 deletions(-) diff --git a/packages/docusaurus-types/src/index.d.ts b/packages/docusaurus-types/src/index.d.ts index 9dccb8a39e..28eddd1963 100644 --- a/packages/docusaurus-types/src/index.d.ts +++ b/packages/docusaurus-types/src/index.d.ts @@ -64,6 +64,7 @@ export interface StartCLIOptions { export interface BuildCLIOptions { bundleAnalyzer: boolean; outDir: string; + minify: boolean; } export interface LoadContext { diff --git a/packages/docusaurus/bin/docusaurus.js b/packages/docusaurus/bin/docusaurus.js index 4d40b7ff3d..6d3cec424e 100755 --- a/packages/docusaurus/bin/docusaurus.js +++ b/packages/docusaurus/bin/docusaurus.js @@ -45,10 +45,15 @@ cli '--out-dir ', 'The full path for the new output directory, relative to the current workspace (default = build).', ) - .action((siteDir = '.', {bundleAnalyzer, outDir}) => { + .option( + '--no-minify', + 'Build website without minimizing JS bundles (default = false)', + ) + .action((siteDir = '.', {bundleAnalyzer, outDir, minify}) => { wrapCommand(build)(path.resolve(siteDir), { bundleAnalyzer, outDir, + minify, }); }); diff --git a/packages/docusaurus/src/commands/build.ts b/packages/docusaurus/src/commands/build.ts index e64db1ef05..d1ca02cc71 100644 --- a/packages/docusaurus/src/commands/build.ts +++ b/packages/docusaurus/src/commands/build.ts @@ -61,18 +61,21 @@ export async function build( generatedFilesDir, 'client-manifest.json', ); - let clientConfig: Configuration = merge(createClientConfig(props), { - plugins: [ - // Remove/clean build folders before building bundles. - new CleanWebpackPlugin({verbose: false}), - // Visualize size of webpack output files with an interactive zoomable treemap. - cliOptions.bundleAnalyzer && new BundleAnalyzerPlugin(), - // Generate client manifests file that will be used for server bundle. - new ReactLoadableSSRAddon({ - filename: clientManifestPath, - }), - ].filter(Boolean) as Plugin[], - }); + let clientConfig: Configuration = merge( + createClientConfig(props, cliOptions.minify), + { + plugins: [ + // Remove/clean build folders before building bundles. + new CleanWebpackPlugin({verbose: false}), + // Visualize size of webpack output files with an interactive zoomable treemap. + cliOptions.bundleAnalyzer && new BundleAnalyzerPlugin(), + // Generate client manifests file that will be used for server bundle. + new ReactLoadableSSRAddon({ + filename: clientManifestPath, + }), + ].filter(Boolean) as Plugin[], + }, + ); let serverConfig: Configuration = createServerConfig(props); diff --git a/packages/docusaurus/src/webpack/base.ts b/packages/docusaurus/src/webpack/base.ts index 9f3eb923b3..775c3676ff 100644 --- a/packages/docusaurus/src/webpack/base.ts +++ b/packages/docusaurus/src/webpack/base.ts @@ -34,11 +34,13 @@ export function excludeJS(modulePath: string) { export function createBaseConfig( props: Props, isServer: boolean, + minify: boolean, ): Configuration { const {outDir, siteDir, baseUrl, generatedFilesDir, routesPaths} = props; const totalPages = routesPaths.length; const isProd = process.env.NODE_ENV === 'production'; + return { mode: isProd ? 'production' : 'development', output: { @@ -78,45 +80,46 @@ export function createBaseConfig( optimization: { removeAvailableModules: false, // Only minimize client bundle in production because server bundle is only used for static site generation - minimize: isProd && !isServer, - minimizer: isProd - ? [ - new TerserPlugin({ - cache: true, - parallel: true, - sourceMap: false, - terserOptions: { - parse: { - // we want uglify-js to parse ecma 8 code. However, we don't want it - // to apply any minfication 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, + minimize: minify && isProd && !isServer, + minimizer: + minify && isProd + ? [ + new TerserPlugin({ + cache: true, + parallel: true, + sourceMap: false, + terserOptions: { + parse: { + // we want uglify-js to parse ecma 8 code. However, we don't want it + // to apply any minfication 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, + }, }, - compress: { - ecma: 5, - warnings: false, + }), + new OptimizeCSSAssetsPlugin({ + cssProcessorPluginOptions: { + preset: 'default', }, - 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, - }, - }, - }), - new OptimizeCSSAssetsPlugin({ - cssProcessorPluginOptions: { - preset: 'default', - }, - }), - ] - : undefined, + }), + ] + : undefined, splitChunks: isServer ? false : { diff --git a/packages/docusaurus/src/webpack/client.ts b/packages/docusaurus/src/webpack/client.ts index f9e8f1ccb3..ea87dc837f 100644 --- a/packages/docusaurus/src/webpack/client.ts +++ b/packages/docusaurus/src/webpack/client.ts @@ -15,10 +15,13 @@ import {createBaseConfig} from './base'; import ChunkAssetPlugin from './plugins/ChunkAssetPlugin'; import LogPlugin from './plugins/LogPlugin'; -export function createClientConfig(props: Props): Configuration { +export function createClientConfig( + props: Props, + minify: boolean = true, +): Configuration { const isProd = process.env.NODE_ENV === 'production'; const isBuilding = process.argv[2] === 'build'; - const config = createBaseConfig(props, false); + const config = createBaseConfig(props, false, minify); const clientConfig = merge(config, { entry: [ diff --git a/packages/docusaurus/src/webpack/server.ts b/packages/docusaurus/src/webpack/server.ts index cb03b24321..a649b41560 100644 --- a/packages/docusaurus/src/webpack/server.ts +++ b/packages/docusaurus/src/webpack/server.ts @@ -15,7 +15,10 @@ import {createBaseConfig} from './base'; import WaitPlugin from './plugins/WaitPlugin'; import LogPlugin from './plugins/LogPlugin'; -export function createServerConfig(props: Props): Configuration { +export function createServerConfig( + props: Props, + minify: boolean = true, +): Configuration { const { baseUrl, routesPaths, @@ -24,7 +27,7 @@ export function createServerConfig(props: Props): Configuration { preBodyTags, postBodyTags, } = props; - const config = createBaseConfig(props, true); + const config = createBaseConfig(props, true, minify); const routesLocation = {}; // Array of paths to be rendered. Relative to output directory diff --git a/website/docs/cli.md b/website/docs/cli.md index d1ace72274..a20eee0f75 100644 --- a/website/docs/cli.md +++ b/website/docs/cli.md @@ -65,6 +65,7 @@ Compiles your site for production. | --- | --- | --- | | `--bundle-analyzer` | | Analyze your bundle with [bundle analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) | | `--out-dir` | `build` | The full path for the new output directory, relative to the current workspace. | +| `--no-minify` | `false` | Build website without minimizing JS/CSS bundles. | ### `docusaurus swizzle`