fix(website): reduce bundle size by excluding inline source maps and add limited support for iOS10 m

Author: FWeinb

packages/overmind-website/package.json

@@ -50,12 +50,13 @@
 		"concurrently": "^3.6.1",
 		"html-webpack-plugin": "^3.2.0",
 		"raw-loader": "^0.5.1",
+		"terser-webpack-plugin": "^1.2.1",
 		"ts-loader": "^4.4.2",
 		"tslib": "^1.9.3",
 		"typescript": "^3.1.3",
 		"url-loader": "^1.0.1",
 		"webpack": "^4.15.1",
-		"webpack-cli": "^3.0.8",
+		"webpack-cli": "^3.1.2",
 		"webpack-dev-server": "^3.1.5"
 	}
 }

packages/overmind-website/webpack.config.js

@@ -1,55 +1,75 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const path = require('path')
 
-module.exports = {
-  devtool: 'inline-source-map',
-  entry: path.join(__dirname, 'src', 'index.tsx'),
-  output: {
-    publicPath: '/',
-    path: path.join(__dirname, 'dist'),
-    filename: 'bundle.js',
-  },
-  optimization: {
-    splitChunks: {
-      chunks: 'all',
+module.exports = (env, args) => {
+  const isProduction = args.mode === 'production'
+  return {
+    devtool: isProduction ? 'source-map' : 'inline-source-map',
+    entry: path.join(__dirname, 'src', 'index.tsx'),
+    output: {
+      publicPath: '/',
+      path: path.join(__dirname, 'dist'),
+      filename: 'bundle.js',
     },
-  },
-  devServer: {
-    proxy: {
-      '/backend': 'http://localhost:5000',
-    },
-    historyApiFallback: true,
-  },
-  module: {
-    rules: [
+    optimization: Object.assign(
       {
-        test: /\.md/,
-        use: 'raw-loader',
+        splitChunks: {
+          chunks: 'all',
+        },
       },
-      {
-        test: /\.(png|woff2)$/,
-        use: [
-          {
-            loader: 'url-loader',
+      isProduction && {
+        minimizer: [
+          (compiler) => {
+            const TerserPlugin = require('terser-webpack-plugin')
+            new TerserPlugin({
+              cache: true,
+              parallel: true,
+              sourceMap: true,
+              terserOptions: {
+                safari10: true,
+              },
+            }).apply(compiler)
           },
         ],
+      }
+    ),
+    devServer: {
+      proxy: {
+        '/backend': 'http://localhost:5000',
       },
-      {
-        test: /\.tsx?$/,
-        loader: 'ts-loader',
-        include: path.join(__dirname, 'src'),
-        options: {
-          allowTsInNodeModules: true,
+      historyApiFallback: true,
+    },
+    module: {
+      rules: [
+        {
+          test: /\.md/,
+          use: 'raw-loader',
         },
-      },
+        {
+          test: /\.(png|woff2)$/,
+          use: [
+            {
+              loader: 'url-loader',
+            },
+          ],
+        },
+        {
+          test: /\.tsx?$/,
+          loader: 'ts-loader',
+          include: path.join(__dirname, 'src'),
+          options: {
+            allowTsInNodeModules: true,
+          },
+        },
+      ],
+    },
+    resolve: {
+      extensions: ['.tsx', '.ts', '.js'],
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: path.join(__dirname, 'backend', 'index.html'),
+      }),
     ],
-  },
-  resolve: {
-    extensions: ['.tsx', '.ts', '.js'],
-  },
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: path.join(__dirname, 'backend', 'index.html'),
-    }),
-  ],
+  }
 }