/
Блог
/
Дневник студента
/

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

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

18 февраля 2022 г.
1 минута
3

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

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

Шахзод Давлатов

4 года назад

3