feat!: enable webpack 5 persistent caching by default

packages/@vue/cli-plugin-typescript/__tests__/tsPluginBabel.spec.js

@@ -17,9 +17,8 @@ test('using correct loader', () => {
   const config = service.resolveWebpackConfig()
   // eslint-disable-next-line no-shadow
   const rule = config.module.rules.find(rule => rule.test.test('foo.ts'))
-  expect(rule.use[0].loader).toMatch(require.resolve('cache-loader'))
-  expect(rule.use[1].loader).toMatch(require.resolve('babel-loader'))
-  expect(rule.use[2].loader).toMatch(require.resolve('ts-loader'))
+  expect(rule.use[0].loader).toMatch(require.resolve('babel-loader'))
+  expect(rule.use[1].loader).toMatch(require.resolve('ts-loader'))
 })
 
 const creatorOptions = {

packages/@vue/cli-plugin-typescript/index.js

@@ -30,16 +30,6 @@ module.exports = (api, projectOptions) => {
       tsxRule.use(name).loader(loader).options(options)
     }
 
-    addLoader({
-      name: 'cache-loader',
-      loader: require.resolve('cache-loader'),
-      options: api.genCacheConfig('ts-loader', {
-        'ts-loader': require('ts-loader/package.json').version,
-        'typescript': require('typescript/package.json').version,
-        modern: !!process.env.VUE_CLI_MODERN_BUILD
-      }, 'tsconfig.json')
-    })
-
     if (useThreads) {
       addLoader({
         name: 'thread-loader',

packages/@vue/cli-plugin-typescript/package.json

@@ -26,7 +26,6 @@
     "@types/webpack-env": "^1.15.2",
     "@vue/cli-shared-utils": "^5.0.0-alpha.8",
     "babel-loader": "^8.2.2",
-    "cache-loader": "^4.1.0",
     "fork-ts-checker-webpack-plugin": "^6.1.0",
     "globby": "^11.0.2",
     "thread-loader": "^3.0.0",

packages/@vue/cli-plugin-unit-mocha/setup.js

@@ -4,3 +4,5 @@ require('jsdom-global')(undefined, { pretendToBeVisual: true, url: 'http://local
 window.Date = Date
 // https://github.com/vuejs/vue-next/pull/2943
 global.ShadowRoot = window.ShadowRoot
+
+global.SVGElement = window.SVGElement

packages/@vue/cli-service/lib/PluginAPI.js

@@ -171,12 +171,6 @@ class PluginAPI {
       ]
     }
 
-    try {
-      variables['cache-loader'] = require('cache-loader/package.json').version
-    } catch (e) {
-      // cache-loader is only intended to be used for webpack 4
-    }
-
     if (!Array.isArray(configFiles)) {
       configFiles = [configFiles]
     }

packages/@vue/cli-service/lib/commands/build/index.js

@@ -2,7 +2,8 @@ const defaults = {
   clean: true,
   target: 'app',
   formats: 'commonjs,umd,umd-min',
-  'unsafe-inline': true
+  'unsafe-inline': true,
+  cache: true
 }
 
 const buildModes = {
@@ -38,7 +39,8 @@ module.exports = (api, options) => {
       '--report-json': 'generate report.json to help analyze bundle content',
       '--skip-plugins': `comma-separated list of plugin names to skip for this run`,
       '--watch': `watch for changes`,
-      '--stdin': `close when stdin ends`
+      '--stdin': `close when stdin ends`,
+      '--no-cache': `disable webpack persistent caching`
     }
   }, async (args, rawArgs) => {
     for (const key in defaults) {
@@ -106,6 +108,7 @@ async function build (args, api, options) {
     logWithSpinner,
     stopSpinner
   } = require('@vue/cli-shared-utils')
+  const getSpecificEnv = require('../../util/getSpecificEnv')
 
   log()
   const mode = api.service.mode
@@ -196,6 +199,24 @@ async function build (args, api, options) {
     await fs.emptyDir(targetDir)
   }
 
+  if (args.cache) {
+    modifyConfig(webpackConfig, config => {
+      if (config.cache && typeof config.cache === 'object') {
+        const configVars = JSON.stringify({ ...args, targetDir })
+        config.cache.name =
+            `${config.mode}-${args.target}` +
+            `-${Object.keys(config.entry).join('-')}` +
+            `${args.modern ? (args.modernBuild ? '-modern' : '-legacy') : ''}` +
+            `${config.cache.name ? '-' + config.cache.name : ''}`
+        config.cache.version = `${config.cache.version}|${configVars}|${getSpecificEnv()}`
+      }
+    })
+  } else {
+    modifyConfig(webpackConfig, config => {
+      config.cache = false
+    })
+  }
+
   return new Promise((resolve, reject) => {
     webpack(webpackConfig, (err, stats) => {
       stopSpinner(false)

packages/@vue/cli-service/lib/commands/serve.js

@@ -10,7 +10,8 @@ const {
 const defaults = {
   host: '0.0.0.0',
   port: 8080,
-  https: false
+  https: false,
+  cache: true
 }
 
 module.exports = (api, options) => {
@@ -26,7 +27,8 @@ module.exports = (api, options) => {
       '--port': `specify port (default: ${defaults.port})`,
       '--https': `use https (default: ${defaults.https})`,
       '--public': `specify the public network URL for the HMR client`,
-      '--skip-plugins': `comma-separated list of plugin names to skip for this run`
+      '--skip-plugins': `comma-separated list of plugin names to skip for this run`,
+      '--no-cache': `disable webpack persistent caching`
     }
   }, async function serve (args) {
     info('Starting development server...')
@@ -46,6 +48,7 @@ module.exports = (api, options) => {
     const launchEditorMiddleware = require('launch-editor-middleware')
     const validateWebpackConfig = require('../util/validateWebpackConfig')
     const isAbsoluteUrl = require('../util/isAbsoluteUrl')
+    const getSpecificEnv = require('../util/getSpecificEnv')
 
     // configs that only matters for dev server
     api.chainWebpack(webpackConfig => {
@@ -160,6 +163,21 @@ module.exports = (api, options) => {
       addDevClientToEntry(webpackConfig, devClients)
     }
 
+    args.cache = args.cache == null ? defaults.cache : args.cache
+    if (args.cache) {
+      if (webpackConfig.cache && typeof webpackConfig.cache === 'object') {
+        const configVars = JSON.stringify({ ...args })
+
+        webpackConfig.cache.name =
+          `${webpackConfig.mode}` +
+          `-${Object.keys(webpackConfig.entry).join('-')}` +
+          `${webpackConfig.cache.name ? '-' + webpackConfig.cache.name : ''}`
+        webpackConfig.cache.version = `${webpackConfig.cache.version}|${configVars}|${getSpecificEnv()}`
+      }
+    } else {
+      webpackConfig.cache = false
+    }
+
     // create compiler
     const compiler = webpack(webpackConfig)
 

packages/@vue/cli-service/lib/config/base.js

@@ -7,6 +7,8 @@ module.exports = (api, options) => {
   const webpack = require('webpack')
   const webpackMajor = semver.major(webpack.version)
   const vueMajor = require('../util/getVueMajor')(cwd)
+  const fileConfigPath = require('../util/getFileConfigPath')(cwd)
+  const cliServiceVersion = require('@vue/cli-service/package.json').version
 
   api.chainWebpack(webpackConfig => {
     const isLegacyBundle = process.env.VUE_CLI_MODERN_MODE && !process.env.VUE_CLI_MODERN_BUILD
@@ -20,7 +22,20 @@ module.exports = (api, options) => {
           .resolve.set('fullySpecified', false)
     }
 
+    const cacheOptions = {
+      type: 'filesystem',
+      version: `${cliServiceVersion}`,
+      buildDependencies: {
+        config: [require.resolve('../../webpack.config')]
+      }
+    }
+
+    if (fileConfigPath) {
+      cacheOptions.buildDependencies.config.push(fileConfigPath)
+    }
+
     webpackConfig
+      .cache(cacheOptions)
       .mode('development')
       .context(api.service.context)
       .entry('app')
@@ -57,12 +72,6 @@ module.exports = (api, options) => {
     // vue-loader --------------------------------------------------------------
     if (vueMajor === 2) {
       // for Vue 2 projects
-      const vueLoaderCacheConfig = api.genCacheConfig('vue-loader', {
-        'vue-loader': require('vue-loader-v15/package.json').version,
-        '@vue/component-compiler-utils': require('@vue/component-compiler-utils/package.json').version,
-        'vue-template-compiler': require('vue-template-compiler/package.json').version
-      })
-
       webpackConfig.resolve
         .alias
           .set(
@@ -75,17 +84,13 @@ module.exports = (api, options) => {
       webpackConfig.module
         .rule('vue')
           .test(/\.vue$/)
-          .use('cache-loader')
-            .loader(require.resolve('cache-loader'))
-            .options(vueLoaderCacheConfig)
-            .end()
           .use('vue-loader')
             .loader(require.resolve('vue-loader-v15'))
-            .options(Object.assign({
+            .options({
               compilerOptions: {
                 whitespace: 'condense'
               }
-            }, vueLoaderCacheConfig))
+            })
 
       webpackConfig
         .plugin('vue-loader')
@@ -101,11 +106,6 @@ module.exports = (api, options) => {
             .prepend(path.resolve(__dirname, './vue-loader-v15-resolve-compat'))
     } else if (vueMajor === 3) {
       // for Vue 3 projects
-      const vueLoaderCacheConfig = api.genCacheConfig('vue-loader', {
-        'vue-loader': require('vue-loader/package.json').version,
-        '@vue/compiler-sfc': require('@vue/compiler-sfc/package.json').version
-      })
-
       webpackConfig.resolve
         .alias
           .set(
@@ -118,14 +118,9 @@ module.exports = (api, options) => {
       webpackConfig.module
         .rule('vue')
           .test(/\.vue$/)
-          .use('cache-loader')
-            .loader(require.resolve('cache-loader'))
-            .options(vueLoaderCacheConfig)
-            .end()
           .use('vue-loader')
             .loader(require.resolve('vue-loader'))
             .options({
-              ...vueLoaderCacheConfig,
               babelParserPlugins: ['jsx', 'classProperties', 'decorators-legacy']
             })
             .end()

packages/@vue/cli-service/lib/util/getFileConfigPath.js

@@ -0,0 +1,21 @@
+const path = require('path')
+const fs = require('fs')
+
+module.exports = function getFileConfigPath (context) {
+  const possibleConfigPaths = [
+    process.env.VUE_CLI_SERVICE_CONFIG_PATH,
+    './vue.config.js',
+    './vue.config.cjs'
+  ]
+
+  let fileConfigPath
+  for (const p of possibleConfigPaths) {
+    const resolvedPath = p && path.resolve(context, p)
+    if (resolvedPath && fs.existsSync(resolvedPath)) {
+      fileConfigPath = resolvedPath
+      break
+    }
+  }
+
+  return fileConfigPath
+}

packages/@vue/cli-service/lib/util/getSpecificEnv.js

@@ -0,0 +1,11 @@
+module.exports = function getSpecificEnv () {
+  return Object.keys(process.env).reduce(
+    (prev, key) => {
+      if (key.startsWith('VUE_CLI_') || key.startsWith('VUE_APP_') || key === 'NODE_ENV' || key === 'BABEL_ENV') {
+        return `${prev}|${key}=${process.env[key]}`
+      }
+      return prev
+    },
+    ''
+  )
+}

packages/@vue/cli-service/package.json

@@ -38,7 +38,6 @@
     "address": "^1.1.2",
     "autoprefixer": "^10.2.4",
     "browserslist": "^4.16.3",
-    "cache-loader": "^4.1.0",
     "case-sensitive-paths-webpack-plugin": "^2.3.0",
     "cli-highlight": "^2.1.10",
     "clipboardy": "^2.3.0",

packages/@vue/cli-ui/vue.config.js

@@ -13,6 +13,10 @@ module.exports = {
     }
   },
 
+  chainWebpack: config => {
+    config.module.rule('gql').uses.delete('cache-loader')
+  },
+
   css: {
     loaderOptions: {
       stylus: {

yarn.lock

@@ -6597,18 +6597,6 @@ cache-loader@^3.0.0:
     neo-async "^2.6.1"
     schema-utils "^1.0.0"
 
-cache-loader@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/cache-loader/-/cache-loader-4.1.0.tgz#9948cae353aec0a1fcb1eafda2300816ec85387e"
-  integrity sha512-ftOayxve0PwKzBF/GLsZNC9fJBXl8lkZE3TOsjkboHfVHVkL39iUEs1FO07A33mizmci5Dudt38UZrrYXDtbhw==
-  dependencies:
-    buffer-json "^2.0.0"
-    find-cache-dir "^3.0.0"
-    loader-utils "^1.2.3"
-    mkdirp "^0.5.1"
-    neo-async "^2.6.1"
-    schema-utils "^2.0.0"
-
 cacheable-lookup@^5.0.3:
   version "5.0.4"
   resolved "https://registry.yarnpkg.com/cacheable-lookup/-/cacheable-lookup-5.0.4.tgz#5a6b865b2c44357be3d5ebc2a467b032719a7005"
@@ -10467,7 +10455,7 @@ find-cache-dir@^2.0.0, find-cache-dir@^2.1.0:
     make-dir "^2.0.0"
     pkg-dir "^3.0.0"
 
-find-cache-dir@^3.0.0, find-cache-dir@^3.3.1:
+find-cache-dir@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.1.tgz#89b33fad4a4670daa94f855f7fbe31d6d84fe880"
   integrity sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ==
@@ -19021,7 +19009,7 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
-schema-utils@^2.0.0, schema-utils@^2.6.5:
+schema-utils@^2.6.5:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
   integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==