refactor: options cache without using this._compilation

Author: yyx990803

lib/helpers.js

@@ -67,6 +67,7 @@ function ensureBang (loader) {
 }
 
 function resolveLoaders (
+  optionsId,
   options,
   moduleId,
   isProduction,
@@ -97,6 +98,7 @@ function resolveLoaders (
       id: moduleId,
       hasScoped,
       hasComment,
+      optionsId,
       buble: bubleTemplateOptions
     })
 
@@ -142,6 +144,7 @@ function resolveLoaders (
 }
 
 module.exports = function createHelpers (
+  optionsId,
   loaderContext,
   options,
   moduleId,
@@ -161,6 +164,7 @@ module.exports = function createHelpers (
     preLoaders,
     postLoaders
   } = resolveLoaders(
+    optionsId,
     options,
     moduleId,
     isProduction,
@@ -304,6 +308,7 @@ module.exports = function createHelpers (
         '?' +
         JSON.stringify({
           // a marker for vue-style-loader to know that this is an import from a vue file
+          optionsId,
           vue: true,
           id: moduleId,
           scoped: !!scoped,
@@ -359,8 +364,8 @@ module.exports = function createHelpers (
             defaultLoaders.html +
             '!' +
             templatePreprocessorPath +
-            '?engine=' +
-            lang +
+            `?engine=${lang}` +
+            `&optionsId=${optionsId}` +
             '!'
           )
         case 'styles':

lib/loader.js

@@ -4,6 +4,7 @@ const parse = require('./parser')
 const createHelpers = require('./helpers')
 const loaderUtils = require('loader-utils')
 const normalize = require('./utils/normalize')
+const { saveOptions } = require('./utils/options-cache')
 const hotReloadAPIPath = normalize.dep('vue-hot-reload-api')
 const componentNormalizerPath = normalize.lib('runtime/component-normalizer')
 
@@ -19,12 +20,10 @@ module.exports = function (content) {
   // enabled via vue-cli's --target web-component
   const isShadowMode = !!options.shadowMode
 
-  // share options between the main loader of style/template loaders
-  Object.defineProperty(this._compilation, '__vueOptions__', {
-    value: options,
-    enumerable: false,
-    configurable: true
-  })
+  // share options between the main loader of style/template loaders.
+  // to support having multiple uses of vue-loader with different options,
+  // we cache and retrieve options for each unique options object.
+  const optionsId = saveOptions(options)
 
   const filePath = this.resourcePath
   const fileName = path.basename(filePath)
@@ -68,6 +67,7 @@ module.exports = function (content) {
     getRequestString,
     getSrcRequestString
   } = createHelpers(
+    optionsId,
     loaderContext,
     options,
     moduleId,

lib/selector.js

@@ -7,7 +7,6 @@ const parse = require('./parser')
 const loaderUtils = require('loader-utils')
 
 module.exports = function (content) {
-  this.cacheable()
   const query = loaderUtils.getOptions(this) || {}
   const context = (this._compiler && this._compiler.context) || this.options.context || process.cwd()
   let filename = path.basename(this.resourcePath)

lib/style-compiler/index.js

@@ -1,5 +1,6 @@
 const postcss = require('postcss')
 const loaderUtils = require('loader-utils')
+const { loadOptions } = require('../utils/options-cache')
 const loadPostcssConfig = require('./load-postcss-config')
 
 const trim = require('./plugins/trim')
@@ -8,7 +9,7 @@ const scopeId = require('./plugins/scope-id')
 module.exports = function (css, map) {
   const cb = this.async()
   const loaderOptions = loaderUtils.getOptions(this) || {}
-  const inlineConfig = (this._compilation.__vueOptions__ || {}).postcss
+  const inlineConfig = loadOptions(loaderOptions.optionsId).postcss
 
   loadPostcssConfig(this, inlineConfig)
     .then(config => {

lib/template-compiler/index.js

@@ -2,6 +2,7 @@ const prettier = require('prettier')
 const loaderUtils = require('loader-utils')
 const normalize = require('../utils/normalize')
 const compiler = require('vue-template-compiler')
+const { loadOptions } = require('../utils/options-cache')
 const transpile = require('vue-template-es2015-compiler')
 const hotReloadAPIPath = normalize.dep('vue-hot-reload-api')
 const transformRequire = require('./modules/transform-require')
@@ -10,8 +11,8 @@ const transformSrcset = require('./modules/transform-srcset')
 module.exports = function (html) {
   const isServer = this.target === 'node'
   const isProduction = this.minimize || process.env.NODE_ENV === 'production'
-  const vueOptions = this._compilation.__vueOptions__ || {}
   const options = loaderUtils.getOptions(this) || {}
+  const vueOptions = loadOptions(options.optionsId)
   const needsHotReload = !isServer && !isProduction && vueOptions.hotReload !== false
   const defaultModules = [transformRequire(vueOptions.transformToRequire), transformSrcset()]
 

lib/template-compiler/preprocessor.js

@@ -2,6 +2,7 @@
 
 const cons = require('consolidate')
 const loaderUtils = require('loader-utils')
+const { loadOptions } = require('../utils/options-cache')
 
 module.exports = function (content) {
   const callback = this.async()
@@ -19,8 +20,9 @@ module.exports = function (content) {
   }
 
   // allow passing options to the template preprocessor via `template` option
-  if (this._compilation.__vueOptions__) {
-    Object.assign(opt, this._compilation.__vueOptions__.template)
+  const vueOptions = loadOptions(opt.optionsId)
+  if (vueOptions.template) {
+    Object.assign(opt, vueOptions.template)
   }
 
   // for relative includes

lib/utils/options-cache.js

@@ -0,0 +1,77 @@
+/*
+Inter-loader Option idToOptions
+
+Vue-loader works by delegating language blocks to sub-loaders.
+The main loader needs to share its options object with the sub-loaders.
+Technically we should pass everything the sub loaders need via their own
+options, however there are two problems with this approach:
+
+1. Some options (e.g. postcss, compilerModules) may contain non-serializable
+   values and cannot be passed via inline requests
+2. Passing everything via inline requests makes the module string extremely
+   verbose, and can be quite annoying in error messages.
+
+To get around this, we cache the options in this module here in order to share
+it between loaders.
+
+- In order to support multiple uses of vue-loader with different options,
+each options object is cached with an id.
+- To share options across threads in threadMode, options are serialized and
+cached on disk.
+*/
+
+const fs = require('fs')
+const path = require('path')
+const hash = require('hash-sum')
+
+const optionsToId = new Map()
+const idToOptions = new Map()
+
+exports.saveOptions = options => {
+  if (optionsToId.has(options)) {
+    return optionsToId.get(options)
+  }
+
+  const threadMode = options.threadMode
+  const serialized = threadMode ? serialize(options) : null
+  const id = serialized ? hash(serialized) : String(idToOptions.size)
+
+  idToOptions.set(id, options)
+  optionsToId.set(options, id)
+
+  if (serialized) {
+    const fsidToOptionsPath = getidToOptionsPath(id)
+    if (!fs.existsSync(fsidToOptionsPath)) {
+      fs.writeFileSync(fsidToOptionsPath, serialized)
+    }
+  }
+
+  return id
+}
+
+exports.loadOptions = id => {
+  const res = idToOptions.get(id)
+  if (res) {
+    return res
+  }
+  const fsidToOptionsPath = getidToOptionsPath(id)
+  if (fs.existsSync(fsidToOptionsPath)) {
+    return JSON.parse(fs.readFileSync(fsidToOptionsPath, 'utf-8'))
+  } else {
+    return {}
+  }
+}
+
+function serialize (options) {
+  let res
+  try {
+    res = JSON.stringify(options)
+  } catch (e) {
+    throw new Error(`options must be JSON serializable in thread mode.`)
+  }
+  return res
+}
+
+function getidToOptionsPath (id) {
+  return path.resolve(__dirname, `.options-idToOptions-${id}`)
+}