better JS size and async CSS with mini-css-extract-plugin (#145)

* better JS size and async CSS with mini-css-extract-plugin

* fix sourcemaps

package-lock.json

@@ -5667,6 +5667,15 @@
         "is-buffer": "1.1.6"
       }
     },
+    "last-call-webpack-plugin": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/last-call-webpack-plugin/-/last-call-webpack-plugin-3.0.0.tgz",
+      "integrity": "sha512-7KI2l2GIZa9p2spzPIVZBYyNKkN+e/SQPpnjlTiPhdbDW3F86tdKKELxKpzJ5sgU19wQWsACULZmpTPYHeWO5w==",
+      "requires": {
+        "lodash": "4.17.5",
+        "webpack-sources": "1.1.0"
+      }
+    },
     "lcid": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
@@ -6206,6 +6215,15 @@
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.1.0.tgz",
       "integrity": "sha1-5md4PZLonb00KBi1IwudYqZyrRg="
     },
+    "mini-css-extract-plugin": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.0.tgz",
+      "integrity": "sha512-2Zik6PhUZ/MbiboG6SDS9UTPL4XXy4qnyGjSdCIWRrr8xb6PwLtHE+AYOjkXJWdF0OG8vo/yrJ8CgS5WbMpzIg==",
+      "requires": {
+        "loader-utils": "1.1.0",
+        "webpack-sources": "1.1.0"
+      }
+    },
     "minimalistic-assert": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz",
@@ -6798,6 +6816,15 @@
         "wordwrap": "0.0.2"
       }
     },
+    "optimize-css-assets-webpack-plugin": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-4.0.0.tgz",
+      "integrity": "sha512-wcQJMk23VQAFdOYnF7pSTg3yvRsSmF3FBwuPf2MDE7e/AG4hoD5V+xxZkrhZEYZ6ZQezfu2qegprs0Z7Xc9xKA==",
+      "requires": {
+        "cssnano": "3.10.0",
+        "last-call-webpack-plugin": "3.0.0"
+      }
+    },
     "optionator": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz",
@@ -8378,9 +8405,9 @@
       }
     },
     "sapper": {
-      "version": "github:nolanlawson/sapper#5069987d7d943edb6649eac06163391b7b54832f",
+      "version": "github:nolanlawson/sapper#d9db963a055aaaf542d405619ca46eb120c6dd92",
       "requires": {
-        "chalk": "2.3.2",
+        "chalk": "2.4.0",
         "chokidar": "1.7.0",
         "escape-html": "1.0.3",
         "mkdirp": "0.5.1",
@@ -8432,13 +8459,13 @@
           }
         },
         "chalk": {
-          "version": "2.3.2",
+          "version": "2.4.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.2.tgz",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.0.tgz",
-          "integrity": "sha512-ZM4j2/ld/YZDc3Ma8PgN7gyAk+kHMMMyzLNryCPGhWrsfAuDVeuid5bpRFTDgMH9JBK2lA4dyyAkkZYF/WcqDQ==",
+          "integrity": "sha512-Wr/w0f4o9LuE7K53cD0qmbAMM+2XNLzR29vFn5hqko4sxGlUsyy363NvmyGIyk5tpe9cjTr9SJYbysEyPkRnFw==",
           "requires": {
             "ansi-styles": "3.2.1",
             "escape-string-regexp": "1.0.5",
-            "supports-color": "5.3.0"
+            "supports-color": "5.4.0"
           }
         },
         "chokidar": {
@@ -8520,9 +8547,9 @@
           }
         },
         "supports-color": {
-          "version": "5.3.0",
+          "version": "5.4.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.3.0.tgz",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
-          "integrity": "sha512-0aP01LLIskjKs3lq52EC0aGBAJhLq7B2Rd8HC/DR/PtNNpcLilNmHC12O+hu0usQpo7wtHNRqtrhBwtDb0+dNg==",
+          "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==",
           "requires": {
             "has-flag": "3.0.0"
           }

package.json

@@ -55,16 +55,18 @@
     "lodash": "^4.17.5",
     "lodash-es": "^4.17.8",
     "lodash-webpack-plugin": "^0.11.4",
+    "mini-css-extract-plugin": "^0.4.0",
     "mkdirp": "^0.5.1",
     "node-fetch": "^2.1.2",
     "node-sass": "^4.7.2",
     "npm-run-all": "^4.1.2",
+    "optimize-css-assets-webpack-plugin": "^4.0.0",
     "p-any": "^1.1.0",
     "performance-now": "^2.1.0",
     "pify": "^3.0.0",
     "quick-lru": "^1.1.0",
     "requestidlecallback": "^0.3.0",
-    "sapper": "github:nolanlawson/sapper#for-pinafore",
+    "sapper": "github:nolanlawson/sapper#for-pinafore-2",
     "serve-static": "^1.13.1",
     "stringz": "^1.0.0",
     "style-loader": "^0.20.3",

webpack.client.config.js

@@ -3,6 +3,8 @@ const config = require('sapper/webpack/config.js')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
 const UglifyWebpackPlugin = require('uglifyjs-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 
 const isDev = config.dev
 
@@ -28,11 +30,18 @@ module.exports = {
           }
         }
       },
-      {
+      isDev && {
         test: /\.css$/,
         use: [
-          { loader: 'style-loader' },
+          'style-loader',
-          { loader: 'css-loader' }
+          'css-loader'
+        ]
+      },
+      !isDev && {
+        test: /\.css$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader'
         ]
       }
     ].filter(Boolean)
@@ -41,7 +50,8 @@ module.exports = {
     setImmediate: false
   },
   optimization: {
-    minimizer: isDev ? [] : [new UglifyWebpackPlugin({
+    minimizer: isDev ? [] : [
+      new UglifyWebpackPlugin({
         cache: true,
         parallel: true,
         sourceMap: true,
@@ -53,7 +63,9 @@ module.exports = {
             comments: false
           }
         }
-    })]
+      }),
+      new OptimizeCSSAssetsPlugin({})
+    ]
   },
   plugins: [
     new LodashModuleReplacementPlugin({
@@ -65,6 +77,10 @@ module.exports = {
       requestTimeout: 120000
     })
   ] : [
+    new MiniCssExtractPlugin({
+      filename: '[name].[hash].css',
+      chunkFilename: '[name].[id].[hash].css'
+    }),
     new webpack.DefinePlugin({
       'process.browser': true,
       'process.env.NODE_ENV': '"production"'