perf: adjust caching and parallelization

Author: yyx990803

packages/@vue/cli-plugin-babel/README.md

@@ -20,11 +20,7 @@ module.exports = {
 
 ## Caching
 
-[cache-loader](https://github.com/webpack-contrib/cache-loader) is enabled by default and cache is stored in `<projectRoot>/node_modules/.cache/cache-loader`.
-
-## Parallelization
-
-[thread-loader](https://github.com/webpack-contrib/thread-loader) is enabled by default when the machine has more than 1 CPU cores. This can be turned off by setting `parallel: false` in `vue.config.js`.
+[cache-loader](https://github.com/webpack-contrib/cache-loader) is enabled by default and cache is stored in `<projectRoot>/node_modules/.cache/babel-loader`.
 
 ## Installing in an Already Created Project
 
@@ -37,4 +33,3 @@ vue add @vue/babel
 - `config.rule('js')`
 - `config.rule('js').use('babel-loader')`
 - `config.rule('js').use('cache-loader')`
-- `config.rule('js').use('thread-loader')`

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

@@ -1,9 +1,5 @@
-module.exports = (api, {
-  parallel,
-  transpileDependencies
-}) => {
-  const useThreads = process.env.NODE_ENV === 'production' && parallel
-  const cacheDirectory = api.resolve('node_modules/.cache/cache-loader')
+module.exports = (api, options) => {
+  const { genCacheConfig } = require('@vue/cli-shared-utils')
   const cliServicePath = require('path').dirname(require.resolve('@vue/cli-service'))
 
   api.chainWebpack(webpackConfig => {
@@ -21,7 +17,7 @@ module.exports = (api, {
               return true
             }
             // check if this is something the user explicitly wants to transpile
-            if (transpileDependencies.some(dep => filepath.match(dep))) {
+            if (options.transpileDependencies.some(dep => filepath.match(dep))) {
               return false
             }
             // Don't transpile node_modules
@@ -30,15 +26,9 @@ module.exports = (api, {
           .end()
         .use('cache-loader')
           .loader('cache-loader')
-          .options({ cacheDirectory })
+          .options(genCacheConfig(api, options, 'babel-loader', 'babel.config.js'))
           .end()
 
-    if (useThreads) {
-      jsRule
-        .use('thread-loader')
-          .loader('thread-loader')
-    }
-
     jsRule
       .use('babel-loader')
         .loader('babel-loader')

packages/@vue/cli-plugin-typescript/README.md

@@ -16,11 +16,7 @@ If opted to use [TSLint](https://palantir.github.io/tslint/) during project crea
 
 ## Caching
 
-[cache-loader](https://github.com/webpack-contrib/cache-loader) is enabled by default and cache is stored in `<projectRoot>/node_modules/.cache/cache-loader`.
-
-## Parallelization
-
-[thread-loader](https://github.com/webpack-contrib/thread-loader) is enabled by default when the machine has more than 1 CPU cores. This can be turned off by setting `parallel: false` in `vue.config.js`.
+[cache-loader](https://github.com/webpack-contrib/cache-loader) is enabled by default and cache is stored in `<projectRoot>/node_modules/.cache/ts-loader`.
 
 ## Installing in an Already Created Project
 
@@ -34,5 +30,4 @@ vue add @vue/typescript
 - `config.rule('ts').use('ts-loader')`
 - `config.rule('ts').use('babel-loader')` (when used alongside `@vue/cli-plugin-babel`)
 - `config.rule('ts').use('cache-loader')`
-- `config.rule('ts').use('thread-loader')`
 - `config.plugin('fork-ts-checker')`

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

@@ -1,10 +1,7 @@
-module.exports = (api, {
-  parallel,
-  lintOnSave
-}) => {
+module.exports = (api, options) => {
   const fs = require('fs')
-  const useThreads = process.env.NODE_ENV === 'production' && parallel
-  const cacheDirectory = api.resolve('node_modules/.cache/cache-loader')
+  const { genCacheConfig } = require('@vue/cli-shared-utils')
+  const useThreads = process.env.NODE_ENV === 'production' && options.parallel
 
   api.chainWebpack(config => {
     config.entry('app')
@@ -26,13 +23,8 @@ module.exports = (api, {
 
     addLoader({
       loader: 'cache-loader',
-      options: { cacheDirectory }
+      options: genCacheConfig(api, options, 'ts-loader', 'tsconfig.json')
     })
-    if (useThreads) {
-      addLoader({
-        loader: 'thread-loader'
-      })
-    }
 
     if (api.hasPlugin('babel')) {
       addLoader({
@@ -60,7 +52,7 @@ module.exports = (api, {
       .plugin('fork-ts-checker')
         .use(require('fork-ts-checker-webpack-plugin'), [{
           vue: true,
-          tslint: lintOnSave !== false && fs.existsSync(api.resolve('tslint.json')),
+          tslint: options.lintOnSave !== false && fs.existsSync(api.resolve('tslint.json')),
           formatter: 'codeframe',
           // https://github.com/TypeStrong/ts-loader#happypackmode-boolean-defaultfalse
           checkSyntacticErrors: useThreads

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

@@ -3,6 +3,7 @@ module.exports = (api, options) => {
     const resolveLocal = require('../util/resolveLocal')
     const getAssetPath = require('../util/getAssetPath')
     const inlineLimit = 10000
+    const useThreads = process.env.NODE_ENV === 'production' && options.parallel
 
     webpackConfig
       .context(api.service.context)
@@ -42,16 +43,30 @@ module.exports = (api, options) => {
 
     // vue-loader --------------------------------------------------------------
 
-    webpackConfig.module
+    const { genCacheConfig } = require('@vue/cli-shared-utils')
+
+    const vueRule = webpackConfig.module
       .rule('vue')
         .test(/\.vue$/)
-        .use('vue-loader')
-          .loader('vue-loader')
-          .options({
-            compilerOptions: {
-              preserveWhitespace: false
-            }
-          })
+        .use('cache-loader')
+          .loader('cache-loader')
+          .options(genCacheConfig(api, options, 'vue-loader'))
+          .end()
+
+    if (useThreads) {
+      vueRule
+        .use('thread-loader')
+          .loader('thread-loader')
+    }
+
+    vueRule
+      .use('vue-loader')
+        .loader('vue-loader')
+        .options({
+          compilerOptions: {
+            preserveWhitespace: false
+          }
+        })
 
     webpackConfig
       .plugin('vue-loader')

packages/@vue/cli-shared-utils/index.js

@@ -1,5 +1,6 @@
 [
   'env',
+  'cache',
   'logger',
   'spinner',
   'validate',

packages/@vue/cli-shared-utils/lib/cache.js

@@ -0,0 +1,25 @@
+const fs = require('fs')
+const path = require('path')
+
+exports.genCacheConfig = (api, options, id, configFile) => {
+  const cacheDirectory = process.env.VUE_CLI_TEST
+    ? path.resolve(__dirname, `../../../../node_modules/.cache/${id}`)
+    : api.resolve(`node_modules/.cache/${id}`)
+
+  const variables = {
+    [id]: require(`${id}/package.json`).version,
+    'cache-loader': require('cache-loader/package.json').version,
+    env: process.env.NODE_ENV,
+    test: !!process.env.VUE_CLI_TEST,
+    config: (options.chainWebpack || '').toString() + (options.configureWebpack || '').toString()
+  }
+  if (configFile) {
+    const file = api.resolve(configFile)
+    if (fs.existsSync(file)) {
+      variables.configFile = fs.readFileSync(configFile, 'utf-8')
+    }
+  }
+  const cacheIdentifier = JSON.stringify(variables)
+
+  return { cacheDirectory, cacheIdentifier }
+}