search

sencha / package-loader

Ext JS Dynamic Package Loader
36 stars 16 forks source link

Prevent duplicated css output #4

Open valioDOTch opened 6 years ago

valioDOTch commented 6 years ago

Feature request When building a dynamic package for an app, remove all CSS output, that is not part of the dynamic package i.e. SCSS stemming from the application, its theme or the parent themes that was already loaded, when the application was loaded.

Reasoning In our setup, we have a single app in our workspace. We use the dynamic package loader for additional app areas that are loaded depending on user configurations (e.g. depending on the company, there are additional menu entries).

If we build an app with a dynamic package, the build files are written to workspace/build/[development|production|testing]/(appName)/(buildName)/resources/(dynPkgName)/(dynPkgName).css

However the CSS of this dynamically loadable package not only contains the code of the SCSS that is provided via the package, but also all of the SCSS that is part of the application (e.g. workspace/sass/var/all.scss), the application theme and the parent themes of that theme. In fact this is the major part of that particular CSS file (about 95%-100%).

From our perspective this is behaviour is bad, because 1) it makes debugging the CSS a pain 2) it creates unnecessary network overhead for end user devices 3) it creates unnecessary performance overhead for end user devices

valioDOTch commented 6 years ago

We could probably try to do this ourselves with some after-build task, but we consider this to be an issue that should be fixed in the package-loader package.

valioDOTch commented 6 years ago

As a workaround for anyone who encounters the same problem: We decided we will stop using scss in dynamic packages entirely (i.e. we move all scss into our main application and use dynamic packages solely for JS code).

For this we added an override for Ext.package.Entry which removes its loadStyle method Ext.define("PWA.overrides.package.EntryWithLoadStyleMethodRemoved", { override: "Ext.package.Entry", loadStyle: ()=>{} });

This approach also allowed us to reduce our build time for the dynamic packages. In each of our dynamic packages we changed the sass config in the package.json to "sass" : false,