From 1075576690dd9ebd4a3192ea84fa35b9ee7ee82b Mon Sep 17 00:00:00 2001 From: Evan You Date: Tue, 22 May 2018 00:09:30 -0400 Subject: [PATCH] perf: adjust caching and parallelization --- packages/@vue/cli-plugin-babel/README.md | 7 +---- packages/@vue/cli-plugin-babel/index.js | 18 +++-------- packages/@vue/cli-plugin-typescript/README.md | 7 +---- packages/@vue/cli-plugin-typescript/index.js | 18 +++-------- packages/@vue/cli-service/lib/config/base.js | 31 ++++++++++++++----- packages/@vue/cli-shared-utils/index.js | 1 + packages/@vue/cli-shared-utils/lib/cache.js | 25 +++++++++++++++ 7 files changed, 60 insertions(+), 47 deletions(-) create mode 100644 packages/@vue/cli-shared-utils/lib/cache.js diff --git a/packages/@vue/cli-plugin-babel/README.md b/packages/@vue/cli-plugin-babel/README.md index e39900c31..23c08bc4f 100644 --- a/packages/@vue/cli-plugin-babel/README.md +++ b/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 `/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 `/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')` diff --git a/packages/@vue/cli-plugin-babel/index.js b/packages/@vue/cli-plugin-babel/index.js index 6afe03388..1c303052a 100644 --- a/packages/@vue/cli-plugin-babel/index.js +++ b/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') diff --git a/packages/@vue/cli-plugin-typescript/README.md b/packages/@vue/cli-plugin-typescript/README.md index 60d174bf9..1632d151a 100644 --- a/packages/@vue/cli-plugin-typescript/README.md +++ b/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 `/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 `/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')` diff --git a/packages/@vue/cli-plugin-typescript/index.js b/packages/@vue/cli-plugin-typescript/index.js index a1ea0726d..0451dcb9e 100644 --- a/packages/@vue/cli-plugin-typescript/index.js +++ b/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 diff --git a/packages/@vue/cli-service/lib/config/base.js b/packages/@vue/cli-service/lib/config/base.js index fe58b1593..79bcffe1a 100644 --- a/packages/@vue/cli-service/lib/config/base.js +++ b/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') diff --git a/packages/@vue/cli-shared-utils/index.js b/packages/@vue/cli-shared-utils/index.js index 700ee8a11..1da349fee 100644 --- a/packages/@vue/cli-shared-utils/index.js +++ b/packages/@vue/cli-shared-utils/index.js @@ -1,5 +1,6 @@ [ 'env', + 'cache', 'logger', 'spinner', 'validate', diff --git a/packages/@vue/cli-shared-utils/lib/cache.js b/packages/@vue/cli-shared-utils/lib/cache.js new file mode 100644 index 000000000..08177abf7 --- /dev/null +++ b/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 } +}