Inefficient bundling detected?

[hrstoyanov]

I use snowpack to install my SAPUI5 modules, for example in my package.json I have:

 "dependencies": {
    "@reduxjs/toolkit": "^1.5.0",
    "@ui5/webcomponents": "next",
    "@ui5/webcomponents-base": "next",
    "@ui5/webcomponents-fiori": "next",
    "@ui5/webcomponents-icons": "next",
    "lit-element": "^2.4.0",
    "normalizr": "^3.6.1"
  },
  "snowpack": {
    "install": [
      "@ui5/webcomponents/dist/Assets",
      "@ui5/webcomponents/dist/Button",
      "@ui5/webcomponents-fiori/dist/Assets",
      "@ui5/webcomponents-fiori/dist/ShellBar",
      "@ui5/webcomponents-fiori/dist/SideNavigation",
      "@ui5/webcomponents-fiori/dist/SideNavigationItem",
      "@ui5/webcomponents-fiori/dist/SideNavigationSubItem",
      "@ui5/webcomponents-icons/dist/Assets.js",
      "lit-html",
      "@reduxjs/toolkit",
      "normalizr"
    ],

But am getting a lot of these in the browser console, when I run my app :

i18n-afce35f1.js:366542 
Inefficient bundling detected: consider bundling CLDR imports as URLs instead of inlining them.
See rollup-plugin-url or webpack file-loader for more information.
Suggested pattern: "assets\/.*\.json"
(anonymous) @ i18n-afce35f1.js:366542
i18n-afce35f1.js:366589 
Inefficient bundling detected: consider bundling theme properties imports as URLs instead of inlining them.
See rollup-plugin-url or webpack file-loader for more information.
Suggested pattern: "assets\/.*\.json"
(anonymous) @ i18n-afce35f1.js:366589
i18n-afce35f1.js:366634 
Inefficient bundling detected: consider bundling theme properties imports as URLs instead of inlining them.
See rollup-plugin-url or webpack file-loader for more information.
Suggested pattern: "assets\/.*\.json"
(anonymous) @ i18n-afce35f1.js:366634
i18n-afce35f1.js:376558 
Inefficient bundling detected: consider bundling i18n imports as URLs instead of inlining them.
See rollup-plugin-url or webpack file-loader for more information.
Suggested pattern: "assets\/.*\.json"
(anonymous) @ i18n-afce35f1.js:376558
Assets.js:481 
Inefficient bundling detected: consider bundling i18n imports as URLs instead of inlining them.
See rollup-plugin-url or webpack file-loader for more information.
Suggested pattern: "assets\/.*\.json"
(anonymous) @ Assets.js:481
Assets.js:39 Inefficient bundling detected: consider bundling theme properties imports as URLs instead of inlining them.
See rollup-plugin-url or webpack file-loader for more information.
Suggested pattern: "assets\/.*\.json"
(anonymous) @ Assets.js:39
Assets.js:3411 
Inefficient bundling detected: consider bundling i18n imports as URLs instead of inlining them.
See rollup-plugin-url or webpack file-loader for more information.
Suggested pattern: "assets\/.*\.json"

How do I get rid of such warnings?

[pskelin]

You should use a plugin that makes URLs out of JSON imports instead of inlining them. Every bundler should support both options, unfortunately some use inlining which is not a good default for our use case.

This plugin should do the right thing for snowpack
https://www.npmjs.com/package/snowpack-plugin-url-loader

in the config, put json in the extensions you want loaded as URLs, and set limit to 0 (so they are never inlined).

Make sure to check the network tab before and after to see why the warnings are there - bundle should be much smaller.

[ilhan007]

Hello @hrstoyanov in addition to the answer by @pskelin above
I want to add that the topic (and the warning) is explained in our Github docs within the Efficient Asset Bundling section.

[hrstoyanov]

@pskelin @ilhan007
I tried your advice, but it did not work for me - I still get the warnings in the browser console. Have you tried snowpack yourself?
Here is what I did:

1. Installed the snowpack-plugin-url-loader as per the instructions:

npm install --save-dev snowpack-plugin-url-loader

2. Added the plug-in to my package.json (should be the same as adding it to snowpack.config.json):

...
  "devDependencies": {
    "@playwright/test": "^0.162.0",
    "snowpack": "^2.18.0",
    "snowpack-plugin-url-loader": "^1.0.0"
  },
"snowpack": {
    "install": [
      "@ui5/webcomponents/dist/Assets",
      "@ui5/webcomponents/dist/Button",
      "@ui5/webcomponents-fiori/dist/Assets",
      "@ui5/webcomponents-fiori/dist/ShellBar",
      "@ui5/webcomponents-fiori/dist/SideNavigation",
      "@ui5/webcomponents-fiori/dist/SideNavigationItem",
      "@ui5/webcomponents-fiori/dist/SideNavigationSubItem",
      "@ui5/webcomponents-icons/dist/Assets",
      "lit-html",
      "@reduxjs/toolkit",
      "normalizr"
    ],
    "plugins": [
      ["snowpack-plugin-url-loader",{"exts": [ "json" ], "limit": 0 }]
    ],
   ...

Then deleted and rebuilt the modules:

 npx snowpack install
[snowpack] ! installing dependencies...
[snowpack] ✔ install complete! [21.16s]
[snowpack] 
  ⦿ web_modules/                                               size       gzip       brotli   
    ├─ @reduxjs/toolkit.js                                     80.52 KB   21.06 KB   18.41 KB   
    ├─ @ui5/webcomponents-fiori/dist/Assets.js                 223.18 KB  29.37 KB   18.16 KB   
    ├─ @ui5/webcomponents-fiori/dist/ShellBar.js               47.72 KB   11.31 KB   9.75 KB    
    ├─ @ui5/webcomponents-fiori/dist/SideNavigation.js         64.19 KB   14.23 KB   12.07 KB   
    ├─ @ui5/webcomponents-fiori/dist/SideNavigationItem.js     3.02 KB    1.17 KB    0.96 KB    
    ├─ @ui5/webcomponents-fiori/dist/SideNavigationSubItem.js  1.93 KB    0.85 KB    0.69 KB    
    ├─ @ui5/webcomponents-icons/dist/Assets.js                 371.44 KB  131.96 KB  103.01 KB  
    ├─ @ui5/webcomponents/dist/Assets.js                       0.19 KB    0.12 KB    0.08 KB    
    ├─ @ui5/webcomponents/dist/Button.js                       0.41 KB    0.22 KB    0.19 KB    
    ├─ lit-html.js                                             50.44 KB   12.27 KB   10.4 KB    
    └─ normalizr.js                                            17.99 KB   3.97 KB    3.49 KB    
  ⦿ web_modules/common/ (Shared)
    ├─ Button-0ef29381.js                                      85.44 KB   19.36 KB   16.2 KB    
    ├─ EffectiveAssetPath-90804153.js                          10.54 KB   3.18 KB    2.76 KB    
    ├─ getSingletonElementInstance-945607ec.js                 0.3 KB     0.19 KB    0.15 KB    
    ├─ i18n-8371f359.js                                        9.62 KB    3.28 KB    2.79 KB    
    ├─ i18n-afce35f1.js                                        9259 KB    1442 KB    405.87 KB  
    ├─ parameters-bundle.css-ed04f768.js                       213.62 KB  47.14 KB   39.03 KB   
    ├─ SVGIconRegistry-0e2b3be4.js                             2.92 KB    1.19 KB    1.01 KB    
    ├─ Themes-f0763331.js                                      3.84 KB    1.33 KB    1.14 KB    
    └─ UI5Element-1f49e769.js                                  70.56 KB   18.46 KB   16.03 KB   

[pskelin]

I tried an example with the plugin and didn't get it to work as it was throwing some exceptions.

When reading the snowpack documentation, it seems showpack itself always inlines JSON files and this is not configurable:
https://www.snowpack.dev/reference/supported-files#json
This inlining happens even before the plugin can run, so it would have no effect.

Even though snowpack can create URL references to other asset types:
https://www.snowpack.dev/reference/supported-files#other-assets

I would suggest to open a feature request in the snowpack project to support converting JSON imports to URL references. Alternatively, you can try out rollup as your build and development tool. It is very mature, feature rich and fast. Here is a sample configuration project showing how to use it with ui5 webcomponents:
https://github.com/ilhan007/rollup-wc

[hrstoyanov]

@pskelin thanks for looking into this and testing!
I notified the snowpack team here
Depending on what snowpack team say, I will consider moving to rollup