Несколько месяцев назад я работал над фронтенд-проектом. Проект представлял собой микроинтерфейс, который должен был быть интегрирован в устаревшую панель управления.

Причина использования микроинтерфейса заключалась в уменьшении сложности информационной панели. Меня воодушевила эта задача, и я с головой погрузился в нее.

Я настраиваю микроинтерфейс с помощью Webpack, React и Typescript. Я использовал chakra ui в качестве фреймворка CSS-IN-JS, axios для интеграции API, и все работало нормально. Однако размер сборки проекта составлял около 14 МБ. Для микрофронтенда это было смехотворно много. Это привело к очень медленному отклику страницы на информационной панели, в которую она была интегрирована. Поэтому передо мной стояла новая задача по оптимизации сборки.

Я думал, что сборка такая большая, потому что для оформления я использовал фреймворк CSS-IN-JS. Поэтому я провел рефакторинг всей кодовой базы с chakra-ui на sass. Угадайте что, размер сборки увеличился с 14мб примерно до 21мб???.

Именно тогда я понял, что проблема не в библиотеке CSS или коде, а в конфигурации веб-пакета. Я начал много проб и ошибок с конфигурацией веб-пакета. Затем я обнаружил, что когда я удалил devtool, размер сборки увеличился с 14 МБ до примерно 600 КБ. Затем я проверил документацию веб-пакета по devtool. Я понял, что это не обязательно. Дополнительная информация здесь:.

Вот краткий обзор конфигурации моего веб-пакета

module.exports = merge(common, {
  name: "client",
  mode: process.env.NODE_ENV,
  devtool: "eval-source-map", //remove devtool
  entry: {
    "microfrontend": "./src/bootstrap.tsx",
  },
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "[name]_[hash].js",
    pathinfo: false,
    publicPath: 'http://localhost:6001/',
  },
  ...
}

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

module.exports = merge(common, {
  name: "client",
  mode: process.env.NODE_ENV,
  entry: {
    "microfrontend": "./src/bootstrap.tsx",
  },
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "[name]_[hash].js",
    pathinfo: false,
    publicPath: 'http://localhost:6001/',
  },
  ...
}

Спасибо, что прочитали. Надеюсь, вы найдете это полезным.