diff --git a/package.json b/package.json index 42446163ff..6f9d874bca 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "concurrently": "^8.2.2", "cross-env": "^7.0.2", "css-loader": "^6.8.1", + "css-minimizer-webpack-plugin": "^5.0.1", "cssnano": "^6.0.1", "dotenv": "^16.3.1", "eslint": "^8.45.0", diff --git a/packages/vkui/scripts/postcss.js b/packages/vkui/scripts/postcss.js index 89953afe86..f97d829dfa 100644 --- a/packages/vkui/scripts/postcss.js +++ b/packages/vkui/scripts/postcss.js @@ -11,6 +11,19 @@ const { VKUI_PACKAGE, VKUI_TOKENS_CSS, generateScopedName } = require('../../../ const rootDirectory = path.join(__dirname, '../../..'); +function getMinimizerOptions(isVKUIPackageBuild = false) { + return { + // Отключаем из-за того, что `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 - Конфигурация. @@ -18,6 +31,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({ @@ -25,6 +39,7 @@ function makePostcssPlugins({ isProduction = process.env.NODE_ENV === 'production', isCssModulesFile = false, isESNext = false, + disableMinimizer = false, } = {}) { const plugins = [ // Обработка css импортов @@ -72,22 +87,10 @@ function makePostcssPlugins({ } // Уменьшение размера для продакшен сборки - if (isProduction && !isESNext) { + if (!disableMinimizer && 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, - }, - ], + preset: ['default', getMinimizerOptions(isVKUIPackageBuild)], }), ); } @@ -96,5 +99,6 @@ function makePostcssPlugins({ } module.exports = { + getMinimizerOptions, makePostcssPlugins, }; diff --git a/packages/vkui/webpack.styles.config.js b/packages/vkui/webpack.styles.config.js index 03c0d5cc77..deb8ae8b86 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 @@ -20,18 +21,22 @@ function makeCssRuleUse({ isCssModulesFile = false } = {}) { loader: 'postcss-loader', options: { postcssOptions: { - plugins: makePostcssPlugins({ isVKUIPackageBuild: true, isCssModulesFile }), + plugins: makePostcssPlugins({ + isVKUIPackageBuild: true, + isCssModulesFile, + disableMinimizer: true, + }), }, }, }, ]; } +/** @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 +46,7 @@ module.exports = { module: { rules: [ { + sideEffects: true, test: /\.[jt]sx?$/, exclude: /node_modules/, loader: 'swc-loader', @@ -70,22 +76,20 @@ 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'), - }, - }, - }, - }, resolve: { extensions: ['.ts', '.tsx', '.js'], }, + optimization: { + minimize: true, + minimizer: [ + '...', + new CssMinimizerPlugin({ + minimizerOptions: { + preset: ['default', getMinimizerOptions(true)], + }, + }), + ], + }, devtool: 'source-map', plugins: [new MiniCssExtractPlugin({ filename: '[name].css' })], stats: { diff --git a/yarn.lock b/yarn.lock index ae30ef6f52..78cf055fe6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5508,6 +5508,7 @@ __metadata: concurrently: ^8.2.2 cross-env: ^7.0.2 css-loader: ^6.8.1 + css-minimizer-webpack-plugin: ^5.0.1 cssnano: ^6.0.1 dotenv: ^16.3.1 eslint: ^8.45.0