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

* feat: improve tree shaking + update webpack & babel

* fix: tests

babel.config.js

@@ -5,8 +5,16 @@
  * We use this file to apply babel configuration to packages in `node_modules`
  * for testing with jest.
  */
+const lodashOptimizations = ["use-lodash-es", "lodash"];
+
 module.exports = {
   env: {
+    production: {
+      plugins: [...lodashOptimizations],
+    },
+    development: {
+      plugins: [...lodashOptimizations],
+    },
     test: {
       presets: [
         [

package.json

@@ -3,6 +3,9 @@
   "version": "5.0.0",
   "author": "The Coral Project",
   "homepage": "https://coralproject.net/",
+  "sideEffects": [
+    "*.css"
+  ],
   "repository": {
     "type": "git",
     "url": "git://github.com/coralproject/talk.git"
@@ -106,12 +109,12 @@
     "uuid": "^3.3.2"
   },
   "devDependencies": {
-    "@babel/core": "7.0.0-beta.49",
-    "@babel/plugin-syntax-dynamic-import": "7.0.0-beta.49",
-    "@babel/plugin-transform-modules-commonjs": "^7.0.0-beta.53",
-    "@babel/polyfill": "7.0.0-beta.49",
-    "@babel/preset-env": "7.0.0-beta.49",
-    "@babel/preset-react": "7.0.0-beta.49",
+    "@babel/core": "^7.2.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.2.0",
+    "@babel/polyfill": "^7.0.0",
+    "@babel/preset-env": "^7.2.0",
+    "@babel/preset-react": "^7.0.0",
     "@coralproject/rte": "^0.10.13",
     "@types/bcryptjs": "^2.4.1",
     "@types/bull": "^3.3.16",
@@ -168,7 +171,6 @@
     "@types/sane": "^2.0.0",
     "@types/sinon": "^5.0.1",
     "@types/tlds": "^1.199.0",
-    "@types/uglifyjs-webpack-plugin": "^1.1.0",
     "@types/uuid": "^3.4.3",
     "@types/vinyl": "^2.0.2",
     "@types/webpack": "^4.4.7",
@@ -179,10 +181,11 @@
     "autoprefixer": "^8.6.5",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^23.6.0",
-    "babel-loader": "^8.0.0-beta",
+    "babel-loader": "^8.0.4",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-module-resolver": "^3.1.1",
-    "babel-plugin-relay": "^1.7.0-rc.1",
+    "babel-plugin-relay": "^1.7.0",
+    "babel-plugin-use-lodash-es": "^0.2.0",
     "babel-preset-react-optimize": "^1.0.1",
     "bowser": "^1.9.4",
     "bundlesize": "^0.17.0",
@@ -210,7 +213,7 @@
     "fluent-react": "^0.8.0",
     "graphql-schema-typescript": "^1.2.1",
     "gulp": "^4.0.0",
-    "gulp-babel": "^8.0.0-beta.2",
+    "gulp-babel": "^8.0.0",
     "gulp-cli": "^2.0.1",
     "gulp-sourcemaps": "^2.6.4",
     "gulp-typescript": "^5.0.0-alpha.3",
@@ -224,6 +227,7 @@
     "jsdom": "^11.12.0",
     "lint-staged": "^7.3.0",
     "loader-utils": "^1.1.0",
+    "lodash-es": "^4.17.11",
     "lodash-webpack-plugin": "^0.11.5",
     "material-design-icons": "^3.0.1",
     "mini-css-extract-plugin": "^0.4.1",
@@ -263,6 +267,7 @@
     "simulant": "^0.2.2",
     "sinon": "^6.1.5",
     "style-loader": "^0.21.0",
+    "terser-webpack-plugin": "^1.1.0",
     "timekeeper": "^2.1.2",
     "ts-jest": "^23.0.0",
     "ts-loader": "^4.4.2",
@@ -279,14 +284,13 @@
     "typeface-source-sans-pro": "0.0.54",
     "typescript": "^3.0.3",
     "typescript-snapshots-plugin": "^1.2.0",
-    "uglifyjs-webpack-plugin": "^1.2.5",
     "wait-for-expect": "^1.1.0",
-    "webpack": "4.12.0",
+    "webpack": "^4.27.1",
     "webpack-bundle-analyzer": "^3.0.3",
-    "webpack-cli": "^3.0.2",
+    "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.10",
     "webpack-hot-client": "^4.1.1",
-    "webpack-manifest-plugin": "^2.0.3",
+    "webpack-manifest-plugin": "^2.0.4",
     "whatwg-fetch": "^2.0.4"
   },
   "husky": {

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";