How to make the app.js smaller?

[JeremieLitzler]

Hello,

I see this warning during the Vite build:

⠇ Compiling with vite
(!) Some chunks are larger than 500 KiB after minification. Consider:        
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

I haven't found a discussion on this, still I have looked at a few resources, none providing a solution because my large file isn't from the vendors code.

When I look at the website, I see that the app file is the file > 500kb:

When I look into the file, I see quite a bit of content.

I'd like to know and understand how @Mister-Hope achieve his small app file with the reference to individual js files for the content (at least that is what I think I understand from looking at it).

Thanks a million!

My website: https://iamjeremie.me/
My repo: https://github.com/JeremieLitzler/journal

[azat-io]

Currently you are generating temp file with data of all your pages included your content:

    const pagesData = app.pages.map((page) => {
      console.log(page.filePathRelative);
      return page;
    });
    await app.writeTemp(
      'pages.js',
      `export default [${JSON.stringify(pagesData)}]`,
    );

And after then you are importing this file in your client code in components/PostsIndex.vue. This is the reason why your bundle is huge.

I tried to exclude data from the bundle that is not used in this component:
JeremieLitzler/journal#31

Thus, I managed to reduce the size from 6.9M to 1.2M. 🎉

But I still think that this solution is not the best solution.

[JeremieLitzler]

thanks @azat-io. I'm satisfied with this solution for now.