Register module runtime vs transpile time

Question

I just want to confirm my understanding of Vuex store module registration.

My understanding is that

const store = {
  modules: {
    mod1,
    mod2,
    mod3,
    ...
  }
}

export default store

registers the module during transpile time, when .vue and other webpack stuff is happening, whereas

store.registerModule('mod1', mod1)
store.registerModule('mod2', mod2)
store.registerModule('mod3', mod3)

happens at runtime when the code actually gets to the client, making the frontend ever so slightly slower.

Am I correct in my understanding?

The official docs for registerModule() gives plugin integration as an example usage, but plugins are part of the compile - so not really 'runtime' in that scenario. — Richard Matsen
This blog Vue.js App Performance Optimization: part 3— Lazy loading Vuex modules gives another example usage for bundling modules in different webpack chunks for lazy loading, so again is compile time not runtime - in the sense that the compiler already knows about the module, even if it is added to the store during a runtime execution path. — Richard Matsen

Sabee Sabee · Accepted Answer · 2019-06-14T20:36:44

I think yes. Register a module before the store has been created

 const store = {
      modules: {
        mod1,
        mod2,
        mod3,
        ...
      }
    }

    export default store

Dynamic Module Registration

You can register a module after the store has been created with the store.registerModule method.