From 75e81734b4e204b779f86a819f6ccfac177a979a Mon Sep 17 00:00:00 2001 From: screetBloom <15306225869@163.com> Date: Thu, 14 Oct 2021 13:40:02 +0800 Subject: [PATCH 01/10] feat: Support for custom minify --- .../cli-service/lib/config/terserOptions.js | 141 +++++++++++++----- packages/@vue/cli-service/lib/options.js | 6 + 2 files changed, 111 insertions(+), 36 deletions(-) diff --git a/packages/@vue/cli-service/lib/config/terserOptions.js b/packages/@vue/cli-service/lib/config/terserOptions.js index e08948cee9..4c2c87f878 100644 --- a/packages/@vue/cli-service/lib/config/terserOptions.js +++ b/packages/@vue/cli-service/lib/config/terserOptions.js @@ -1,40 +1,109 @@ -module.exports = options => ({ - terserOptions: { - compress: { - // turn off flags with small gains to speed up minification - arrows: false, - collapse_vars: false, // 0.3kb - comparisons: false, - computed_props: false, - hoist_funs: false, - hoist_props: false, - hoist_vars: false, - inline: false, - loops: false, - negate_iife: false, - properties: false, - reduce_funcs: false, - reduce_vars: false, - switches: false, - toplevel: false, - typeofs: false, - - // a few flags with noticeable gains/speed ratio - // numbers based on out of the box vendor bundle - booleans: true, // 0.7kb - if_return: true, // 0.4kb - sequences: true, // 0.7kb - unused: true, // 2.3kb - - // required features to drop conditional branches - conditionals: true, - dead_code: true, - evaluate: true +// @ts-check +const TerserPlugin = require('terser-webpack-plugin') + +const genTerserOptions = (defaultOptions, options) => { + const userOptions = options.terser && options.terser.terserOptions + // user's config is first + return { + ...defaultOptions, + ...userOptions + } +} + +const terserMinify = (options) => ({ + terserOptions: genTerserOptions( + { + compress: { + // turn off flags with small gains to speed up minification + arrows: false, + collapse_vars: false, // 0.3kb + comparisons: false, + computed_props: false, + hoist_funs: false, + hoist_props: false, + hoist_vars: false, + inline: false, + loops: false, + negate_iife: false, + properties: false, + reduce_funcs: false, + reduce_vars: false, + switches: false, + toplevel: false, + typeofs: false, + + // a few flags with noticeable gains/speed ratio + // numbers based on out of the box vendor bundle + booleans: true, // 0.7kb + if_return: true, // 0.4kb + sequences: true, // 0.7kb + unused: true, // 2.3kb + + // required features to drop conditional branches + conditionals: true, + dead_code: true, + evaluate: true + }, + mangle: { + safari10: true + } }, - mangle: { - safari10: true - } - }, + options + ), parallel: options.parallel, extractComments: false }) + +// `terserOptions` options will be passed to `esbuild` +// Link to options - https://esbuild.github.io/api/#minify +const esbuildMinify = (options) => ({ + minify: TerserPlugin.esbuildMinify, + terserOptions: genTerserOptions( + { + minify: false, + minifyWhitespace: true, + minifyIdentifiers: false, + minifySyntax: true + }, + options + ), + parallel: options.parallel +}) + +// `terserOptions` options will be passed to `swc` (`@swc/core`) +// Link to options - https://swc.rs/docs/config-js-minify +const swcMinify = (options) => ({ + minify: TerserPlugin.swcMinify, + terserOptions: genTerserOptions( + { + compress: { + unused: true + }, + mangle: true + }, + options + ), + parallel: options.parallel +}) + +// `terserOptions` options will be passed to `uglify-js` +// Link to options - https://github.com/mishoo/UglifyJS#minify-options +const uglifyJsMinify = (options) => ({ + minify: TerserPlugin.uglifyJsMinify, + terserOptions: genTerserOptions({}, options) +}) + +// Currently we do not allow custom minify function +const getMinify = (options) => { + const { minify = 'default' } = options.terser || {} + + const minifyMap = { + default: terserMinify, + esbuild: esbuildMinify, + swc: swcMinify, + uglifyJs: uglifyJsMinify + } + return minifyMap[minify](options) +} + +module.exports = getMinify diff --git a/packages/@vue/cli-service/lib/options.js b/packages/@vue/cli-service/lib/options.js index 232192c3e6..3cf5ddb95e 100644 --- a/packages/@vue/cli-service/lib/options.js +++ b/packages/@vue/cli-service/lib/options.js @@ -59,6 +59,12 @@ const schema = createSchema(joi => joi.object({ lintOnSave: joi.any().valid(true, false, 'error', 'warning', 'default'), pwa: joi.object(), + // terser + terser: joi.object({ + minify: joi.string().valid('default', 'esbuild', 'swc', 'uglifyJs'), + terserOptions: joi.object() + }), + // 3rd party plugin options pluginOptions: joi.object() })) From 15affa91267fcba860b2b4b2e32bb78a18898119 Mon Sep 17 00:00:00 2001 From: screetBloom <15306225869@163.com> Date: Thu, 14 Oct 2021 13:40:40 +0800 Subject: [PATCH 02/10] feat: add prettier --- .prettierrc | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 .prettierrc diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000000..436791d2f6 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,8 @@ +{ + "tabWidth": 2, + "printWidth": 100, + "useTabs": false, + "semi": false, + "singleQuote": true, + "trailingComma": "none" +} From 612ee86a13eee59501ba69c52fdb38d6555f4b74 Mon Sep 17 00:00:00 2001 From: screetBloom <15306225869@163.com> Date: Thu, 14 Oct 2021 13:56:20 +0800 Subject: [PATCH 03/10] feat: add ts declaration for terser options --- .../cli-service/types/ProjectOptions.d.ts | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/packages/@vue/cli-service/types/ProjectOptions.d.ts b/packages/@vue/cli-service/types/ProjectOptions.d.ts index 4ea5b1fe38..f63e0f8944 100644 --- a/packages/@vue/cli-service/types/ProjectOptions.d.ts +++ b/packages/@vue/cli-service/types/ProjectOptions.d.ts @@ -1,6 +1,12 @@ import ChainableWebpackConfig = require('webpack-chain') import { Configuration as WebpackOptions } from 'webpack' +type InferDefaultType = T extends infer U + ? U + : { + [key: string]: any + } + type PageEntry = string | string[]; interface PageConfig { @@ -153,6 +159,29 @@ interface ProjectOptions { */ pwa?: object; + /** + * set terser-webpack-plugin minify and terserOptions + */ + terser?: { + /** + * 'default' use [terserMinify](https://github.com/webpack-contrib/terser-webpack-plugin#minify), 'esbuild' is [esbuildMinify](https://github.com/webpack-contrib/terser-webpack-plugin#esbuild), and so on + * currently we do not allow custom minify function + */ + minify: 'default' | 'esbuild' | 'swc' | 'uglifyJs'; + /** + * `terserOptions` options will be passed to minify + * + * [All options for `terser`](https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions) + * + * [All options for `esbuild`](https://esbuild.github.io/api/#minify) + * + * [All options for `swc`](https://swc.rs/docs/config-js-minify) + * + * [All options for `uglifyJs`](https://github.com/mishoo/UglifyJS#minify-options) + */ + terserOptions?: InferDefaultType; + }; + /** * This is an object that doesn't go through any schema validation, so it can be used to pass arbitrary options to 3rd party plugins */ From 142000659368ff424b8e53079cf52c0215435e20 Mon Sep 17 00:00:00 2001 From: screetBloom <15306225869@163.com> Date: Thu, 14 Oct 2021 14:38:17 +0800 Subject: [PATCH 04/10] feat: Modify the style of intellisense --- packages/@vue/cli-service/types/ProjectOptions.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/@vue/cli-service/types/ProjectOptions.d.ts b/packages/@vue/cli-service/types/ProjectOptions.d.ts index f63e0f8944..e09bd7fb1a 100644 --- a/packages/@vue/cli-service/types/ProjectOptions.d.ts +++ b/packages/@vue/cli-service/types/ProjectOptions.d.ts @@ -165,6 +165,7 @@ interface ProjectOptions { terser?: { /** * 'default' use [terserMinify](https://github.com/webpack-contrib/terser-webpack-plugin#minify), 'esbuild' is [esbuildMinify](https://github.com/webpack-contrib/terser-webpack-plugin#esbuild), and so on + * * currently we do not allow custom minify function */ minify: 'default' | 'esbuild' | 'swc' | 'uglifyJs'; From 2244a8a97807818749e9706190a02a347a5f1fb7 Mon Sep 17 00:00:00 2001 From: screetBloom <15306225869@163.com> Date: Fri, 15 Oct 2021 00:11:07 +0800 Subject: [PATCH 05/10] feat: Optimize intellisense --- packages/@vue/cli-service/types/ProjectOptions.d.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/@vue/cli-service/types/ProjectOptions.d.ts b/packages/@vue/cli-service/types/ProjectOptions.d.ts index e09bd7fb1a..b71f9e3912 100644 --- a/packages/@vue/cli-service/types/ProjectOptions.d.ts +++ b/packages/@vue/cli-service/types/ProjectOptions.d.ts @@ -164,9 +164,10 @@ interface ProjectOptions { */ terser?: { /** - * 'default' use [terserMinify](https://github.com/webpack-contrib/terser-webpack-plugin#minify), 'esbuild' is [esbuildMinify](https://github.com/webpack-contrib/terser-webpack-plugin#esbuild), and so on + * Supported minify: [default(terser)](https://github.com/webpack-contrib/terser-webpack-plugin#minify), [esbuild](https://github.com/webpack-contrib/terser-webpack-plugin#esbuild), [swc](https://github.com/webpack-contrib/terser-webpack-plugin#swc), [uglifyJs](https://github.com/webpack-contrib/terser-webpack-plugin#uglify-js). currently we do not allow custom minify function + * + * In the non-default case, you should install the corresponding package (eg. `npm install esbuild`) * - * currently we do not allow custom minify function */ minify: 'default' | 'esbuild' | 'swc' | 'uglifyJs'; /** From 7a59a20dd1100f5f70ca5513ff7aca17f92c3e2c Mon Sep 17 00:00:00 2001 From: screetBloom <15306225869@163.com> Date: Fri, 15 Oct 2021 00:48:02 +0800 Subject: [PATCH 06/10] feat: Optimize intellisense --- packages/@vue/cli-service/types/ProjectOptions.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/@vue/cli-service/types/ProjectOptions.d.ts b/packages/@vue/cli-service/types/ProjectOptions.d.ts index b71f9e3912..b3b8a476a4 100644 --- a/packages/@vue/cli-service/types/ProjectOptions.d.ts +++ b/packages/@vue/cli-service/types/ProjectOptions.d.ts @@ -166,7 +166,7 @@ interface ProjectOptions { /** * Supported minify: [default(terser)](https://github.com/webpack-contrib/terser-webpack-plugin#minify), [esbuild](https://github.com/webpack-contrib/terser-webpack-plugin#esbuild), [swc](https://github.com/webpack-contrib/terser-webpack-plugin#swc), [uglifyJs](https://github.com/webpack-contrib/terser-webpack-plugin#uglify-js). currently we do not allow custom minify function * - * In the non-default case, you should install the corresponding package (eg. `npm install esbuild`) + * In the non-default case, you should install the corresponding package (eg. `npm i esbuild -D`) * */ minify: 'default' | 'esbuild' | 'swc' | 'uglifyJs'; @@ -175,7 +175,7 @@ interface ProjectOptions { * * [All options for `terser`](https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions) * - * [All options for `esbuild`](https://esbuild.github.io/api/#minify) + * [All options for `esbuild`](https://github.com/evanw/esbuild/blob/master/lib/shared/types.ts#L160-L174) * * [All options for `swc`](https://swc.rs/docs/config-js-minify) * From 7f9088c4b4f2194ab8b7ec0e1908b7c396acfa7a Mon Sep 17 00:00:00 2001 From: screetBloom <15306225869@163.com> Date: Fri, 15 Oct 2021 10:23:07 +0800 Subject: [PATCH 07/10] feat: add parallel option to uglifyJsMinify --- packages/@vue/cli-service/lib/config/terserOptions.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/@vue/cli-service/lib/config/terserOptions.js b/packages/@vue/cli-service/lib/config/terserOptions.js index 4c2c87f878..0ff72cb0cd 100644 --- a/packages/@vue/cli-service/lib/config/terserOptions.js +++ b/packages/@vue/cli-service/lib/config/terserOptions.js @@ -90,7 +90,8 @@ const swcMinify = (options) => ({ // Link to options - https://github.com/mishoo/UglifyJS#minify-options const uglifyJsMinify = (options) => ({ minify: TerserPlugin.uglifyJsMinify, - terserOptions: genTerserOptions({}, options) + terserOptions: genTerserOptions({}, options), + parallel: options.parallel }) // Currently we do not allow custom minify function From 7a2d8e560bfe613196a91f957d8ea180216485f9 Mon Sep 17 00:00:00 2001 From: screetBloom <15306225869@163.com> Date: Mon, 18 Oct 2021 13:49:41 +0800 Subject: [PATCH 08/10] feat: update terser type --- packages/@vue/cli-service/types/ProjectOptions.d.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/@vue/cli-service/types/ProjectOptions.d.ts b/packages/@vue/cli-service/types/ProjectOptions.d.ts index b3b8a476a4..12fc1ed2a7 100644 --- a/packages/@vue/cli-service/types/ProjectOptions.d.ts +++ b/packages/@vue/cli-service/types/ProjectOptions.d.ts @@ -1,11 +1,7 @@ import ChainableWebpackConfig = require('webpack-chain') import { Configuration as WebpackOptions } from 'webpack' -type InferDefaultType = T extends infer U - ? U - : { - [key: string]: any - } +type PredefinedOptions = T & { [key: string]: any } type PageEntry = string | string[]; @@ -181,7 +177,7 @@ interface ProjectOptions { * * [All options for `uglifyJs`](https://github.com/mishoo/UglifyJS#minify-options) */ - terserOptions?: InferDefaultType; + terserOptions?: PredefinedOptions; }; /** From 283e7ca6624e4333e7913ea7c707b5c0377b5f54 Mon Sep 17 00:00:00 2001 From: screetBloom <15306225869@163.com> Date: Thu, 21 Oct 2021 16:48:19 +0800 Subject: [PATCH 09/10] feat: remove prettier file --- .prettierrc | 8 -------- 1 file changed, 8 deletions(-) delete mode 100644 .prettierrc diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index 436791d2f6..0000000000 --- a/.prettierrc +++ /dev/null @@ -1,8 +0,0 @@ -{ - "tabWidth": 2, - "printWidth": 100, - "useTabs": false, - "semi": false, - "singleQuote": true, - "trailingComma": "none" -} From e4c05974439938499a7c14641ca52d28eac35350 Mon Sep 17 00:00:00 2001 From: screetBloom <15306225869@163.com> Date: Fri, 22 Oct 2021 15:47:39 +0800 Subject: [PATCH 10/10] feat: use terser option --- packages/@vue/cli-service/lib/config/terserOptions.js | 4 ++-- packages/@vue/cli-service/lib/options.js | 2 +- packages/@vue/cli-service/types/ProjectOptions.d.ts | 6 +++--- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/@vue/cli-service/lib/config/terserOptions.js b/packages/@vue/cli-service/lib/config/terserOptions.js index 0ff72cb0cd..05387a5ba2 100644 --- a/packages/@vue/cli-service/lib/config/terserOptions.js +++ b/packages/@vue/cli-service/lib/config/terserOptions.js @@ -96,10 +96,10 @@ const uglifyJsMinify = (options) => ({ // Currently we do not allow custom minify function const getMinify = (options) => { - const { minify = 'default' } = options.terser || {} + const { minify = 'terser' } = options.terser || {} const minifyMap = { - default: terserMinify, + terser: terserMinify, esbuild: esbuildMinify, swc: swcMinify, uglifyJs: uglifyJsMinify diff --git a/packages/@vue/cli-service/lib/options.js b/packages/@vue/cli-service/lib/options.js index 3cf5ddb95e..f410504e36 100644 --- a/packages/@vue/cli-service/lib/options.js +++ b/packages/@vue/cli-service/lib/options.js @@ -61,7 +61,7 @@ const schema = createSchema(joi => joi.object({ // terser terser: joi.object({ - minify: joi.string().valid('default', 'esbuild', 'swc', 'uglifyJs'), + minify: joi.string().valid('terser', 'esbuild', 'swc', 'uglifyJs'), terserOptions: joi.object() }), diff --git a/packages/@vue/cli-service/types/ProjectOptions.d.ts b/packages/@vue/cli-service/types/ProjectOptions.d.ts index 12fc1ed2a7..8dc81eaf8b 100644 --- a/packages/@vue/cli-service/types/ProjectOptions.d.ts +++ b/packages/@vue/cli-service/types/ProjectOptions.d.ts @@ -160,12 +160,12 @@ interface ProjectOptions { */ terser?: { /** - * Supported minify: [default(terser)](https://github.com/webpack-contrib/terser-webpack-plugin#minify), [esbuild](https://github.com/webpack-contrib/terser-webpack-plugin#esbuild), [swc](https://github.com/webpack-contrib/terser-webpack-plugin#swc), [uglifyJs](https://github.com/webpack-contrib/terser-webpack-plugin#uglify-js). currently we do not allow custom minify function + * Supported minify: [terser](https://github.com/webpack-contrib/terser-webpack-plugin#minify), [esbuild](https://github.com/webpack-contrib/terser-webpack-plugin#esbuild), [swc](https://github.com/webpack-contrib/terser-webpack-plugin#swc), [uglifyJs](https://github.com/webpack-contrib/terser-webpack-plugin#uglify-js). currently we do not allow custom minify function * - * In the non-default case, you should install the corresponding package (eg. `npm i esbuild -D`) + * In the non-terser case, you should install the corresponding package (eg. `npm i esbuild -D`) * */ - minify: 'default' | 'esbuild' | 'swc' | 'uglifyJs'; + minify: 'terser' | 'esbuild' | 'swc' | 'uglifyJs'; /** * `terserOptions` options will be passed to minify *