From 1501800ca8c6af1dbe85ba2760c705d79d17c7fd Mon Sep 17 00:00:00 2001 From: sacha vandamme Date: Thu, 10 Jan 2019 01:51:29 +0100 Subject: [PATCH 1/5] Add the ability to disable criticalCss for users who wants to keep CSS in a separated file --- lib/config.js | 1 + lib/webpack.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/config.js b/lib/config.js index 48f2d85..d4644f4 100644 --- a/lib/config.js +++ b/lib/config.js @@ -7,6 +7,7 @@ module.exports = { defaultTitle: 'My app', favicon: './public/favicon.ico', error500Html: null, + criticalCss: true, skipRequests: req => req.originalUrl === '/graphql', nodeExternalsWhitelist: [/\.css$/, /\?vue&type=style/], extendServer: null, diff --git a/lib/webpack.js b/lib/webpack.js index b0c7cc3..ac65d5b 100644 --- a/lib/webpack.js +++ b/lib/webpack.js @@ -24,7 +24,7 @@ exports.chainWebpack = (webpackConfig) => { webpackConfig.plugins.delete('friendly-errors') const isExtracting = webpackConfig.plugins.has('extract-css') - if (isExtracting) { + if (isExtracting && config.criticalCss) { // Remove extract const langs = ['css', 'postcss', 'scss', 'sass', 'less', 'stylus'] const types = ['vue-modules', 'vue', 'normal-modules', 'normal'] From 9e51dd30f4b9d621270bb17ae35407ac1b094036 Mon Sep 17 00:00:00 2001 From: sacha vandamme Date: Thu, 10 Jan 2019 02:47:03 +0100 Subject: [PATCH 2/5] Fix dev server render error when a custom path is used for the server-renderer bundles --- lib/dev-server.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/lib/dev-server.js b/lib/dev-server.js index ce5556a..abded32 100644 --- a/lib/dev-server.js +++ b/lib/dev-server.js @@ -70,9 +70,10 @@ module.exports.setupDevServer = ({ server, templatePath, onUpdate }) => new Prom jsonStats.warnings.forEach(err => console.warn(err)) } if (stats.hasErrors()) return + const clientSsrPlugin = (clientConfig.plugins.find((p) => (p.__pluginName || p.constructor.name) === 'ssr') || {}).options || {}; clientManifest = JSON.parse(readFile( devMiddleware.fileSystem, - 'vue-ssr-client-manifest.json' + clientSsrPlugin.filename || 'vue-ssr-client-manifest.json' )) // HTML Template @@ -109,8 +110,11 @@ module.exports.setupDevServer = ({ server, templatePath, onUpdate }) => new Prom jsonStats.warnings.forEach(err => console.warn(err)) } if (stats.hasErrors()) return + //Try to find ssr plugin config options + const ssrPlugin = (serverConfig.plugins.find((p) => (p.__pluginName || p.constructor.name) === 'ssr') || {}).options || {}; + // read bundle generated by vue-ssr-webpack-plugin - serverBundle = JSON.parse(readFile(serverMfs, 'vue-ssr-server-bundle.json')) + serverBundle = JSON.parse(readFile(serverMfs, ssrPlugin.filename || 'vue-ssr-server-bundle.json')) update() onCompilationCompleted() }) From 340a56d223b2496fb432e5c6a5ab2c9e9f9e05dd Mon Sep 17 00:00:00 2001 From: Guillaume Chau Date: Sun, 20 Oct 2019 19:14:44 +0200 Subject: [PATCH 3/5] refactor: rename to criticalCSS --- lib/config.js | 2 +- lib/webpack.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/config.js b/lib/config.js index 8f88ec2..1295a61 100644 --- a/lib/config.js +++ b/lib/config.js @@ -9,7 +9,7 @@ module.exports = { entry: target => `./src/entry-${target}`, defaultTitle: 'My app', favicon: './public/favicon.ico', - criticalCss: true, + criticalCSS: true, skipRequests: req => req.originalUrl === '/graphql', nodeExternalsWhitelist: [/\.css$/, /\?vue&type=style/], applyDefaultServer: true, diff --git a/lib/webpack.js b/lib/webpack.js index 141bdb2..4aa4266 100644 --- a/lib/webpack.js +++ b/lib/webpack.js @@ -24,7 +24,7 @@ exports.chainWebpack = (webpackConfig) => { webpackConfig.plugins.delete('friendly-errors') const isExtracting = webpackConfig.plugins.has('extract-css') - if (isExtracting && config.criticalCss) { + if (isExtracting && config.criticalCSS) { // Remove extract const langs = ['css', 'postcss', 'scss', 'sass', 'less', 'stylus'] const types = ['vue-modules', 'vue', 'normal-modules', 'normal'] From 82fdb8b12cf644b205de856f0e867871991ab990 Mon Sep 17 00:00:00 2001 From: Guillaume Chau Date: Sun, 20 Oct 2019 19:14:50 +0200 Subject: [PATCH 4/5] docs: criticalCSS --- docs/guide/configuration.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/guide/configuration.md b/docs/guide/configuration.md index 20504de..1ff4e04 100644 --- a/docs/guide/configuration.md +++ b/docs/guide/configuration.md @@ -22,6 +22,8 @@ module.exports = { defaultTitle: 'My app', // Path to favicon favicon: './public/favicon.ico', + // Enable Critical CSS + criticalCSS: true, // Skip some requests from being server-side rendered skipRequests: req => req.originalUrl === '/graphql', // See https://ssr.vuejs.org/guide/build-config.html#externals-caveats From 6432ddbe83b6ee8a0a665f33a79dbf32d47caa3c Mon Sep 17 00:00:00 2001 From: Guillaume Chau Date: Sun, 20 Oct 2019 19:18:56 +0200 Subject: [PATCH 5/5] chore: clean code + comments --- lib/dev-server.js | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/lib/dev-server.js b/lib/dev-server.js index 2f6dc83..02a1a81 100644 --- a/lib/dev-server.js +++ b/lib/dev-server.js @@ -70,10 +70,13 @@ module.exports.setupDevServer = ({ server, templatePath, onUpdate }) => new Prom jsonStats.warnings.forEach(err => console.warn(err)) } if (stats.hasErrors()) return - const clientSsrPlugin = (clientConfig.plugins.find((p) => (p.__pluginName || p.constructor.name) === 'ssr') || {}).options || {}; + + // Fix dev server render error when a custom path is used for the server-renderer bundles + const ssrPlugin = (clientConfig.plugins.find((p) => (p.__pluginName || p.constructor.name) === 'ssr') || {}).options || {} + clientManifest = JSON.parse(readFile( devMiddleware.fileSystem, - clientSsrPlugin.filename || 'vue-ssr-client-manifest.json' + (ssrPlugin && ssrPlugin.filename) || 'vue-ssr-client-manifest.json' )) // HTML Template @@ -110,11 +113,17 @@ module.exports.setupDevServer = ({ server, templatePath, onUpdate }) => new Prom jsonStats.warnings.forEach(err => console.warn(err)) } if (stats.hasErrors()) return - //Try to find ssr plugin config options - const ssrPlugin = (serverConfig.plugins.find((p) => (p.__pluginName || p.constructor.name) === 'ssr') || {}).options || {}; + + // Try to find ssr plugin config options + // to fix dev server render error when a custom path is used for the server-renderer bundles + const ssrPlugin = (serverConfig.plugins.find((p) => (p.__pluginName || p.constructor.name) === 'ssr') || {}).options || {} // read bundle generated by vue-ssr-webpack-plugin - serverBundle = JSON.parse(readFile(serverMfs, ssrPlugin.filename || 'vue-ssr-server-bundle.json')) + serverBundle = JSON.parse(readFile( + serverMfs, + (ssrPlugin && ssrPlugin.filename) || 'vue-ssr-server-bundle.json' + )) + update() onCompilationCompleted() })