[FEATURE] Optimize client dist js for view only pages

Describe the feature

The dist main js file is 6MB+ and 2.x MB+ with nginx gzip enabled.

I checked with webpack-bundle-analyzer, components like pdfmake takes 30-40% size from the dist js.

In my case, I want to let users view the /view page anonymously, but if they need also load editor related code, that's a waste of band width and the loading is slow.

Describe the solution you'd like

Build codes into different files and load editor related code only if necessary.

Additional context

ng build --configuration=production

default angular.json

Initial Chunk Files           | Names         |  Raw Size | Estimated Transfer Size
main.b9f89056eec34354.js      | main          |   6.14 MB |                 1.44 MB
styles.846fe9a42a0a46ea.css   | styles        | 262.97 kB |                24.71 kB
scripts.a58f5e48421f8dfe.js   | scripts       |  42.30 kB |                17.07 kB
polyfills.df504f67f09f2fbb.js | polyfills     |  33.11 kB |                10.69 kB
runtime.8ef63094e52a66ba.js   | runtime       |   1.70 kB |               880 bytes

                              | Initial Total |   6.47 MB |                 1.49 MB

default

namedChunks=true and vendorChunk=true


Initial Chunk Files           | Names         |  Raw Size | Estimated Transfer Size
vendor.4f4c0566f559d1a9.js    | vendor        |   4.83 MB |                 1.26 MB
main.828e8b7b9b7716c3.js      | main          |   1.37 MB |               209.22 kB
styles.846fe9a42a0a46ea.css   | styles        | 262.97 kB |                24.71 kB
scripts.a58f5e48421f8dfe.js   | scripts       |  42.30 kB |                17.07 kB
polyfills.5603bc298f9e8f91.js | polyfills     |  33.12 kB |                10.73 kB
runtime.3bfd8c2d20f668ae.js   | runtime       |   1.71 kB |               879 bytes

                              | Initial Total |   6.53 MB |                 1.52 MB

chunks-enabled

frangoteam / FUXA

[FEATURE] Optimize client dist js for view only pages #1319