При попытке дальнейшей оптимизации скорости страниц моего веб-приложения я пытался заставить модуль очистки CSS правильно работать с Nuxt. js - и заставить его работать в среде разработчика.
purge CSS имеет проблемы с определением, какая часть начальной загрузки / - vue css фактически используется, поэтому я решил просто импортировать части bootstrap, которые мне нужны, и позволить purge CSS игнорировать его , В итоге это выглядело так:
/* css/custom.scss */
/* purgecss start ignore */
$font-family-sans-serif: "Fauna One", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-monospace: "Fauna One", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$theme-colors: (
"primary": #E40C2B,
"secondary": #1d1d2c,
"success": #438945
);
@import 'bootstrap/scss/_functions.scss';
@import 'bootstrap/scss/_variables.scss';
@import 'bootstrap/scss/_mixins.scss';
@import 'bootstrap/scss/_buttons.scss';
@import 'bootstrap/scss/_card.scss';
@import 'bootstrap/scss/_carousel.scss';
/* The list goes on */
@import 'bootstrap-vue/src/index.scss';
/* purgecss end ignore */
Обратите внимание на /* purgecss start/end ignore/*
-комментарии.
Кроме того, я настроил конфигурацию очистки CSS в моем nuxt.config. js файл, подобный следующему:
// nuxt.config.js
purgeCSS: {
paths: [
'components/*.vue',
'layouts/*.vue',
'pages/*.vue',
'plugins/*.js',
'css/*.scss',
'css/*.css'
],
styleExtensions: ['.scss'],
fontFace: true,
kayframes: true,
variables: true,
whitelist: ['mq-editable-field', 'mq-math-mode', 'mqInput'],
whitelistPatterns: [/mq*/]
}
Это работает как очарование в среде локального разработчика, однако разбивает сайт, исключая все bootstrap стили в окончательной сборке (производство).
Я предполагаю, что это как-то связано с тем, что файл css/custom.scss
назван по-другому в финальной сборке и, следовательно, каким-то образом исключен.
Был бы очень рад, если у кого-то возникла идея как сделать эту работу и в производстве.
Заранее спасибо!