search

roxiness / routify

Automated Svelte routes
https://routify.dev
1.87k stars 87 forks source link

Code splitting - how to test #29

Closed Tommertom closed 4 years ago

Tommertom commented 4 years ago

Hi

I downloaded the starter template and changed package.json to enable the code splitting:

"watch:routify": "routify --dynamic-imports",

This yields an error:

[routify] Watching C:\Gebruikers\Developer\Src\routify-starter\src\pages
(node:17644) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'component' of undefined
    at C:\Gebruikers\Developer\Src\routify-starter\node_modules\@sveltech\routify\lib\services\_template.js:27:57
    at Array.map (<anonymous>)
    at C:\Gebruikers\Developer\Src\routify-starter\node_modules\@sveltech\routify\lib\services\_template.js:21:26
    at Array.map (<anonymous>)
    at template (C:\Gebruikers\Developer\Src\routify-starter\node_modules\@sveltech\routify\lib\services\_template.js:16:8)
    at build (C:\Gebruikers\Developer\Src\routify-starter\node_modules\@sveltech\routify\lib\services\interface.js:30:25)
(node:17644) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:17644) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

What should I do to test the code splitting?

By the way, the config documentation shows duplicate shortcode flag -d. One for debug --debug and one for code splitting --dynamic-imports. You may want to disambigue this?

https://routify.now.sh/docs/config#

jakobrosenberg commented 4 years ago

Hi @Tommertom

Thanks for catching this bug. I'll see if I can push a fix tonight. I'll remove the shortcode and maybe change it to -c for code-splitting or -D if the shortcode is case sensitive.

jakobrosenberg commented 4 years ago

Fixed in the latest release. I'll update the docs and include some instructions on how to implement code-splitting.

jakobrosenberg commented 4 years ago

Draft here of how to implement code splitting.

https://routify.now.sh/docs/codesplitting

Let me know how it goes.

Tommertom commented 4 years ago

Works like a charm!

Posted in a repo. For sake of reference. https://github.com/Tommertom/Routify-code-splitting-debugging

Initially I did not follow all your guides (forgot about rollup-changes). But then it worked.

Please note, you may want to say that you need to remove the line in rollup.config.js: file: 'public/build/bundle.js', and replace it with dir: 'public/bundle'. Can't have both, and your guide may lead to issues for the not-so-experienced rollup-person (like me). 

[!] Error: You must set either "output.file" for a single-file build or "output.dir" when generating multiple chunks.

Nice work! Going to integrate in my project