2

The home page of lwc lists "Lean, 7kb runtime optimized for performance, with minimal boilerplate code" as one of the selling points. Using just the following commands:

$ npx lwc-create-app my-app
$ cd my-app
$ yarn
$ yarn build

Results in a couple of JS files, the one containing the framework (1.app.js) looks to be 86k. Are there some build settings I need to get that smaller?

1
  • I am not completely sure how you can measure that but you are looking at the generated code whereas the 7kb refers to runtime optimization.
    – Jayant Das
    Commented Jun 5, 2019 at 0:37

1 Answer 1

4

The ~7kb refers to the engine standalone minified and gzipped without any polyfills for browser compatibility (IE11 and friends).

For example on our doc site on https://lwc.dev, you can open dev tools and see the raw engine URL (in UMD format): https://lwc.dev/assets/js/lwc/engine_v100.js (this one is bigger because it contains the synthetic shadow DOM polyfills.

Not sure if lwc-create-app has a PROD mode where it does the minification, but if not you should file a bug.

If you are using tools like webpack or rollupjs, normally these tools bundle in chunks depending on internal heuristics, which is normally a fine approach, but depending on the use case, sometimes you just want to separate the engine by itself to make the cache-ability better.

We will be open sourcing soon a bunch of sample apps and projects so you can see some examples on how to do it. We will add the links into the communities section on the LWC official docs (lwc.dev)

All that being said we will check the number with the latest version and triple-check the size is accurate.

3
  • The build command runs lwc-services build -m production, so that is the minified version. Is there a way to edit the compile targets? i.e., omit polyfills for browsers we don't support? Commented Jun 5, 2019 at 21:08
  • To add to the answer from @Diego the size is dependent on the webpack build. Having said that I released yesterday a newer version of lwc-services which separates the engine from other dependencies.Check out [version 1.2.0] (github.com/muenzpraeger/lwc-create-app/blob/master/…). 0.app.js is the bundle with the engine some some dependency that the webpack heuristics added. It's also "live" on this site. Commented Jun 6, 2019 at 13:30
  • The default config for the LWC compiler that is set in lwc-services excludes older browsers, see here. Commented Jun 6, 2019 at 13:30

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .