yarbsemaj / sveltekit-adapter-lambda

An adapter to build a SvelteKit app into a lambda ready for deployment with lambda proxy via the Serverless Framework or CDK.
https://www.npmjs.com/package/@yarbsemaj/adapter-lambda
MIT License
77 stars 16 forks source link

Dependencies loaded in serverless.js even when SSR is off for those pages #31

Closed JL102 closed 2 months ago

JL102 commented 1 year ago

Hi,

I noticed that in my app, which loads the library html5-qrcode in a CSR-only page, html5-qrcode is included in the bundle.

Steps to reproduce:

  1. npm create svelte@latest my-app
  2. inside my-app.... npm install
  3. npm install html5-qrcode @yarbsemaj/adapter-lambda
  4. add adapter-lambda to svelte.config.js
  5. create src/routes/qrcode/+page.server.ts:
    export const ssr = false;
  6. create src/routes/qrcode/page.svelte with a minimum reproducible example of my qrcode page:
    
    <div id="reader" bind:this={reader} />
8. `npm run build` -> the serverless.js bundle includes html5-qrcode, even though the page shouldn't be rendered on the server. 

It seems like html5-qrcode is being included due to this code chunk:
```js
var init_page_svelte2 = __esm({
  "build/entries/pages/qrcode/_page.svelte.js"() {
    "use strict";
    init_shims();
    init_chunks();
    import_html5_qrcode = __toESM(require_cjs(), 1);
    Page2 = create_ssr_component(($$result, $$props, $$bindings, slots) => {
      let reader;
      return `<div id="reader"${add_attribute("this", reader, 0)}></div>`;
    });
  }
});

in which require_cjs is the entry point for html5-qrcode. Any idea why qrcode/_page.svelte.js is being loaded despite ssr being off for that page? It'd be nice to keep the bundle size down by not including libraries that are only loaded on CSR-only pages.

yarbsemaj commented 1 year ago

I'm not sure, that does seem odd, Im wondering if this a svelte/vite bug rather than issue with my adapter. When i bundel, it's just to combine the server code with the server.js that svelte produces

yarbsemaj commented 1 year ago

Are you able to replicate this issue with the node adapter

JL102 commented 1 year ago

Hard to tell for certain.

I switched to @sveltejs/adapter-node and did some ctrl+F across build/client and build/server. This first screenshot includes a search through build/client, and I believe this file that's open in the editor includes all the html5-qrcode source code bundled into a single file. image

This second screenshot includes a search through build/server, and I believe this may be the same code as I noted in the original post (including the line import_html5_qrcode = __toESM(require_cjs(), 1);). image

yarbsemaj commented 1 year ago

That would be it, the only difference is, when my adapter bundles the code it minifies it