feat: enable template compile caching

Author: yyx990803

docs/options.md

@@ -74,3 +74,10 @@ Force production mode, which prohibits the loader from emitting code (e.g. hot-r
 - default: `false`
 
 Compiled the component for usage inside Shadow DOM. In this mode, the styles of the component will be injected into `this.$root.$options.shadowRoot` instead of the document head.
+
+## cacheDirectory / cacheIdentifier
+
+- type: `string`
+- default: `undefined`
+
+When both options are specified, enables file-system-based template compilation caching (requires `cache-loader` to be installed in the same project).

lib/loaders/pitcher.js

@@ -9,6 +9,8 @@ module.exports = code => code
 // This pitching loader is responsible for intercepting all vue block requests
 // and transform it into appropriate requests.
 module.exports.pitch = function (remainingRequest) {
+  const options = loaderUtils.getOptions(this)
+  const { cacheDirectory, cacheIdentifier } = options
   const query = qs.parse(this.resourceQuery.slice(1))
 
   // if this is a language block request, remove eslint-loader to avoid
@@ -67,9 +69,13 @@ module.exports.pitch = function (remainingRequest) {
     }
   }
 
-  // for templates: inject the template compiler
+  // for templates: inject the template compiler & optional cache
   if (query.type === `template`) {
+    const cacheLoader = cacheDirectory && cacheIdentifier
+      ? [`cache-loader?${JSON.stringify(options)}`]
+      : []
     const request = genRequest([
+      ...cacheLoader,
       templateLoaderPath + `??vue-loader-options`,
       ...loaders
     ])

lib/plugin.js

@@ -83,6 +83,10 @@ class VueLoaderPlugin {
       resourceQuery: query => {
         const parsed = qs.parse(query.slice(1))
         return parsed.vue != null
+      },
+      options: {
+        cacheDirectory: vueLoaderUse.options.cacheDirectory,
+        cacheIdentifier: vueLoaderUse.options.cacheIdentifier
       }
     }