more optimizations and tweaks

2019-12-22 23:52:39 -07:00 · 2019-12-22 23:52:39 -07:00 · aeebfd82db
commit aeebfd82db
parent 95bf0de932
4 changed files with 96 additions and 34 deletions
--- a/default.nix
+++ b/default.nix
@ -112,12 +112,12 @@ let
        document.body.appendChild(sourceTarget)
      '';

-      templateHtml = pkgs.writeText "template-html" ''
+      templateHtml = pkgs.writeText "template.html" ''
        <!DOCTYPE html>
        <html>
          <head>
            <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
-            <title><%= htmlWebpackPlugin.options.title %></title>
+            <title>${prettyName}</title>
            <link rel="apple-touch-icon" sizes="57x57" href="/appdata/apple-touch-icon-57x57.png">
            <link rel="apple-touch-icon" sizes="60x60" href="/appdata/apple-touch-icon-60x60.png">
            <link rel="apple-touch-icon" sizes="72x72" href="/appdata/apple-touch-icon-72x72.png">
@ -155,8 +155,7 @@ let
            <meta name="msapplication-config" content="/appdata/browserconfig.xml">
            <meta name="theme-color" content="${themeColor}">
          </head>
-          <body>
-          </body>
+          <body></body>
        </html>
      '';
    in
--- a/package.json
+++ b/package.json
@ -3,6 +3,7 @@
    "copy-webpack-plugin": "^5.1.1",
    "elm-webpack-loader": "^6.0.1",
    "favicons-webpack-plugin": "^1.0.2",
+    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "imagemin-webpack-plugin": "^2.4.2",
    "jsdom": "^15.2.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -2,6 +2,7 @@ dependencies:
  copy-webpack-plugin: 5.1.1_webpack@4.41.4
  elm-webpack-loader: 6.0.1
  favicons-webpack-plugin: 1.0.2_webpack@4.41.4
+  html-loader: 0.5.5
  html-webpack-plugin: 3.2.0_webpack@4.41.4
  imagemin-webpack-plugin: 2.4.2
  jsdom: 15.2.1
@ -875,6 +876,12 @@ packages:
      node: '>=0.10.0'
    resolution:
      integrity: sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
+  /ast-types/0.9.6:
+    dev: false
+    engines:
+      node: '>= 0.8'
+    resolution:
+      integrity: sha1-ECyenpAF0+fjgpvwxPok7oYu6bk=
  /async-each/1.0.3:
    dev: false
    resolution:
@ -2327,7 +2334,7 @@ packages:
    dev: false
    resolution:
      integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
-  /es-abstract/1.17.0-next.1:
+  /es-abstract/1.17.0:
    dependencies:
      es-to-primitive: 1.2.1
      function-bind: 1.1.1
@ -2344,7 +2351,7 @@ packages:
    engines:
      node: '>= 0.4'
    resolution:
-      integrity: sha512-7MmGr03N7Rnuid6+wyhD9sHNE2n4tFSwExnU2lQl3lIo2ShXWGePY80zYaoMOmILWv57H0amMjZGHNzzGG70Rw==
+      integrity: sha512-yYkE07YF+6SIBmg1MsJ9dlub5L48Ek7X0qz+c/CPCHS9EBXfESorzng4cJQjJW5/pB6vDF41u7F8vUhLVDqIug==
  /es-to-primitive/1.2.1:
    dependencies:
      is-callable: 1.1.5
@ -2369,6 +2376,13 @@ packages:
    dev: false
    resolution:
      integrity: sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=
+  /es6-templates/0.2.3:
+    dependencies:
+      recast: 0.11.23
+      through: 2.3.8
+    dev: false
+    resolution:
+      integrity: sha1-XLmsn7He1usSOTQrgdeSu7QHjuQ=
  /escape-html/1.0.3:
    dev: false
    resolution:
@ -2684,6 +2698,10 @@ packages:
    dev: false
    resolution:
      integrity: sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
+  /fastparse/1.1.2:
+    dev: false
+    resolution:
+      integrity: sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
  /favicons-webpack-plugin/1.0.2_webpack@4.41.4:
    dependencies:
      cache-loader: 3.0.1_webpack@4.41.4
@ -3426,6 +3444,16 @@ packages:
    dev: false
    resolution:
      integrity: sha512-71lZziiDnsuabfdYiUeWdCVyKuqwWi23L8YeIgV9jSSZHCtb6wB1BKWooH7L3tn4/FuZJMVWyNaIDr4RGmaSYw==
+  /html-loader/0.5.5:
+    dependencies:
+      es6-templates: 0.2.3
+      fastparse: 1.1.2
+      html-minifier: 3.5.21
+      loader-utils: 1.2.3
+      object-assign: 4.1.1
+    dev: false
+    resolution:
+      integrity: sha512-7hIW7YinOYUpo//kSYcPB6dCKoceKLmOwjEMmhIobHuWGDVl0Nwe4l68mdG/Ru0wcUxQjVMEoZpkalZ/SE7zog==
  /html-minifier/3.5.21:
    dependencies:
      camel-case: 3.0.0
