[next] improve tree shaking + update webpack & babel (#2132)

* feat: improve tree shaking + update webpack & babel

* fix: tests

src/core/build/createWebpackConfig.ts

@@ -7,8 +7,8 @@ import MiniCssExtractPlugin from "mini-css-extract-plugin";
 import path from "path";
 import InterpolateHtmlPlugin from "react-dev-utils/InterpolateHtmlPlugin";
 import WatchMissingNodeModulesPlugin from "react-dev-utils/WatchMissingNodeModulesPlugin";
+import TerserPlugin from "terser-webpack-plugin";
 import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
-import UglifyJsPlugin from "uglifyjs-webpack-plugin";
 import webpack, { Configuration, Plugin } from "webpack";
 import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
 import ManifestPlugin from "webpack-manifest-plugin";
@@ -105,29 +105,6 @@ export default function createWebpackConfig({
 
   const additionalPlugins = isProduction
     ? [
-        // Minify the code.
-        new UglifyJsPlugin({
-          uglifyOptions: {
-            compress: {
-              warnings: false,
-              // Disabled because of an issue with Uglify breaking seemingly valid code:
-              // https://github.com/facebookincubator/create-react-app/issues/2376
-              // Pending further investigation:
-              // https://github.com/mishoo/UglifyJS2/issues/2011
-              comparisons: false,
-            },
-            mangle: {
-              safari10: true,
-            },
-            output: {
-              comments: false,
-              // Turned on because emoji and regex is not minified properly using default
-              // https://github.com/facebookincubator/create-react-app/issues/2488
-              ascii_only: true,
-            },
-          },
-          sourceMap: !disableSourcemaps,
-        }),
         new MiniCssExtractPlugin({
           filename: "assets/css/[name].[hash].css",
           chunkFilename: "assets/css/[id].[hash].css",
@@ -157,7 +134,47 @@ export default function createWebpackConfig({
   const baseConfig: Configuration = {
     // Set webpack mode.
     mode: isProduction ? "production" : "development",
-
+    optimization: {
+      concatenateModules: isProduction,
+      providedExports: true,
+      usedExports: true,
+      sideEffects: true,
+      // We also minimize during development but only
+      // limit it to dead code and unused code elemination
+      // to be sure nothing breaks later in the production build.
+      //
+      // If modules are written in a side-effects free way this
+      // should not happen. We strive to write side-effects free
+      // modules but no one is perfect ;-)
+      minimize: true,
+      minimizer: [
+        // Minify the code.
+        new TerserPlugin({
+          terserOptions: {
+            compress: isProduction
+              ? {}
+              : {
+                  defaults: false,
+                  dead_code: true,
+                  pure_getters: true,
+                  side_effects: true,
+                  unused: true,
+                },
+            mangle: isProduction && {},
+            output: {
+              comments: !isProduction,
+              // Turned on because emoji and regex is not minified properly using default
+              // https://github.com/facebookincubator/create-react-app/issues/2488
+              ascii_only: true,
+            },
+            safari10: true,
+          },
+          cache: true,
+          parallel: true,
+          sourceMap: !disableSourcemaps,
+        }),
+      ],
+    },
     devtool:
       !disableSourcemaps && isProduction
         ? // We generate sourcemaps in production. This is slow but gives good results.

src/core/client/.babelrc.js

@@ -1,12 +1,17 @@
+const lodashOptimizations = ["use-lodash-es", "lodash"];
+
 module.exports = {
   presets: [
     ["@babel/env", { targets: "last 2 versions, ie 11", modules: false }],
     "@babel/react",
   ],
-  plugins: ["@babel/syntax-dynamic-import", "lodash"],
+  plugins: ["@babel/syntax-dynamic-import"],
   env: {
     production: {
-      plugins: [],
+      plugins: [...lodashOptimizations],
+    },
+    development: {
+      plugins: [...lodashOptimizations],
     },
     test: {
       plugins: ["@babel/transform-modules-commonjs"],

src/types/terser-webpack-plugin.d.ts

@@ -0,0 +1,44 @@
+declare module "terser-webpack-plugin" {
+  import { Plugin } from "webpack";
+
+  export default class TerserPlugin extends Plugin {
+    constructor(options?: TerserPluginOptions);
+  }
+
+  export interface TerserPluginOptions {
+    test?: RegExp | RegExp[];
+    include?: RegExp | RegExp[];
+    exclude?: RegExp | RegExp[];
+    cache?: boolean | string;
+    parallel?: boolean | number;
+    sourceMap?: boolean;
+    terserOptions?: TerserOptions;
+    extractComments?:
+      | boolean
+      | RegExp
+      | ((node: object, comment: string) => boolean)
+      | ExtractCommentsOptions;
+    warningsFilter?: (source: string) => boolean;
+  }
+
+  export interface TerserOptions {
+    ie8?: boolean;
+    ecma?: number;
+    parse?: object;
+    mangle?: boolean | object;
+    output?: object;
+    compress?: boolean | object;
+    warnings?: boolean;
+    toplevel?: boolean;
+    nameCache?: object;
+    keep_classnames?: boolean;
+    keep_fnames?: boolean;
+    safari10?: boolean;
+  }
+
+  export interface ExtractCommentsOptions {
+    condition?: RegExp | ((node: object, comment: string) => boolean);
+    filename?: string | ((originalFileName: string) => string);
+    banner?: boolean | string | ((fileName: string) => string);
+  }
+}

src/types/webpack-deep-scope-plugin.d.ts

@@ -0,0 +1 @@
+declare module "webpack-deep-scope-plugin";