#987 optimizing and compressing webpack assets

dashboard/templates/frontend/index.html

@@ -12,4 +12,5 @@
     <div id="root"></div>
     <!-- Webpack rendered JS -->
     {% render_bundle 'main' 'js' %}
+    {% render_bundle 'vendors' 'js' %}
 {% endblock %}

package.json

@@ -133,6 +133,7 @@
     "webpack-cli": "~3.2.3",
     "webpack-dev-server": "~3.2.1",
     "webpack-manifest-plugin": "2.0.4",
-    "workbox-webpack-plugin": "4.1.0"
+    "workbox-webpack-plugin": "4.1.0",
+    "compression-webpack-plugin": "~4.0.0"
   }
 }

start.sh

@@ -86,7 +86,7 @@ if [ "${IS_CRON_POD:-"false",,}" == "false" ]; then
         echo Starting Runserver for development
         export PYTHONPATH="/code:$PYTHONPATH"
         export DJANGO_SETTINGS_MODULE=dashboard.settings
-        exec django-admin runserver --ptvsd 0.0.0.0:${GUNICORN_PORT}
+        exec django-admin runserver --nostatic --ptvsd 0.0.0.0:${GUNICORN_PORT}
 
     fi
 else

webpack.config.js

@@ -1,11 +1,19 @@
 const path = require('path')
 const BundleTracker = require('webpack-bundle-tracker')
+const CompressionPlugin = require('compression-webpack-plugin')
 
+const isDevelopment = process.env.BABEL_ENV !== 'production'
 module.exports = {
+  mode: isDevelopment ? 'development' : 'production',
   entry: path.join(__dirname, 'assets/src/index'),
   output: {
     path: path.join(__dirname, 'assets/dist'),
-    filename: '[name]-[hash].js'
+    filename: '[name].[hash].js'
+  },
+  devtool: isDevelopment ? 'inline-source-map' : 'false',
+  watchOptions: {
+    ignored: /node_modules/,
+    aggregateTimeout: 600
   },
   module: {
     rules: [
@@ -27,10 +35,28 @@ module.exports = {
       }
     ]
   },
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        vendors: {
+          name: 'vendors',
+          test: /[\\/]node_modules[\\/]/,
+          chunks: 'all'
+        }
+      }
+    }
+  },
   plugins: [
     new BundleTracker({
       path: __dirname,
       filename: 'webpack-stats.json'
+    }),
+    new CompressionPlugin({
+      filename: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: /\.js$|\.css$|\.html$/,
+      threshold: 10240,
+      minRatio: 0.8
     })
   ]
 }