Code Splitting with Svelte

Svelte
1

Okay… this is the situation…

I’m using Svelte + svelte-routing + Meteor and I’d like to split my code to load what user needs in that moment and not all the application bundle.

I came from Angular and thanks to Its routing system, I can easily split my code between different modules.

How can I accomplish the same result using Svelte instead?

1 Like
2

Here is one way (disclaimer: didn’t check for errors), but in general, all you need to do is use dynamic imports.

<script>
  const props = {
     answer: 42
  };
</script>

{#await import('./AnotherComponent.svelte')}
  loading...
{:then { default: comp } }
  <svelte:component this={comp} {props}/>
{/await}
1 Like
3

Okay, but what if I’m using a routing system, for example svelte-routing?

4

I’m not familiar with svelte-routing, but the concept is very much the same:

import new stuff dynamically when you need it.

Also, a search in svelte-routing repo’s issues with keywords “dynamic imports” yielded this: https://github.com/EmilTholin/svelte-routing/issues/89#issuecomment-557067699

<script>
  import { Router, Link, Route } from "svelte-routing";
  import Loadable from "svelte-loadable";
  import { Home } from "./routes";

  export let url = "";
</script>

<Router url="{url}">
  <nav>
    <Link to="/">Home</Link>
    <Link to="test">Test</Link>
  </nav>
  <div>
    <Route path="test">
      <Loadable loader={() => import("./AsyncComponent.svelte")} />
    </Route>
    <Route path="/"><Home /></Route>
  </div>
</Router>
5

Cool! Thank you, mate! :+1:

2 Likes
6

Pretty cool man! Thanks for finding this! :slight_smile: I haven’t had need for this yet, but its 100% one I will keep in my back pocket also! I am so glad to see Meteor + Svelte getting more and more traction!

1 Like