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

~1 минута

Статья написана студентом Хекслета. Мнение автора может не совпадать с позицией редакции

Как ускорить подключение стилей при использовании 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-файла, что плохо, очень плохо

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

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 спустя секунду после загрузки страницы. Тоже неприятно, но уж лучше пусть долго грузится иконка, чем стили всего сайта.

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

Шахзод Давлатов 18 февраля 2022