diff --git a/config/minimizer.js b/config/webpack.js similarity index 62% rename from config/minimizer.js rename to config/webpack.js index ce16504520..a5a6384f00 100644 --- a/config/minimizer.js +++ b/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 diff --git a/demo/script/size_stats b/demo/script/size_stats new file mode 100755 index 0000000000..3afbe6c9a0 --- /dev/null +++ b/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 diff --git a/demo/src/stubs/lovelace.ts b/demo/src/stubs/lovelace.ts index f3d4b300da..d1d6c2296b 100644 --- a/demo/src/stubs/lovelace.ts +++ b/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; + }; +}); diff --git a/demo/webpack.config.js b/demo/webpack.config.js index 851a983f30..e3f1b8023c 100644 --- a/demo/webpack.config.js +++ b/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", diff --git a/webpack.config.js b/webpack.config.js index 46e71154de..fade775416 100644 --- a/webpack.config.js +++ b/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 - 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") - ), + ...webpackBase.plugins, isProdBuild && !isCI && !isStatsBuild &&