feat(v2): add ability to create unminimized bundles (#2474)

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 {

packages/docusaurus/bin/docusaurus.js

@@ -45,10 +45,15 @@ cli
     '--out-dir <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,
     });
   });
 

packages/docusaurus/src/commands/build.ts

@@ -61,18 +61,21 @@ export async function build(
     generatedFilesDir,
     'client-manifest.json',
   );
-  let clientConfig: Configuration = merge(createClientConfig(props), {
+  let clientConfig: Configuration = merge(
-    plugins: [
+    createClientConfig(props, cliOptions.minify),
-      // Remove/clean build folders before building bundles.
+    {
-      new CleanWebpackPlugin({verbose: false}),
+      plugins: [
-      // Visualize size of webpack output files with an interactive zoomable treemap.
+        // Remove/clean build folders before building bundles.
-      cliOptions.bundleAnalyzer && new BundleAnalyzerPlugin(),
+        new CleanWebpackPlugin({verbose: false}),
-      // Generate client manifests file that will be used for server bundle.
+        // Visualize size of webpack output files with an interactive zoomable treemap.
-      new ReactLoadableSSRAddon({
+        cliOptions.bundleAnalyzer && new BundleAnalyzerPlugin(),
-        filename: clientManifestPath,
+        // Generate client manifests file that will be used for server bundle.
-      }),
+        new ReactLoadableSSRAddon({
-    ].filter(Boolean) as Plugin[],
+          filename: clientManifestPath,
-  });
+        }),
+      ].filter(Boolean) as Plugin[],
+    },
+  );
 
   let serverConfig: Configuration = createServerConfig(props);
 

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,
+      minimize: minify && isProd && !isServer,
-      minimizer: isProd
+      minimizer:
-        ? [
+        minify && isProd
-            new TerserPlugin({
+          ? [
-              cache: true,
+              new TerserPlugin({
-              parallel: true,
+                cache: true,
-              sourceMap: false,
+                parallel: true,
-              terserOptions: {
+                sourceMap: false,
-                parse: {
+                terserOptions: {
-                  // we want uglify-js to parse ecma 8 code. However, we don't want it
+                  parse: {
-                  // to apply any minfication steps that turns valid ecma 5 code
+                    // we want uglify-js to parse ecma 8 code. However, we don't want it
-                  // into invalid ecma 5 code. This is why the 'compress' and 'output'
+                    // to apply any minfication steps that turns valid ecma 5 code
-                  // sections only apply transformations that are ecma 5 safe
+                    // into invalid ecma 5 code. This is why the 'compress' and 'output'
-                  // https://github.com/facebook/create-react-app/pull/4234
+                    // sections only apply transformations that are ecma 5 safe
-                  ecma: 8,
+                    // 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,
+              new OptimizeCSSAssetsPlugin({
-                  warnings: false,
+                cssProcessorPluginOptions: {
+                  preset: 'default',
                 },
-                mangle: {
+              }),
-                  safari10: true,
+            ]
-                },
+          : undefined,
-                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,
       splitChunks: isServer
         ? false
         : {

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: [

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

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`