Как ускорить подключение стилей при использовании Webpack

Недавно я завершил работу над одним своим проектом (GitHub), но всё же не устранил одну проблему: стили Bootstrap подключались слишком долго, что приводило к тому, что сперва открывается сайт без стилей, а через секунду всё выглядит нормально. Крайне неприятный момент, который я всё же решил исправить и пошёл искать решение в интернете. В данном посте я расскажу о том, как я подключал стили изначально, и о том, как решил вопрос с CSS.

Содержание

• Как я подключал стили
• Как я подключил стили
• Итог

Как я подключал стили

У меня был файл style.scss, в который я импортировал нужные мне компоненты Bootstrap. Этот файл я импортировал в JavaScript файл, используя Webpack со следующими настройками:

//index.js
import '../style.scss';

//webpack.config.js
{
  test: /\.scss$/,
  use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
},

Всё стандартно, подобную настройку вы можете найти в каждом втором туториале по Webpack.

А так выглядит html после сборки:

<script defer="" src="main.bundle.js"></script>
<style>/*Много строк со стилями*/</style>
<style>/*Много строк со стилями*/</style>

Получается так, что стили добавляются после обработки js-файла, что плохо, очень плохо

10 месяцев·С нуля

Фронтенд-разработчик

Изучите HTML, CSS, JavaScript и React

от 5 950 ₽

Посмотреть →

5 месяцев·С нуля

Профессиональная верстка

Адаптивная вёрстка для отображения на любых устройствах

от 3 900 ₽

Посмотреть →

2 месяца·Для продвинутых

Bootstrap

Изучите навык для работы с Bootstrap 5, SASS и Gulp для быстрой вёрстки

от 3 900 ₽

Посмотреть →

1 месяц·Для продвинутых

SASS

Освоите препроцессор SASS и стилизацию веб-приложений

от 3 900 ₽

Посмотреть →

1 месяц·Для продвинутых

Позиционирование в CSS

Получите навык работы с CSS и адаптивными интерфейсами

от 3 900 ₽

Посмотреть →

Каталог

Полный список доступных курсов по разным направлениям

Как я подключил стили

mini-css-extract-plugin — модуль, решивший мою проблему.

Используется он следующим образом:

//webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

plugins: [new MiniCssExtractPlugin(),],
//редактируем правило для подлючения стилей
{
  test: /\.scss$/,
  use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'],
},

Что это нам даёт? Теперь Webpack создаёт CSS-файл и подключает его к HTML, который после сборки будет выглядеть так:

<script defer="" src="main.bundle.js"></script>
<link href="main.css" rel="stylesheet">

Итог

Теперь стили загружаются сразу, что на моем проекте можно увидеть наглядно, посмотрев на кнопку загрузки файлов. У неё есть иконка, которая появляется с помощью JavaScript спустя секунду после загрузки страницы. Тоже неприятно, но уж лучше пусть долго грузится иконка, чем стили всего сайта.

На этом у меня всё, надеюсь данный пост поможет вам сэкономить время, если вы столкнётесь с подобной проблемой.