diff --git a/package.json b/package.json index 8acdb90cc1..1266910d63 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "concurrently": "^8.2.2", "cross-env": "^7.0.3", "css-loader": "^6.10.0", + "css-minimizer-webpack-plugin": "^7.0.0", "cssnano": "^7.0.2", "dotenv": "^16.4.5", "eslint": "^8.56.0", diff --git a/packages/vkui/scripts/postcss.js b/packages/vkui/scripts/postcss.js index b3b278488f..1d5089fc61 100644 --- a/packages/vkui/scripts/postcss.js +++ b/packages/vkui/scripts/postcss.js @@ -12,6 +12,24 @@ const { VKUI_PACKAGE, VKUI_TOKENS_CSS, generateScopedName } = require('../../../ const rootDirectory = path.join(__dirname, '../../..'); +function getMinimizerOptions(isVKUIPackageBuild = false) { + return { + preset: [ + 'default', + { + // Отключаем из-за того, что `postcss-calc` меняет порядок операндов при умножении -1 на переменную + // Подробности здесь https://github.com/VKCOM/VKUI/issues/2963 + calc: false, + // Включаем если собираем пакет @vkontakte/vkui. + // В остальных кейсах пустые CSS блоки удаляются раньше, чем их обработает + // `css-loader` с настройками для CSS Modules. + // Подробности здесь https://github.com/webpack-contrib/css-loader/issues/266 + discardEmpty: isVKUIPackageBuild, + }, + ], + }; +} + /** * Конфигурация postcss плагинов * @param {Object} config - Конфигурация. @@ -19,6 +37,7 @@ const rootDirectory = path.join(__dirname, '../../..'); * @param {boolean | undefined} config.isProduction - Продакшн сборка. * @param {boolean | undefined} config.isCssModulesFile - Сборка module.css файлов. * @param {boolean | undefined} config.isESNext - Отдельная сборка cssm. + * @param {boolean | undefined} config.disableMinimizer - Отключает cssnano. * @returns {import('postcss').Plugin[]} */ function makePostcssPlugins({ @@ -27,6 +46,7 @@ function makePostcssPlugins({ isCssModulesFile = false, isESNext = false, isStorybook = process.env.SANDBOX === '.storybook', + disableMinimizer = false, } = {}) { const plugins = [ // Обработка css импортов @@ -78,29 +98,14 @@ function makePostcssPlugins({ } // Уменьшение размера для продакшен сборки - if (isProduction && !isESNext) { - plugins.push( - cssnano({ - preset: [ - 'default', - { - // Отключаем из-за того, что `postcss-calc` меняет порядок операндов при умножении -1 на переменную - // Подробности здесь https://github.com/VKCOM/VKUI/issues/2963 - calc: false, - // Включаем если собираем пакет @vkontakte/vkui. - // В остальных кейсах пустые CSS блоки удаляются раньше, чем их обработает - // `css-loader` с настройками для CSS Modules. - // Подробности здесь https://github.com/webpack-contrib/css-loader/issues/266 - discardEmpty: isVKUIPackageBuild, - }, - ], - }), - ); + if (!disableMinimizer && isProduction && !isESNext) { + plugins.push(cssnano(getMinimizerOptions(isVKUIPackageBuild))); } return plugins; } module.exports = { + getMinimizerOptions, makePostcssPlugins, }; diff --git a/packages/vkui/webpack.styles.config.js b/packages/vkui/webpack.styles.config.js index 03c0d5cc77..a73d219763 100644 --- a/packages/vkui/webpack.styles.config.js +++ b/packages/vkui/webpack.styles.config.js @@ -1,6 +1,7 @@ const path = require('path'); +const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const { makePostcssPlugins } = require('./scripts/postcss'); +const { getMinimizerOptions, makePostcssPlugins } = require('./scripts/postcss'); /** * Конфигурация для css @@ -27,11 +28,11 @@ function makeCssRuleUse({ isCssModulesFile = false } = {}) { ]; } +/** @type {import('webpack').Configuration} */ module.exports = { - // CSS is optimized via postcss, we dont care about JS - mode: 'none', + mode: 'production', entry: { - stable: ['./src/styles/themes.css', './src/index.ts'], + vkui: ['./src/styles/themes.css', './src/index.ts'], components: './src/index.ts', }, output: { @@ -41,6 +42,7 @@ module.exports = { module: { rules: [ { + sideEffects: true, test: /\.[jt]sx?$/, exclude: /node_modules/, loader: 'swc-loader', @@ -71,17 +73,8 @@ module.exports = { ], }, optimization: { - splitChunks: { - chunks: (chunk) => ['stable'].includes(chunk.name), - cacheGroups: { - // capture all common deps - vkui: { - name: 'vkui', - test: (module, { chunkGraph }) => - chunkGraph.getModuleChunks(module).some((chunk) => chunk.name === 'stable'), - }, - }, - }, + minimize: true, + minimizer: ['...', new CssMinimizerPlugin({ minimizerOptions: getMinimizerOptions(true) })], }, resolve: { extensions: ['.ts', '.tsx', '.js'], diff --git a/yarn.lock b/yarn.lock index 497cfb39ef..65f28cdf64 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5336,6 +5336,7 @@ __metadata: concurrently: ^8.2.2 cross-env: ^7.0.3 css-loader: ^6.10.0 + css-minimizer-webpack-plugin: ^7.0.0 cssnano: ^7.0.2 dotenv: ^16.4.5 eslint: ^8.56.0