Svelte и Rollup: Как экспортировать компоненты, которые можно получить через AJAX, кэшировать и повторно использовать на нескольких страницах? - PullRequest
Новая
       35

Svelte и Rollup: Как экспортировать компоненты, которые можно получить через AJAX, кэшировать и повторно использовать на нескольких страницах?

0 голосов
/ 23 октября 2019

В моей папке Svelte + Rollup src есть две подпапки, components и pages. Позвольте мне описать мою мечту, и, надеюсь, кто-то может пролить свет на то, возможно ли это.

  1. Компоненты и страницы экспортируются как их собственные файлы (у меня это работает через накопительный пакет)-plugin-multi-input ).

  2. При попадании на страницу запрашиваются все необходимые компоненты.

  3. JS-файлы компонентов затем кэшируются. Все будущие вызовы страниц, для которых нужны одни и те же компоненты, извлекаются из кэша.

Это разумно, или было бы лучше просто экспортировать страницы по отдельности и объединять компоненты в каждую страницу, дублируяcode?

Еще одна потенциальная идея

Создайте файл App.svelte, который импортирует все компоненты, объединит их в объект, передайте этот объект в компонент страницы в виде реквизита, затем выполните <svelte:component this={components.Input}> для всех компонентов внутри страницы. 

App.svelte:

<script>
  import { onMount } from 'svelte';
  import Input from 'Input.svelte';
  import Popup from 'Popup.svelte';
  const components = {Input, Popup};
  let page;
  function getPage(url) {
    /* AJAX call to fetch the page component and set it to the page variable */
  }
  onMount(() => getPage(location.pathname))
</script>

<svelte:component this={page} components>

Page1.svelte:

<script>
  export let components;
</script>

<p>Type your name:</p>
<svelte:component this={components.Input}>

При использовании этого метода все компоненты включаются в пакет, даже если пользователь никогда не заходит на страницу, содержащую некоторые из них.

1 Ответ

0 голосов
/ 25 октября 2019

Похоже, что вы говорите о каком-то сложном, ручном разделении кода.

Когда вы создаете проект Svelte / Sapper с помощью Rollup, он объединит ваши компоненты, маршруты и т. Д. Всерия небольших фрагментов JS, которые загружаются только при необходимости, сохраняя пропускную способность и увеличивая скорость. Для этого вам не нужен плагин с несколькими входами.

Также обратите внимание, что ваш план загрузки компонентов через AJAX не будет работать, поскольку Svelte - это скомпилированный язык, и он не будет создавать и назначать объектымуха в браузере пользователя.

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

...