feat: critical CSS in production

Author: Guillaume Chau

lib/loaders/css-context.js

@@ -0,0 +1,57 @@
+const path = require('path')
+const loaderUtils = require('loader-utils')
+const hash = require('hash-sum')
+const qs = require('querystring')
+
+module.exports = function () {}
+
+module.exports.pitch = function (remainingRequest) {
+  const isServer = this.target === 'node'
+  const isProduction = this.minimize || process.env.NODE_ENV === 'production'
+
+  const addStylesServerPath = loaderUtils.stringifyRequest(this, '!vue-style-loader/lib/addStylesServer.js')
+
+  const request = loaderUtils.stringifyRequest(this, '!!' + remainingRequest)
+  const relPath = path.relative(__dirname, this.resourcePath).replace(/\\/g, '/')
+  const id = JSON.stringify(hash(request + relPath))
+  const options = loaderUtils.getOptions(this) || {}
+
+  // direct css import from js --> direct, or manually call `styles.__inject__(ssrContext)` with `manualInject` option
+  // css import from vue file --> component lifecycle linked
+  // style embedded in vue file --> component lifecycle linked
+  const isVue = (
+    /"vue":true/.test(remainingRequest) ||
+    options.manualInject ||
+    qs.parse(this.resourceQuery.slice(1)).vue != null
+  )
+
+  if (isServer && isProduction) {
+    const shared = [
+      '// load the styles',
+      `var content = require(${request});`,
+      // content list format is [id, css, media, sourceMap]
+      `if(typeof content === 'string') content = [[module.id, content, '']];`,
+      'module.exports = content;',
+      'if(content.locals) module.exports = content.locals;',
+    ]
+    // on the server: attach to Vue SSR context
+    if (isVue) {
+      // inside *.vue file: expose a function so it can be called in
+      // component's lifecycle hooks
+      return shared.concat([
+        '// add CSS to SSR context',
+        'var add = require(' + addStylesServerPath + ').default',
+        'module.exports.__inject__ = function (context) {',
+        '  add(' + id + ', content, ' + isProduction + ', context)',
+        '};',
+      ]).join('\n')
+    } else {
+      // normal import
+      return shared.concat([
+        'require(' + addStylesServerPath + ').default(' + id + ', content, ' + isProduction + ');',
+        `console.log('addStylesServerPath', '${id}', content, require(${addStylesServerPath}).default, __VUE_SSR_CONTEXT__);`,
+      ]).join('\n')
+    }
+  }
+  return `module.exports = require(${remainingRequest})`
+}

lib/plugins/ServerMiniCssExtractPlugin.js

@@ -7,7 +7,7 @@ const WebpackBar = require('webpackbar')
 
 const config = require('./config')
 const HtmlFilterPlugin = require('./plugins/HtmlFilterPlugin')
-const ServerMiniCssExtractPlugin = require('./plugins/ServerMiniCssExtractPlugin')
+const CssContextLoader = require.resolve('./loaders/css-context')
 
 exports.getWebpackConfig = ({ target }) => {
   const service = config.service
@@ -26,19 +26,20 @@ exports.getWebpackConfig = ({ target }) => {
   if (!isClient) {
     webpackConfig.plugins.delete('friendly-errors')
 
-    // Fix mini-css-extract-plugin error on server
+    const isExtracting = webpackConfig.plugins.has('extract-css')
+    if (isExtracting) {
+      // Remove extract
     const langs = ['css', 'postcss', 'scss', 'sass', 'less', 'stylus']
     const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
     for (const lang of langs) {
       for (const type of types) {
         const rule = webpackConfig.module.rule(lang).oneOf(type)
-        if (rule.uses.has('extract-css-loader')) {
-          rule.use('extract-css-loader').loader(ServerMiniCssExtractPlugin.loader)
+          rule.uses.delete('extract-css-loader')
+          // Critical CSS
+          rule.use('css-context').loader(CssContextLoader).before('css-loader')
         }
       }
-    }
-    if (webpackConfig.plugins.has('extract-css')) {
-      webpackConfig.plugin('extract-css').use(ServerMiniCssExtractPlugin)
+      webpackConfig.plugins.delete('extract-css')
     }
   }
 

lib/webpack.js

@@ -33,10 +33,12 @@
     "cross-env": "^5.2.0",
     "express": "^4.16.3",
     "fs-extra": "^7.0.0",
+    "hash-sum": "^1.0.2",
+    "loader-utils": "^1.1.0",
     "lru-cache": "^4.1.3",
     "memory-fs": "^0.4.1",
-    "mini-css-extract-plugin": "^0.4.2",
     "portfinder": "^1.0.17",
+    "querystring": "^0.2.0",
     "rimraf": "^2.6.2",
     "serve-favicon": "^2.5.0",
     "webpack-dev-middleware": "^3.2.0",

package.json

@@ -768,6 +768,10 @@ has@^1.0.1:
   dependencies:
     function-bind "^1.1.1"
 
+hash-sum@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-1.0.2.tgz#33b40777754c6432573c120cc3808bbd10d47f04"
+
 hosted-git-info@^2.1.4:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.7.1.tgz#97f236977bd6e125408930ff6de3eec6281ec047"
@@ -1045,14 +1049,6 @@ mimic-fn@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
 
-mini-css-extract-plugin@^0.4.2:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.2.tgz#b3ecc0d6b1bbe5ff14add42b946a7b200cf78651"
-  dependencies:
-    loader-utils "^1.1.0"
-    schema-utils "^1.0.0"
-    webpack-sources "^1.1.0"
-
 minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
@@ -1473,14 +1469,6 @@ [email protected]:
   dependencies:
     is-fullwidth-code-point "^2.0.0"
 
-source-list-map@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"
-
-source-map@~0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-
 spdx-correct@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.0.0.tgz#05a5b4d7153a195bc92c3c425b69f3b2a9524c82"
@@ -1700,13 +1688,6 @@ webpack-node-externals@^1.7.2:
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/webpack-node-externals/-/webpack-node-externals-1.7.2.tgz#6e1ee79ac67c070402ba700ef033a9b8d52ac4e3"
 
-webpack-sources@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.2.0.tgz#18181e0d013fce096faf6f8e6d41eeffffdceac2"
-  dependencies:
-    source-list-map "^2.0.0"
-    source-map "~0.6.1"
-
 webpackbar@^2.6.3:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/webpackbar/-/webpackbar-2.6.3.tgz#4f2d0078375acfe95c0e55227771a2ed98ecc5c9"