Optimize bundle size

[Rashid_NK]

I’m working with f7 svelte cordova app, when i’m building the app for android, getting warning that app size exceeds recommended size, I checked the out put www dir

Assets:
css/app.css (549 KiB)
js/app.js (1.09 MiB)
css/app.css.map (808 KiB)

Entrypoints:
app (1.62 MiB)
css/app.css
js/app.js
Is there any config to reduce the bundle size ?
Is there any config disable source map generation

My app is for android platform only, so I don’t want any other platform related resources in my bundle (fonts, css, js, etc.)

So please help
thank you

UPDATE :

I found this in webpack.config

optimization: {
    minimizer: [new TerserPlugin({
      sourceMap: true,
    })],
  },

changing it to sourceMap: false, and it did not create sourcemap for app.js which reduced bundle size
but css/app.css.map is generated

[tncrazvan]

You can optimize your bundle size by simply importing manually the components you need.
I’m pretty sure there’s a better way to do this in svelte, since it’s a compiler and you can implement some tree shaking precompiling callback in rollup or webpack.

I’m using rollup in my projects, instead of webpack and here’s how I do it: https://github.com/tncrazvan/svelte-framework7-template

The important pieces are src/framework7-custom.js and src/style/framework7-custom.less.

The js file contains the javascript implementations of the components and the less file contains the links to each component style.

I made sure to implement all components in those files, although they are all commented out.

All you have to do when you want to use a new component, that is not available in your application, is remove the comments from those files for your specific component.

For example, you may want to use the Popup component:

1. You’ll have to look for the Popup import in your custom js and remove the comment
   
   
2. Then look for the Framework7.use(…) call and remove the comment for your Popup component
   
   
3. Now switch to you custom less file and remove the comment for your component style import
   
   
   
4. Compile the less file to css (or use a Svelte less preprocessor) and import the styles in the global scope.
   I’m using a VSCode extension called “Easy LESS”, it’s pretty popular, it compiles your less file to a css when you save it (ctrl+s), it uses the same filename as the original except for the extension ofc.
   https://marketplace.visualstudio.com/items?itemName=mrcrowl.easy-less
   So you’ll get a file like this:
   
   And you can import it into svelte (the template already does it for you):
   

Now you can use the Popup component, import the component as you would normaly do

and use it

Output:

Hope this helps!

EDIT:
These are the bundles I’m getting when I run “npm run build” for this specific example:

the css bundle as you can see is very small.
Also you shouldn’t count your “.map” files as part of your application’s weight, those only get downloaded by the browser when you inspect your source code.

BTW, the reason I’m using rollup is because, unlike webpack, it correctly shows the svelte source code:

EDIT 2:
Just to be clear, the “extra.css” file is not needed, that file is not even processed by svelte, it’s a dummy file I made (which is not even minimized) that contains a bunch of icons that framework7 already has anyway.

So all the css your app would download is that 5KB file.

As for the js file, I’m afraid that’s the best we can do, I believe that’s the framework7-dom we’re looking at with 285KB (probably 7KB of those is svelte).

[Rashid_NK]

@tncrazvan

component

Thank you @tncrazvan, I will try this method. currently app.css is 549 kb and app.js is 1.1Mb