From 8cdfdd9bc61f312d2127d14a71062778b18b7401 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Tue, 17 Apr 2018 08:19:15 -0700 Subject: [PATCH] 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 | 45 +++++++++++++++++++++++++++++++-------- package.json | 4 +++- webpack.client.config.js | 46 +++++++++++++++++++++++++++------------- 3 files changed, 70 insertions(+), 25 deletions(-) diff --git a/package-lock.json b/package-lock.json index 06a98e4c..f7daf31e 100644 --- a/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.2.tgz", - "integrity": "sha512-ZM4j2/ld/YZDc3Ma8PgN7gyAk+kHMMMyzLNryCPGhWrsfAuDVeuid5bpRFTDgMH9JBK2lA4dyyAkkZYF/WcqDQ==", + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.0.tgz", + "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", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.3.0.tgz", - "integrity": "sha512-0aP01LLIskjKs3lq52EC0aGBAJhLq7B2Rd8HC/DR/PtNNpcLilNmHC12O+hu0usQpo7wtHNRqtrhBwtDb0+dNg==", + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz", + "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==", "requires": { "has-flag": "3.0.0" } diff --git a/package.json b/package.json index c8fedd74..d004e0a7 100644 --- a/package.json +++ b/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", diff --git a/webpack.client.config.js b/webpack.client.config.js index 86a6a91d..ae5cbb03 100644 --- a/webpack.client.config.js +++ b/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' }, - { loader: 'css-loader' } + 'style-loader', + 'css-loader' + ] + }, + !isDev && { + test: /\.css$/, + use: [ + MiniCssExtractPlugin.loader, + 'css-loader' ] } ].filter(Boolean) @@ -41,19 +50,22 @@ module.exports = { setImmediate: false }, optimization: { - minimizer: isDev ? [] : [new UglifyWebpackPlugin({ - cache: true, - parallel: true, - sourceMap: true, - uglifyOptions: { - ecma: 6, - mangle: true, - compress: true, - output: { - comments: false + minimizer: isDev ? [] : [ + new UglifyWebpackPlugin({ + cache: true, + parallel: true, + sourceMap: true, + uglifyOptions: { + ecma: 6, + mangle: true, + compress: true, + output: { + 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"'