Stencil: Rebuild takes 1 minute

[val-o]

Stencil version:

 "@stencil/core": "^0.15.2"

I'm submitting a:

[ ] bug report
[x] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
We have relatively small project (about 30 components) with about 10 dependencies on other component packages (all written in stencil). Recently I added immutable js and lodash-es, and noticed that build time is getting to take very long (1 minute).

This is considering I didn't disable cache in config. The slowest seems to be 'module map'.
Is is expected behaviour or something wrong with it and can be impoved? Please advise something as the project is going to grow a lot bigger.

Thanks

Steps to reproduce:

[MoAsmar]

+1

[DeadcatDev]

+1
Same here, in 5-6 weeks build times from 3-4 sec to ~1 minute

[TahaShanouha]

I'm having the same issue here, build time increased to almost a minute

[Nabz1996]

+1
This thing is driving me crazy

[RobertApplandeo]

+1

[val-o]

After update to 0.16.0 the build time dropped twice, it's now about 20-30 seconds. Not sure is it realted to version change or something else

[manucorporat]

Can you update to 0.16.1-1?
it's a prerelease, we are testing some perf improvements

[manucorporat]

Instead of +1, it's helps more to explain what command are you using, number of components, plugins used, dependencies?

Rollup needs to parse all code of all dependencies, even if just a small function is used. I would recommend to avoid using big depedencies like lodash or moment.js

[mattcosta7]

50+ components rebuild times. 1 external dependency (a small one)

version   | time
0.16.0    | 2-4 seconds. 
0.16.1-1  | .5-.8s

[manucorporat]

@mattcosta7 seems like a good improvement, which command are you running?

[mattcosta7]

stencil build --es5 --dev --watch --serve --doc-json=docs.json --docs

export const config: Config = {
  namespace: 'Rotor',
  outputTargets: [
    {
      type: 'dist',
    },
    {
      type: 'www',
    },
    {
      type: 'docs-json',
      file: './docs.json',
      strict: true,
    },
  ],
  copy: [
    {
      src: './style/colors.css',
      dest: '../style/colors.css',
    },
    {
      src: './style/colors.css',
      dest: '../style/colors.scss',
    },
  ],
  globalScript: 'src/utils/global.tsx',
  globalStyle: 'src/style/global.css',
  plugins: [
    postcss({
      plugins: [
        postcssImport({
          plugins: [stylelint()],
        }),
        postcssPresetEnv({ stage: 0 }),
        postCssAdvancedVariables(),
        mqpacker(),
        cssnano({ preset: 'default' }),
        postcssReporter(),
      ],
    }),
  ],
  excludeSrc: [
    '/test/',
    '**/*.spec*',
    '**/*.stories*',
    '*/__snapshots__/*',
    '**/*.spec.ts.snap',
    '**/readme.md',
    '**/usage/*.md',
  ],
  devServer: {
    port: Number(port) || 3333,
  },
  testing: {
    ...jestConfig,
  },
}

[manucorporat]

You can probably improve the performance a lot more, if you remove the --es5 flag during development.

Also, stencil uses cssnano under the hood already. You can probably remove that too from plugins

[val-o]

@manucorporat Hi, thank you for your suggestions. But I think you need to include this recommendation to docs. I have 3 big dependencies currently (lodash-es, immutableJs, rxjs). Sorry, I don't have much experience of rollup and bundling process.

P.S. Just update to 16.1-1 and noticed great improvement of build time, it's now got down to 4-5 seconds. Such a relief

[manucorporat]

We will be adding more docs soon, and better warning inside the CLI itself!

[val-o]

@manucorporat not sure you even need this now, because after update to 0.16.1-1 even with external dependencies build time is quite quick

[manucorporat]

Well, es5 requires to run rollup twice (which is already an slow task), and then we need to transpile from es2017 to es5 for every single file. I recommend to DO NOT enable that during development. Production builds will always output es5! so no worries

[manucorporat]

Going to close this, please feel free to ping me to reopen if the perf problem persist!