Как лучше загружать стили vue?

Question

[Никита Егоров]

Всем привет!

Решил изучить ленивую загрузку, и не знаю как правильно загружать css стили.
Есть два варианта:

1. Загружать стили отдельно (параллельно с n.bundle.js)
   
2. Загружать стили в n.bundle.js
   

Разницы в скорости загрузки нету.
Тестировал в disable cache и slow 3g


В одном из компонентов (0.bundle.js) в тег style я вставил css-библиотеку весом 270 кб, для наглядности.
В первом случае, раньше загружается 0.bundle.js, только потом, догружается 0.style.css. Но при этом, надпись, "welcome to page 3" появляется только после загрузки 0.style.css (почему?), хотя js уже скомпилировался.

Во втором случае мы имеем 0.bundle.js вместе с css внутри.

Так вот, как же лучше загружать css и как делаете это вы?

Answer 1

[profesor08]

Самые нужные стили в head. Как вариант для первоначального показа страницы, или загрузочного экрана.
Остальные стили перед закрывающем тегом body либо подгружать асинхронно, вставляя их в документ. Аналогично можно сделать и со скриптами. В конец страницы асинхронный загрузчик. Это такой идеальный вариант.

Но на деле скрипты и стили кешируются в браузере и вообще пофиг где они расположены, и как загружаются, они уже все загружены браузером и применяться почти мгновенно.

Comments

[Никита Егоров]

Мой вопрос был в другом. Либо загружать стили в одном файле с n.bundle.js либо отдельно.
Во втором случае, стили и скрипты и так загружаются асинхронно.

[profesor08]

На этот вопрос нет однозначного ответа. Это лишь вопрос удобства. Но я бы не стал паковать все в один файл. Два файла меньшего размера загрузятся быстрее, потому что будут загружаться одновременно. И дебажить проще.