Lazy Load a Vuex Module at Runtime using TypeScript

We're going to load the login module at runtime. For that first, let's remove it from this import and from the Vuex store. Then go to the main TS file, and we are going to load it based in a dynamic constant.

The store has a registerModule method which takes the module name as the first parameter and the module as the second, which we have to import here. Login from store login. With this, the module will be loaded dynamically.

Now, it's log in, but if we invert condition, then it crashes. That's because the app view component expects that the login module exists, and it has no other check for Vuex assistance. Let's go there to the app component.

To check for the login state assistance, we could go to the template and use a Vuex dev.nav. We check that login exists. Then we move the button on the testing side. As you can see, now the login button is not shown, and it doesn't crash anymore.

At this point, we can use the code splitting feature of Webpack to lazy load that module. For that, instead of importing login up there, we can use the ECMAScript dynamic import function to request that module at runtime.

It returns a promise with the module. We are going to use the object spread operator to take only the login which is the module and load it. In order to use the object spread operator in our function, we have to wrap it with parentheses.

In order to make TypeScript understand the import function, we have to go to the TS config and change the module to ES next, so it doesn't complain anymore. We also have to rerun the project, because we changed the TS config, and it has to reload it again.

Now, if we go to the network tab in the dev tools, we see only an object JS bundle is reloaded. If we change the condition to load that module, we see now the login button is there, the module is loaded, and another chunk has been created, the C.JS.