feat!: make cache-loader optional (#6985)

Author: haoqunjiang

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

@@ -30,15 +30,19 @@ 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')
-    })
+    try {
+      const cacheLoaderPath = require.resolve('cache-loader')
+
+      addLoader({
+        name: 'cache-loader',
+        loader: cacheLoaderPath,
+        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')
+      })
+    } catch (e) {}
 
     if (useThreads) {
       addLoader({

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

@@ -27,7 +27,6 @@
     "@types/webpack-env": "^1.15.2",
     "@vue/cli-shared-utils": "^5.0.0-rc.2",
     "babel-loader": "^8.2.2",
-    "cache-loader": "^4.1.0",
     "fork-ts-checker-webpack-plugin": "^6.4.0",
     "globby": "^11.0.2",
     "thread-loader": "^3.0.0",
@@ -37,11 +36,15 @@
   },
   "peerDependencies": {
     "@vue/cli-service": "^3.0.0 || ^4.0.0 || ^5.0.0-0",
+    "cache-loader": "^4.1.0",
     "typescript": ">=2",
     "vue": "^2 || ^3.2.13",
     "vue-template-compiler": "^2.0.0"
   },
   "peerDependenciesMeta": {
+    "cache-loader": {
+      "optional": true
+    },
     "vue-template-compiler": {
       "optional": true
     }

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

@@ -54,6 +54,11 @@ module.exports = (api, options) => {
     // js is handled by cli-plugin-babel ---------------------------------------
 
     // vue-loader --------------------------------------------------------------
+    let cacheLoaderPath
+    try {
+      cacheLoaderPath = require.resolve('cache-loader')
+    } catch (e) {}
+
     if (vueMajor === 2) {
       // for Vue 2 projects
       const vueLoaderCacheConfig = api.genCacheConfig('vue-loader', {
@@ -71,20 +76,25 @@ module.exports = (api, options) => {
               : 'vue/dist/vue.runtime.esm.js'
           )
 
+      if (cacheLoaderPath) {
+        webpackConfig.module
+          .rule('vue')
+            .test(/\.vue$/)
+            .use('cache-loader')
+              .loader(cacheLoaderPath)
+              .options(vueLoaderCacheConfig)
+      }
+
       webpackConfig.module
         .rule('vue')
           .test(/\.vue$/)
-          .use('cache-loader')
-            .loader(require.resolve('cache-loader'))
-            .options(vueLoaderCacheConfig)
-            .end()
           .use('vue-loader')
             .loader(require.resolve('@vue/vue-loader-v15'))
             .options(Object.assign({
               compilerOptions: {
                 whitespace: 'condense'
               }
-            }, vueLoaderCacheConfig))
+            }, cacheLoaderPath ? vueLoaderCacheConfig : {}))
 
       webpackConfig
         .plugin('vue-loader')
@@ -113,21 +123,24 @@ module.exports = (api, options) => {
               : 'vue/dist/vue.runtime.esm-bundler.js'
           )
 
+      if (cacheLoaderPath) {
+        webpackConfig.module
+          .rule('vue')
+            .test(/\.vue$/)
+            .use('cache-loader')
+              .loader(cacheLoaderPath)
+              .options(vueLoaderCacheConfig)
+      }
+
       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()
-          .end()
 
       webpackConfig
         .plugin('vue-loader')

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

@@ -39,7 +39,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",
@@ -85,6 +84,9 @@
     "webpack-sources": "*"
   },
   "peerDependenciesMeta": {
+    "cache-loader": {
+      "optional": true
+    },
     "less-loader": {
       "optional": true
     },
@@ -108,6 +110,7 @@
     }
   },
   "devDependencies": {
+    "cache-loader": "^4.1.0",
     "sass": "^1.32.7",
     "sass-loader": "^12.0.0",
     "stylus-loader": "^6.1.0",