Optimize demo (#2681)

config/webpack.js

@@ -1,5 +1,22 @@
+const webpack = require("webpack");
+const path = require("path");
 const BabelMinifyPlugin = require("babel-minify-webpack-plugin");
 
+module.exports.plugins = [
+  // Ignore moment.js locales
+  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+  // Color.js is bloated, it contains all color definitions for all material color sets.
+  new webpack.NormalModuleReplacementPlugin(
+    /@polymer\/paper-styles\/color\.js$/,
+    path.resolve(__dirname, "../src/util/empty.js")
+  ),
+  // Ignore roboto pointing at CDN. We use local font-roboto-local.
+  new webpack.NormalModuleReplacementPlugin(
+    /@polymer\/font-roboto\/roboto\.js$/,
+    path.resolve(__dirname, "../src/util/empty.js")
+  ),
+];
+
 module.exports.minimizer = [
   // Took options from Polymer build tool
   // https://github.com/Polymer/tools/blob/master/packages/build/src/js-transform.ts

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
+customElements.whenDefined("hui-view").then(() => {
-const oldCreateCard = HUIView.prototype.createCardElement;
+  // 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) {
+  HUIView.prototype.createCardElement = function(config) {
-  const el = oldCreateCard.call(this, config);
+    const el = oldCreateCard.call(this, config);
-  if (el.tagName === "HA-DEMO-CARD") {
+    if (el.tagName === "HA-DEMO-CARD") {
-    (el as HADemoCard).lovelace = this.lovelace;
+      (el as HADemoCard).lovelace = this.lovelace;
-  }
+    }
-  return el;
+    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.
+  devtool: isProd ? "cheap-source-map" : "inline-source-map",
-  // Was source-map
-  devtool: isProd ? "none" : "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",

webpack.config.js

@@ -8,7 +8,7 @@ const HtmlWebpackPlugin = require("html-webpack-plugin");
 const zopfli = require("@gfx/zopfli");
 const translationMetadata = require("./build-translations/translationMetadata.json");
 const { babelLoaderConfig } = require("./config/babel.js");
-const { minimizer } = require("./config/minimizer.js");
+const webpackBase = require("./config/webpack.js");
 
 const version = fs.readFileSync("setup.py", "utf8").match(/\d{8}\.\d+/);
 if (!version) {
@@ -77,7 +77,7 @@ function createConfig(isProdBuild, latestBuild) {
       ],
     },
     optimization: {
-      minimizer,
+      minimizer: webpackBase.minimizer,
     },
     plugins: [
       new webpack.DefinePlugin({
@@ -123,18 +123,7 @@ function createConfig(isProdBuild, latestBuild) {
           !latestBuild && "public/__init__.py",
         ].filter(Boolean)
       ),
-      // Ignore moment.js locales
+      ...webpackBase.plugins,
-      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-      // Color.js is bloated, it contains all color definitions for all material color sets.
-      new webpack.NormalModuleReplacementPlugin(
-        /@polymer\/paper-styles\/color\.js$/,
-        path.resolve(__dirname, "src/util/empty.js")
-      ),
-      // Ignore roboto pointing at CDN. We use local font-roboto-local.
-      new webpack.NormalModuleReplacementPlugin(
-        /@polymer\/font-roboto\/roboto\.js$/,
-        path.resolve(__dirname, "src/util/empty.js")
-      ),
       isProdBuild &&
         !isCI &&
         !isStatsBuild &&