Как частично загрузить файлы Sass / stylesheet в веб-приложение Vue / Webpack с разделением кода - PullRequest
Новая
       18

Как частично загрузить файлы Sass / stylesheet в веб-приложение Vue / Webpack с разделением кода

0 голосов
/ 26 января 2019

Я использую методы разделения кода для веб-приложения, созданного с помощью Vue 2 и Webpack 3. Чанки JS работают хорошо в асинхронном режиме, что дает мне хороший результат в аудитах производительности Lighthouse.

Открывая вкладку «Покрытие» в DevTools, я вижу, что около 99% моих стилей CSS не используются при первой содержательной краске (т.е. при загрузке первой страницы).Причина этого проста: мой файл main.scss (как показано ниже) импортирует все таблицы стилей для проекта, создавая большую часть кода, блокирующего рендеринг.Я следовал общему, популярному шаблону проектирования для файлов Sass, но, очевидно, он не очень хорошо вписывается в шаблон на основе компонентов, используемый Vue.

Я пытался загрузить таблицы стилей компонентов из '.vue 'Однофайловые компоненты, но я попадаю в другую проблему: поскольку Webpack анализирует эти файлы перед основным App.vue файлом, в который я импортирую main.scss, все переменные Sass, используемые в коде, становятся «необъявленными», что приводит к ошибкамповсюду.

Мой main.scss файл выглядит примерно так: 

//base style
@import 'base/variables';
@import 'base/fonts';
@import 'base/tools';
@import 'base/typography';
@import 'base/general';
@import 'base/buttons';
@import 'base/elements';
// ...

//components style
@import 'components/topnav';
@import 'components/header';
@import 'components/sidemenu';
@import 'components/footer';
@import 'components/login';
// ...

//responsiveness
@import 'base/responsiveness';
// cross browser styles
@import 'base/cross-browser';

Есть ли способ разделить этот большой файл и загрузить стили соответственно и асинхронно,только когда они нужны, как и в случае с другими блоками JS?

Я не верю, что есть какой-то специальный загрузчик / плагин Webpack, который бы сделал это для меня, и я ищурешение с наименьшим количеством рефакторинга.Все испытания увеличивают мои метрики Time to Interactive примерно до 6-7 секунд.

1 Ответ

0 голосов
/ 27 марта 2019

Итак: после некоторого сбоя и ошибки и после поиска этой страницы в документации vue-loader Мне кажется, я нашел правдоподобное решение, разбитое на следующее:

  • убедитесь, что установлены sass-loader и node-sass
  • Отредактируйте общую конфигурацию Webpack, как указано в документации, по ссылке выше. Здесь, например, для включения файлов переменных SASS или любой другой общей таблицы стилей (main.scss ...) вы можете сделать: 
         {
            loader: 'sass-loader',
            options: {
              data: `path/to/_variables.scss`,
              includePaths:[__dirname, 'src']
            }
          }
  • далее я разбил файл main.scss: остались только импорт базовых стилей, таких как переменные Sass, шрифты, миксины, адаптивные стили, формы и тому подобное.
  • Я удалил обычный импорт файла main.scss в App.vue, который автоматически удалил огромную загрузку в 700 КБ в чанке app.js.
  • Наконец, к каждому шаблону маршрута / вида я добавил соответствующие таблицы стилей компонентов в виде: 
<style lang="scss" scoped>
@import 'path/to/main.scss';  // **IF YOU HAVE `vue-cli` VERSION > 3.X, THEN YOU DON'T HAVE TO IMPORT GENERAL STYLE SHEETS SUCH AS THIS**
@import 'path/to/component/component.scss';
...
</style>

Причина, по которой импорт основного файла таблицы стилей не представляет проблемы, заключается в том, что это неблокирующий код , поддерживающий выполнение потока выполнения - иначе, чем прежде, когда огромная таблица стилей блокировала поток и оставила страница пуста слишком долго. Очевидно, что встроенная в Vue поддержка разделения кода в собственных файлах .vue делает все это «легальным» и сверхбыстрым.

Результаты

Начальная загрузка страницы была (что удивительно) менее 1,5 секунд (составляла 4,5-6), поскольку показатель производительности Lighthouse достиг стабильного диапазона 95-97 ... в среде разработки, где я даже не включил JS или сжатие текста! Ранее счет был около 45-55. Я с нетерпением жду развертывания этого в других средах, чтобы получить больше статистики, где больше настроек настроено, но это выглядит очень многообещающим решением.

...