Как лучше реализовать SPA?

Question

[Yeldos Adetbekov]

Привет, пробовал разрабатывать на vue-cli со всеми готовыми батарейками на webpack.v.1 и обычным кастомным с нуля на webpack.v.3. Удобнее конечно на vue-cli, но мне не нравится, что после сборки, все раздрабливается на отдельные css, js. И при этом браузер, в частности chrome видит все мои внутренние компоненты проекта. И это немного неприятный момент. Вроде все минифицируется и аглифай встроенный в vue-cli делает свое дело. Но браузер все парсит и все понимает. А при webpack3 генерится один единственный bundle.js который я подключаю в проект. В данном случае все работает отлично. Но вопрос встал о производительности. Настанет такой момент когда мой bundle.js будет много весить, и заставлять браузер ждать полной загрузки - плохо. Или я преувеличиваю? Что лучше? Спасибо!

Comments

[Алексей Ярков]

И при этом браузер, в частности chrome видит все мои внутренние компоненты проекта. И это немного неприятный момент. Вроде все минифицируется и аглифай встроенный в vue-cli делает свое дело. Но браузер все парсит и все понимает.

И в очередной раз кто-то боится, что его супер-пупер-секретный код кто-то увидит )))
Браузер все понимает, потому что сорсмапы генерятся при сборке.

Answer 1

[Yeldos Adetbekov]

Удалить .js.map файлы. Это sourcemaps от webpack))
Дело в том, что месяц назад я добавил дополнительный loader в vue-loader.conf.js. И закомментил sourcemap-овский condition. А именно вот так:

Ха-ха. Просто я не знал как это организовать вместе)) Смешно правда?
Так вот решение:

Answer 2

[lavezzi1]

Последний vue-clie на webpack 2.x из коробки поддерживает code splitting. На выходе получается vendor.js (библиотеки из node_modules), app.js. Также посмотри в сторону lazy loading components. То есть можно модалки например, или другие компоненты не грузить вообще если нет надобности. То есть на модалку вещаете директиву v-if и компонент подключаете так:

components: {
  Modal: () => import('components/modal.vue');
}

При этом компонент на выходе будет лежать в отдельном файле и не загрузится до того, пока не отработает v-if.

Если без v-if, то компонент загрузится асинхронно во время загрузки страниц.

Я например, гружу так страницы через vue-router, асинхронно.

Comments

[Yeldos Adetbekov]

Code splitting это и есть разбиение по вендорам(Lazy loading). Если я пишу так, то файлы при использовании vue-cli сами разобьются на асинхронные js? Как вы делаете vendor.js и app.js? По дефолту vue-cli выдет только свои сгенерированные js файлы. Поделитесь, пожалуйста) На самом деле данный ответ пока не решил мой вопрос полностью, так как при vue-cli и так все разбивал, и проблем с загрузкой не было. Вопрос был в том есть ли возможность скрыть внутренние компоненты при vue-cli как на webpack2. Информация которой вы ответили оказалась очень полезной.

[lavezzi1]

Всмысле скрыть внутренни компоненты?

Answer 3

[kulaeff]

Много весить - довольно субъективное понятие. К тому же не нужно забывать, что есть такая штука как кеш. Я разбиваю код на два бандла: в одном находится мой код, в другом - код сторонних библиотек. Смысл в том, что сторонние либы обновляются редко, браузер этот бандл закеширует при первой загрузке и будет подгружать только мой код, который обновляется часто, но весит мало.

Comments

[Антон Антон]

в одном находится мой код, в другом - код сторонних библиотек

скиньте ссылку на мануал по такой настройке, если не сложно

[ThemeZV]

Не лучше ли сторонние библиотеки подключать с CDN?

[Владимир Проскурин]

ThemeZV: лучше, но нужно смотреть, чтобы данный CDN не был заблокирован в целевой стране, как например гугл в Китае.