CODEWITHSUNDEEP
ionic-frameworkwebpackstenciljs
Carsten
Carsten

Reputation: 11

Webpack Stenciljs PWA

I need to reduce the size of a Stenciljs PWA for a project using Webpack. The Stenciljs Compiler creates several JS files and embeds them as nomodule script tag in the index.html file.

Now my questions:

Upvotes: 1

Views: 616

Answers (1)

Simon Hänisch
Simon Hänisch

Reputation: 4968

Stencil already does its best to generate optimized bundles that are minified in production builds. I doubt you'll be able to minify this much further with Webpack. Don't be fooled by checking the size of the output folder (www if it's an app), as it doesn't represent the size of what's actually loaded when you open the app in the browser.

There's no way to combine all scripts into one by simply concatenating the scripts, as that's against the nature of ES modules (one file per module). You could try the dist-custom-elements-bundle output target (https://stenciljs.com/docs/custom-elements), which allows you to create only one bundle that includes all your components. However that is a dist-type output target, so you'll have to figure out how to consume that for your app.

Stencil doesn't embed any nomodule script tags in your index.html. Maybe you meant rel="modulepreload"?

In addition, all the metadata collected by the compiler and the dependency graph generated by rollup can be used to automatically create “modulepreload” links, reducing the amount of network round-trips required to download all the JS in the critical path to zero. This drastically reduces the Time-To-Interactive of apps built with Stencil.

(from https://ionicframework.com/blog/announcing-stencil-one-beta/)

The only nomodule-type script that would be in your src/index.html is the one with the entry point for your app for browsers that don't support type="module". It's added by default, see src/index.html#L22. This script will be ignored (i. e. not loaded) by browsers that already support ES modules. However it's up to you to remove it, your app just won't work in any browsers that don't support ES modules then.

If you want to drop support for IE11 and old Edge (before v18), you can use the extras option in your stencil.config.ts, which might reduce the size further:

export const config: Config = {
  buildEs5: false,
  extras: {
    dynamicImportShim: false,
    cssVarsShim: false,
    shadowDomShim: false,
    scriptDataOpts: false,
    safari10: false
  }
}

(see https://stenciljs.com/docs/config-extras)

Upvotes: 2

Related Questions