@ -5037,7 +5065,7 @@ packages:
  /object.getownpropertydescriptors/2.1.0:
    dependencies:
      define-properties: 1.1.3
-      es-abstract: 1.17.0-next.1
+      es-abstract: 1.17.0
    dev: false
    engines:
      node: '>= 0.8'
@ -5054,7 +5082,7 @@ packages:
  /object.values/1.1.1:
    dependencies:
      define-properties: 1.1.3
-      es-abstract: 1.17.0-next.1
+      es-abstract: 1.17.0
      function-bind: 1.1.1
      has: 1.0.3
    dev: false
@ -5603,6 +5631,12 @@ packages:
    dev: false
    resolution:
      integrity: sha1-X0+HyPkeWuPzuoerTPXgOxoX8aM=
+  /private/0.1.8:
+    dev: false
+    engines:
+      node: '>= 0.6'
+    resolution:
+      integrity: sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==
  /process-nextick-args/2.0.1:
    dev: false
    resolution:
@ -5863,6 +5897,17 @@ packages:
      node: '>=0.10'
    resolution:
      integrity: sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==
+  /recast/0.11.23:
+    dependencies:
+      ast-types: 0.9.6
+      esprima: 3.1.3
+      private: 0.1.8
+      source-map: 0.5.7
+    dev: false
+    engines:
+      node: '>= 0.8'
+    resolution:
+      integrity: sha1-RR/TAEqx5N+bTktmN2sqIZEkYtM=
  /redent/1.0.0:
    dependencies:
      indent-string: 2.1.0
@ -7708,6 +7753,7 @@ specifiers:
  copy-webpack-plugin: ^5.1.1
  elm-webpack-loader: ^6.0.1
  favicons-webpack-plugin: ^1.0.2
+  html-loader: ^0.5.5
  html-webpack-plugin: ^3.2.0
  imagemin-webpack-plugin: ^2.4.2
  jsdom: ^15.2.1
--- a/webpack.config.js
+++ b/webpack.config.js
@ -29,28 +29,30 @@ const jsMin = {
  mangle: true,
 }

+const htmlMin = {
+  minifyCSS: {
+    compatibility: 'ie9',
+    level: 2
+  },
+  minifyJS: jsMin,
+
+  collapseBooleanAttributes: true,
+  removeRedundantAttributes: true,
+  removeScriptTypeAttributes: true,
+  removeStyleLinkTypeAttributes: true,
+
+  removeComments: true,
+  sortAttributes: true,
+  sortClassName: true,
+}
+
 prerenderOpts = (width, height, name) => ({
  outputDir: path.join(__dirname, 'dist', 'prerender', name),
  staticDir: path.join(__dirname, 'dist'),
  routes: ROUTES,
-  minify: {
-    minifyCSS: {
-      compatibility: 'ie9',
-      level: 2
-    },
-    minifyJS: jsMin,
-
-    collapseBooleanAttributes: true,
-    removeRedundantAttributes: true,
-    removeScriptTypeAttributes: true,
-    removeStyleLinkTypeAttributes: true,
-
-    removeComments: true,
-    sortAttributes: true,
-    sortClassName: true,
-  },
+  minify: htmlMin,
  renderer: new Renderer({
-    renderAfterTime: 500,
+    renderAfterTime: 300,
    viewport: {
      width: width,
      height: height,
@ -72,20 +74,31 @@ prerenderOpts = (width, height, name) => ({
 })

 module.exports = {
+  target: 'web',
  output: {
    filename: 'main.js',
    path: path.join(__dirname, 'dist'),
    publicPath: '/'
  },
  module: {
-    rules: [{
-      test: /\.elm$/,
-      exclude: [/elm-stuff/, /node_modules/],
-      loader: 'elm-webpack-loader',
-      options: {
-        optimize: true
+    rules: [
+      {
+        test: /\.elm$/,
+        exclude: [/elm-stuff/, /node_modules/],
+        loader: 'elm-webpack-loader',
+        options: {
+          optimize: true
+        }
+      },
+      {
+        test: /\.html$/,
+        loader: 'html-loader',
+        options: {
+          minimize: true,
+          ...htmlMin
+        },
      }
-    }],
+    ],
  },
  plugins: [
    new TerserPlugin({
@ -98,7 +111,7 @@ module.exports = {
    new HtmlWebpackPlugin({
      hash: true,
      inject: true,
-      name: PRETTY_NAME,
+      minify: htmlMin,
      template: './template.html',
      meta: {
        viewport: 'width=360, initial-scale=1, maximum-scale=1'
@ -122,6 +135,9 @@ module.exports = {
    new InjectManifest({
      importWorkboxFrom: 'local',
      swSrc: magicFile(`
+          workbox.core.skipWaiting();
+          workbox.core.clientsClaim();
+          workbox.precaching.cleanupOutdatedCaches()
          workbox.routing.registerNavigationRoute('/index.html');
          workbox.precaching.precacheAndRoute(self.__precacheManifest);
        `),