Aurelia Boot Speed

1

I’ve written an Aurelia app for a portable device (watch). It works very well. One issue I have is Aurelia boot time so I’m trying to determine if there’s anything I can do to make this faster. my app seems to take almost 10 seconds from launch to loaded. My main.configure looks something like this:
export function configure(aurelia: Aurelia) {
aurelia.use.preTask(() => {
console.time(‘app-use’)
})
.defaultBindingLanguage()
.defaultResources()
.eventAggregator()
.globalResources(
[
PLATFORM.moduleName("./Blah")
, PLATFORM.moduleName("./Blah")
, PLATFORM.moduleName("./Blah")
, PLATFORM.moduleName("./Blah")
, PLATFORM.moduleName("./Blah")
, PLATFORM.moduleName("./Blah")
, PLATFORM.moduleName("./Blah")
, PLATFORM.moduleName("./Blah")
, PLATFORM.moduleName("./Blah")
])
.plugin(‘aurelia-i18n’, (instance: I18N) => { //Blah })
.postTask(() => {
console.timeEnd(‘app-use’)
});

console.time(‘app-boot’)
aurelia.start()
.then(() => {
aurelia.setRoot(PLATFORM.moduleName(‘app’))
})

.then(() => {

  console.timeEnd('app-boot')

})

and in the console i get :

app-use: 5842.8359375ms
vendor-bundle.js:23041 INFO [aurelia] Aurelia Started
app-bundle.js:27165 app-boot: 5924.613037109375ms

does anyone have any ideas how I could speed this up or debug the bottleneck?

app runs from local filesystem, no web server involved.

Cheers

1 Like
2

You can divide and conquer, comment out half (then half of half…) of the above lines, to find out which resource/plugin is the culprit.

1 Like
3

actually, I forgot to mention I did this. I removed .globalResources(… completely and it only reduced the boot time by about 1 second…

1 Like
4

Now you mentioned it, I ran through same check on two of my production apps.

  1. Mid size, without i18n plugin
[Debug] app-use: 312.422ms (npm-bundle.js, line 8328)
[Info] INFO [aurelia] – "Aurelia Started" (npm-bundle.js, line 9516)
  1. Huge size, with i18n plugin
[Debug] app-use: 441.021ms (app-bundle.js, line 48945)
[Info] INFO [aurelia] – "Aurelia Started" (aurelia-bundle.js, line 10951)

My setup seems ok. Not sure what went wrong with yours.

1 Like
5

I’m guessing you are loading all locales at once, it could be a bit too heavy? Maybe lazy load the locales, similar to other module code splitting

1 Like
6

here’s my plugin code. I assumed this would only load locale resources as required?

.plugin(‘aurelia-i18n’, (instance: I18N) => {

  let aliases = ['t', 'i18n'];

  // add aliases for 't' attribute

  TCustomAttribute.configureAliases(aliases);

  // register backend plugin

  instance.i18next.use(Backend.with(aurelia.loader))

  return instance.setup({

    ns: ['global', 'readables', 'readables_n'],

    defaultNS: 'global',

    attributes: aliases,

    lng: 'en',

    fallbackLng: 'en',

    debug: false,

    backend: {                                  // <-- configure backend settings

      loadPath: './locales/{{lng}}/{{ns}}.json'

    }

  })
1 Like
7

It seems the issue is with the slow script loading time. Example is one bundle is taking 5s, while the other is taking 6s. I think to debug this issue, you will need a several invesgiration rounds.

  • I’m guessing you are using webpack, so the first tool is bundle analyzer, to have a stronger understanding of what’s being included in your dist https://www.npmjs.com/package/webpack-bundle-analyzer
  • I’m guessing you are not splitting the code at all, as there’ only 3 bundles. Even though everything is only in local file server, not everything should be loaded when the app start, maybe there’s big amount of code that can be separated and lazy loaded. This is where the 2nd parameter in your PLATFORM.moduleName could be useful: it signals webpack what bundle a module should go into.

Maybe try with these 2 steps first, and let’s see what low hanging fruits we can target first?