Skip to content

Commit 0ebf756

Browse files
alan-agius4alan-agius4
committed
perf(@angular-devkit/build-angular): use CSS optimization plugin that leverages workers
With this change we use `css-minimizer-webpack-plugin` which leverages workers and also webpack cache.
1 parent 1fdd0bd commit 0ebf756

File tree

7 files changed

+42
-169
lines changed

7 files changed

+42
-169
lines changed

‎package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,6 @@
9898
"@types/cacache": "^15.0.0",
9999
"@types/caniuse-lite": "^1.0.0",
100100
"@types/copy-webpack-plugin": "^8.0.0",
101-
"@types/cssnano": "^4.0.0",
102101
"@types/debug": "^4.1.2",
103102
"@types/express": "^4.16.0",
104103
"@types/find-cache-dir": "^3.0.0",
@@ -144,7 +143,7 @@
144143
"core-js": "3.12.1",
145144
"critters": "0.0.10",
146145
"css-loader": "5.2.4",
147-
"cssnano": "5.0.2",
146+
"css-minimizer-webpack-plugin": "3.0.0",
148147
"debug": "^4.1.1",
149148
"enhanced-resolve": "5.8.2",
150149
"eslint": "7.26.0",

‎packages/angular_devkit/build_angular/BUILD.bazel‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,6 @@ ts_library(
121121
"@npm//@types/cacache",
122122
"@npm//@types/caniuse-lite",
123123
"@npm//@types/copy-webpack-plugin",
124-
"@npm//@types/cssnano",
125124
"@npm//@types/find-cache-dir",
126125
"@npm//@types/glob",
127126
"@npm//@types/inquirer",
@@ -147,7 +146,7 @@ ts_library(
147146
"@npm//core-js",
148147
"@npm//critters",
149148
"@npm//css-loader",
150-
"@npm//cssnano",
149+
"@npm//css-minimizer-webpack-plugin",
151150
"@npm//find-cache-dir",
152151
"@npm//glob",
153152
"@npm//https-proxy-agent",

‎packages/angular_devkit/build_angular/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
"core-js": "3.12.1",
3131
"critters": "0.0.10",
3232
"css-loader": "5.2.4",
33-
"cssnano": "5.0.2",
33+
"css-minimizer-webpack-plugin": "3.0.0",
3434
"find-cache-dir": "3.3.1",
3535
"glob": "7.1.7",
3636
"https-proxy-agent": "5.0.0",

‎packages/angular_devkit/build_angular/src/webpack/configs/common.ts‎

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,7 @@ import {
3636
import { findAllNodeModules } from '../../utils/find-up';
3737
import { Spinner } from '../../utils/spinner';
3838
import { addError } from '../../utils/webpack-diagnostics';
39-
import {
40-
DedupeModuleResolvePlugin,
41-
OptimizeCssWebpackPlugin,
42-
ScriptsWebpackPlugin,
43-
} from '../plugins';
39+
import { DedupeModuleResolvePlugin, ScriptsWebpackPlugin } from '../plugins';
4440
import {
4541
getEsVersionForFileName,
4642
getOutputHashFormat,
@@ -49,8 +45,6 @@ import {
4945
} from '../utils/helpers';
5046
import { IGNORE_WARNINGS } from '../utils/stats';
5147

52-
const TerserPlugin = require('terser-webpack-plugin');
53-
5448
// eslint-disable-next-line max-lines-per-function
5549
export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
5650
const { root, projectRoot, buildOptions, tsConfig } = wco;
@@ -320,20 +314,37 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
320314

321315
const extraMinimizers = [];
322316
if (stylesOptimization.minify) {
317+
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
323318
extraMinimizers.push(
324-
new OptimizeCssWebpackPlugin({
325-
sourceMap: stylesSourceMap,
319+
new CssMinimizerPlugin({
326320
// component styles retain their original file name
327-
test: (file) => /\.(?:css|scss|sass|less|styl)$/.test(file),
321+
test: /\.(?:css|scss|sass|less|styl)$/,
322+
parallel: maxWorkers,
323+
minify: [CssMinimizerPlugin.cssnanoMinify],
324+
minimizerOptions: {
325+
preset: [
326+
'default',
327+
{
328+
// Disable SVG optimizations, as this can cause optimizations which are not compatible in all browsers.
329+
svgo: false,
330+
// Disable `calc` optimizations, due to several issues. #16910, #16875, #17890
331+
calc: false,
332+
// Disable CSS rules sorted due to several issues #20693, https://github.com/ionic-team/ionic-framework/issues/23266 and https://github.com/cssnano/cssnano/issues/1054
333+
cssDeclarationSorter: false,
334+
},
335+
],
336+
},
328337
}),
329338
);
330339
}
331340

332341
if (scriptsOptimization) {
342+
const TerserPlugin = require('terser-webpack-plugin');
333343
const {
334344
GLOBAL_DEFS_FOR_TERSER,
335345
GLOBAL_DEFS_FOR_TERSER_WITH_AOT,
336346
} = require('@angular/compiler-cli');
347+
337348
const angularGlobalDefinitions = buildOptions.aot
338349
? GLOBAL_DEFS_FOR_TERSER_WITH_AOT
339350
: GLOBAL_DEFS_FOR_TERSER;

‎packages/angular_devkit/build_angular/src/webpack/plugins/index.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,6 @@
88

99
// Exports the webpack plugins we use internally.
1010
export { AnyComponentStyleBudgetChecker } from './any-component-style-budget-checker';
11-
export {
12-
OptimizeCssWebpackPlugin,
13-
OptimizeCssWebpackPluginOptions,
14-
} from './optimize-css-webpack-plugin';
1511
export { ScriptsWebpackPlugin, ScriptsWebpackPluginOptions } from './scripts-webpack-plugin';
1612
export { SuppressExtractedTextChunksWebpackPlugin } from './suppress-entry-chunks-webpack-plugin';
1713
export { RemoveHashPlugin, RemoveHashPluginOptions } from './remove-hash-plugin';

‎packages/angular_devkit/build_angular/src/webpack/plugins/optimize-css-webpack-plugin.ts‎

Lines changed: 0 additions & 136 deletions
This file was deleted.

‎yarn.lock‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -86,8 +86,7 @@
8686

8787
"@angular/dev-infra-private@https://github.com/angular/dev-infra-private-builds.git#53070e11fceeba814266e19e932531e706357cf0":
8888
version "0.0.0"
89-
uid "53070e11fceeba814266e19e932531e706357cf0"
90-
resolved "https://github.com/angular/dev-infra-private-builds.git#53070e11fceeba814266e19e932531e706357cf0"
89+
resolved "https://github.com/angular/dev-infra-private-builds.git#47233b68d11ff433e924afe2e20b5379f0f53eef"
9190
dependencies:
9291
"@angular/benchpress" "0.2.1"
9392
"@bazel/buildifier" "^4.0.1"
@@ -1564,13 +1563,6 @@
15641563
resolved "https://registry.yarnpkg.com/@types/cors/-/cors-2.8.10.tgz#61cc8469849e5bcdd0c7044122265c39cec10cf4"
15651564
integrity sha512-C7srjHiVG3Ey1nR6d511dtDkCEjxuN9W1HWAEjGq8kpcwmNM6JJkpC0xvabM7BXTG2wDq8Eu33iH9aQKa7IvLQ==
15661565

1567-
"@types/cssnano@^4.0.0":
1568-
version "4.0.0"
1569-
resolved "https://registry.yarnpkg.com/@types/cssnano/-/cssnano-4.0.0.tgz#f1bb29d6d0813861a3d87e02946b2988d0110d4e"
1570-
integrity sha512-BC/2ibKZfPIaBLBNzkitdW1IvvX/LKW6/QXGc4Su/tAJ7mQ3f2CKBuGCCKaqGAnoKwzfuC7G/recpkARwdOwuA==
1571-
dependencies:
1572-
postcss "5 - 7"
1573-
15741566
"@types/debug@^4.1.2":
15751567
version "4.1.5"
15761568
resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.5.tgz#b14efa8852b7768d898906613c23f688713e02cd"
@@ -3863,6 +3855,19 @@ css-loader@5.2.4:
38633855
schema-utils "^3.0.0"
38643856
semver "^7.3.5"
38653857

3858+
css-minimizer-webpack-plugin@3.0.0:
3859+
version "3.0.0"
3860+
resolved "https://registry.yarnpkg.com/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-3.0.0.tgz#5b1edbffe1a3e6450d8cb53fb4f4c5013b7af313"
3861+
integrity sha512-yIrqG0pPphR1RoNx2wDxYmxRf2ubRChLDXxv7ccipEm5bRKsZRYp8n+2peeXehtTF5s3yNxlqsdz3WQOsAgUkw==
3862+
dependencies:
3863+
cssnano "^5.0.0"
3864+
jest-worker "^26.3.0"
3865+
p-limit "^3.0.2"
3866+
postcss "^8.2.9"
3867+
schema-utils "^3.0.0"
3868+
serialize-javascript "^5.0.1"
3869+
source-map "^0.6.1"
3870+
38663871
css-parse@~2.0.0:
38673872
version "2.0.0"
38683873
resolved "https://registry.yarnpkg.com/css-parse/-/css-parse-2.0.0.tgz#a468ee667c16d81ccf05c58c38d2a97c780dbfd4"
@@ -3990,7 +3995,7 @@ cssnano-utils@^2.0.0:
39903995
resolved "https://registry.yarnpkg.com/cssnano-utils/-/cssnano-utils-2.0.0.tgz#b04baaa312aa3dd5a854b7f61d76b9d94be07f74"
39913996
integrity sha512-xvxmTszdrvSyTACdPe8VU5J6p4sm3egpgw54dILvNqt5eBUv6TFjACLhSxtRuEsxYrgy8uDy269YjScO5aKbGA==
39923997

3993-
cssnano@5.0.2, cssnano@^5.0.0:
3998+
cssnano@^5.0.0:
39943999
version "5.0.2"
39954000
resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-5.0.2.tgz#3f6de4fd5ecb7b5fb636c1a606de5f38cd241493"
39964001
integrity sha512-8JK3EnPsjQsULme9/e5M2hF564f/480hwsdcHvQ7ZtAIMfQ1O3SCfs+b8Mjf5KJxhYApyRshR2QSovEJi2K72Q==
@@ -6616,7 +6621,7 @@ jasminewd2@^2.1.0:
66166621
resolved "https://registry.yarnpkg.com/jasminewd2/-/jasminewd2-2.2.0.tgz#e37cf0b17f199cce23bea71b2039395246b4ec4e"
66176622
integrity sha1-43zwsX8ZnM4jvqcbIDk5Uka07E4=
66186623

6619-
jest-worker@26.6.2, jest-worker@^26.5.0, jest-worker@^26.6.2:
6624+
jest-worker@26.6.2, jest-worker@^26.3.0, jest-worker@^26.5.0, jest-worker@^26.6.2:
66206625
version "26.6.2"
66216626
resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.6.2.tgz#7f72cbc4d643c365e27b9fd775f9d0eaa9c7a8ed"
66226627
integrity sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==
@@ -9304,7 +9309,7 @@ postcss-values-parser@^2.0.0, postcss-values-parser@^2.0.1:
93049309
indexes-of "^1.0.1"
93059310
uniq "^1.0.1"
93069311

9307-
"postcss@5 - 7", postcss@7.x.x, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.32, postcss@^7.0.35, postcss@^7.0.5, postcss@^7.0.6:
9312+
postcss@7.x.x, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.32, postcss@^7.0.35, postcss@^7.0.5, postcss@^7.0.6:
93089313
version "7.0.35"
93099314
resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.35.tgz#d2be00b998f7f211d8a276974079f2e92b970e24"
93109315
integrity sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==
@@ -9313,7 +9318,7 @@ postcss-values-parser@^2.0.0, postcss-values-parser@^2.0.1:
93139318
source-map "^0.6.1"
93149319
supports-color "^6.1.0"
93159320

9316-
postcss@8.2.15, postcss@^8.2.10, postcss@^8.2.4:
9321+
postcss@8.2.15, postcss@^8.2.10, postcss@^8.2.4, postcss@^8.2.9:
93179322
version "8.2.15"
93189323
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.15.tgz#9e66ccf07292817d226fc315cbbf9bc148fbca65"
93199324
integrity sha512-2zO3b26eJD/8rb106Qu2o7Qgg52ND5HPjcyQiK2B98O388h43A448LCslC0dI2P97wCAQRJsFvwTRcXxTKds+Q==
@@ -10167,7 +10172,6 @@ sass@1.32.13, sass@^1.32.8:
1016710172

1016810173
"sauce-connect-proxy@https://saucelabs.com/downloads/sc-4.6.4-linux.tar.gz":
1016910174
version "0.0.0"
10170-
uid "992e2cb0d91e54b27a4f5bbd2049f3b774718115"
1017110175
resolved "https://saucelabs.com/downloads/sc-4.6.4-linux.tar.gz#992e2cb0d91e54b27a4f5bbd2049f3b774718115"
1017210176

1017310177
saucelabs@^1.5.0:

0 commit comments

Comments
 (0)