Optimize demo (#2681)

demo/script/size_stats

@@ -0,0 +1,11 @@
+#!/bin/sh
+# Analyze stats
+
+# Stop on errors
+set -e
+
+cd "$(dirname "$0")/.."
+
+STATS=1 NODE_ENV=production ../node_modules/.bin/webpack --profile --json > compilation-stats.json
+npx webpack-bundle-analyzer compilation-stats.json dist
+rm compilation-stats.json

demo/src/stubs/lovelace.ts

@@ -3,7 +3,6 @@ import "../custom-cards/ha-demo-card";
 // tslint:disable-next-line
 import { HADemoCard } from "../custom-cards/ha-demo-card";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-import { HUIView } from "../../../src/panels/lovelace/hui-view";
 import { selectedDemoConfig } from "../configs/demo-configs";
 
 export const mockLovelace = (hass: MockHomeAssistant) => {
@@ -16,13 +15,17 @@ export const mockLovelace = (hass: MockHomeAssistant) => {
   hass.mockWS("lovelace/config/save", () => Promise.resolve());
 };
 
-// Patch HUI-VIEW to make the lovelace object available to the demo card
-const oldCreateCard = HUIView.prototype.createCardElement;
+customElements.whenDefined("hui-view").then(() => {
+  // tslint:disable-next-line
+  const HUIView = customElements.get("hui-view");
+  // Patch HUI-VIEW to make the lovelace object available to the demo card
+  const oldCreateCard = HUIView.prototype.createCardElement;
 
-HUIView.prototype.createCardElement = function(config) {
-  const el = oldCreateCard.call(this, config);
-  if (el.tagName === "HA-DEMO-CARD") {
-    (el as HADemoCard).lovelace = this.lovelace;
-  }
-  return el;
-};
+  HUIView.prototype.createCardElement = function(config) {
+    const el = oldCreateCard.call(this, config);
+    if (el.tagName === "HA-DEMO-CARD") {
+      (el as HADemoCard).lovelace = this.lovelace;
+    }
+    return el;
+  };
+});

demo/webpack.config.js

@@ -3,10 +3,12 @@ const webpack = require("webpack");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const WorkboxPlugin = require("workbox-webpack-plugin");
 const { babelLoaderConfig } = require("../config/babel.js");
-const { minimizer } = require("../config/babel.js");
+const webpackBase = require("../config/webpack.js");
 
 const isProd = process.env.NODE_ENV === "production";
-const chunkFilename = isProd ? "chunk.[chunkhash].js" : "[name].chunk.js";
+const isStatsBuild = process.env.STATS === "1";
+const chunkFilename =
+  isProd && !isStatsBuild ? "chunk.[chunkhash].js" : "[name].chunk.js";
 const buildPath = path.resolve(__dirname, "dist");
 const publicPath = "/";
 
@@ -14,9 +16,7 @@ const latestBuild = false;
 
 module.exports = {
   mode: isProd ? "production" : "development",
-  // Disabled in prod while we make Home Assistant able to serve the right files.
-  // Was source-map
-  devtool: isProd ? "none" : "inline-source-map",
+  devtool: isProd ? "cheap-source-map" : "inline-source-map",
   entry: {
     main: "./src/entrypoint.ts",
     compatibility: "../src/entrypoints/compatibility.js",
@@ -40,7 +40,7 @@ module.exports = {
     ],
   },
   optimization: {
-    minimizer,
+    minimizer: webpackBase.minimizer,
   },
   plugins: [
     new webpack.DefinePlugin({
@@ -71,6 +71,7 @@ module.exports = {
         to: "static/images/leaflet/",
       },
     ]),
+    ...webpackBase.plugins,
     isProd &&
       new WorkboxPlugin.GenerateSW({
         swDest: "service_worker_es5.js",