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