-
Notifications
You must be signed in to change notification settings - Fork 198
[Feature]: Сборка без преобразований #4061
Copy link
Copy link
Description
Описание
Добавляем новый вид JS сборки, без преобразований. Позволит использовать css модули, что уменьшит конечный размер бандла
Задачи
- Избавиться от
src/styles/components.css#4062 - Написать плагин для css modules под swc #4074
- Написать плагин swc-plugin-transform-remove-imports #4115
- [Epic][v5][CSS Modules] Заменить динамические вычисления свойств на мапы #3415
- Перейти на SWC #4080
- [Feature] Собирать ES вариант #1676
- [Breaking changes] Модульный CSS #2349
- Написать инструкцию подключения новой сборки
Инструкции
- Удалить импорт css и подключить дефолтные темы
- import "@vkontakte/vkui/dist/vkui.css";
+ import "@vkontakte/vkui/dist/cssm/styles/themes.css";Дальше необходимо трансформировать импорт и включить транспиляцию для vkui
Next.js
// next.config.js
module.exports = {
// ...
transpilePackages: ["@vkontakte/vkui"],
modularizeImports: {
"@vkontakte/vkui": {
transform: "@vkontakte/vkui/dist/cssm",
skipDefaultConversion: true,
},
},
}webpack
- транспиляция
// webpack.config.js
module.exports = {
//...
resolve: {
alias: {
"@vkontakte/vkui$": "@vkontakte/vkui/dist/cssm",
},
},
};Vite
- транспиляция
// vite.config.js
export default defineConfig({
// ...
resolve: {
alias: [
{ find: /^@vkontakte\/vkui$/, replacement: "@vkontakte/vkui/dist/cssm" },
],
},
});rollup
Требуется установить плагин @rollup/plugin-alias
npm i -D @rollup/plugin-alias
# or
yarn add -D @rollup/plugin-alias
# or
pnpm i -D @rollup/plugin-alias- транспиляция
// rollup.config.js
import alias from '@rollup/plugin-alias';
module.exports = {
// ...
plugins: [
alias({
entries: [
{ find: /^@vkontakte\/vkui$/, replacement: "@vkontakte/vkui/dist/cssm" },
]
})
]
};Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
Type
Projects
Status
✅ Done