Skip to content

[Feature]: Сборка без преобразований #4061

@SevereCloud

Description

@SevereCloud

Описание

Добавляем новый вид JS сборки, без преобразований. Позволит использовать css модули, что уменьшит конечный размер бандла

Задачи


Инструкции

  1. Удалить импорт 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" },
      ]
    })
  ]
};

Metadata

Metadata

Assignees

Type

Projects

Status

✅ Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions