[v2] Optimize treeshaking

[scriptPilot]

Adding Webpack as builder for the kitchen sink, tree shaking does not work, all the F7 / F7-Vue code exists in later bundles, even is I reference only one page. Configuration according https://webpack.js.org/guides/tree-shaking/

[nolimits4web]

Works now?

[scriptPilot]

Now, I have invited you to my test repo - maybe it helps you to see what happend / if the config is wrong:

• Run npm install
• Run npm run b

In the build/dev folder you find the js bundle (minified) and the css / css.min files.

[scriptPilot]

OK, I have seen it works, so I changed the title, because I cannot believe that the reduction is so less. So for me, the effort to define each page all the modules is currently higher than the benefit of saved file size.

Example:

require('framework7/dist/js/framework7.js')
require('framework7/dist/css/framework7.css')
require('framework7-vue/dist/framework7-vue.js')

Webpack 3 build, no compression: 1.73 MB

import Framework7 from 'framework7/dist/js/framework7.esm.bundle'
import Framework7CSS from 'framework7/dist/css/framework7.css'
import { Framework7Vue } from 'framework7-vue'

Webpack 3 build, no compression: 1.67 MB (F7 JS+CSS already 1.53 MB)

Is it considered to link CSS declarations to its components, requested by Framework7, requested by Framework7-Vue, requested by the pages?

So, in addition to the default code for init. etc, load only these F7 JS and CSS which is really required ...

But maybe I did something wrong? In both cases, F7/F7-Vue v2 used.

[nolimits4web]

Don't include bundle versions if you need to use some modules only. Bundle is a bundle, don't expect much of tree-shaking from there

[nolimits4web]

CSS is not related to tree-shaking, CSS inclusion is just a webpack hack

[pi0]

Hi. Just wanted to share some personal experiences from latest build variants while working on optimizing nuxt7 - A F7-v2 based PWA app framework.
We tried adding custom build for both less and also JS for extra (non-core) components. The result was tree shaking don't actually makes some magic even by compiling only needed parts from esm source and lighthouse score of using bundled js versions is something reasonable for PWA apps.

[nolimits4web]

This is due to not perfect tree-shaking implementation of bundlers (Webpack and Rollup). If you run Buble or Babel over the whole final bundle package instead of separate modules you will get expected tree-shaking results. But anyway in next F7 update I’ll change it by putting separate components into separate folders/files to get correct tree-shaking results

[nolimits4web]

Closing, as stable v2's have separate components for better tree shaking