In this article we will focus on code split optimization of our state management – Vuex module

Before we get any further into how to lazily load Vuex modules, there is one important thing to note. You need to know what the methods are for registering Vuex modules and what their strengths and weaknesses are.

Static Vuex modules are declared during Store initialization. Here is an example of an explicitly created static module:

The code above will create a new Vuex Store with the static userAccountModule. Static modules cannot be unregistered and cannot change their structure after the Store is initialized.

While this approach works fine for most cases and is declared in one place, everything related to the data can be kept in one place. But there are some downsides to this approach.

Suppose we have an Admin Dashboard in our application that is associated with a dedicated Vuex module adminModule.

You can imagine that such modules could be huge. Although the dashboard will only be used by a small number of users and a restricted area of the application (presumably under the /admin path), all of its code will be in the main package due to the centralized registration of the static Vuex module. So this is definitely not what we want, we prefer that each Vuex module is registered according to the page size of the classified routing module, so that it is not loaded when the program is initialized. It can be packaged in separate blocks of code, or lazily loaded when needed.

This is when the dynamic module can help us! Let’s take a look at what the dynamic registration management module looks like.

After the Mounted life cycle event of the admin. vue module, we register the Store of the corresponding module, and unregister the module after the beforeDestroy event of the module to prevent multiple registrations of the same module.

The Store for admin now belongs to the admin. vue module, so it will be packaged with the admin. vue code split and will not be loaded when the program is initially loaded

The Vuex module is loaded lazily

This is actually a platitude of things, and load other files are not much different, specific is according to their own project actual situation, the general method is as follows

Since it is a dynamic import, the AdminModelStore.js content is packaged into a separate file that is downloaded only when the getAdminModel method is called.

conclusion

Even though static Vuex module registration is sufficient for most use cases, in some cases we may want to use dynamic registration.

If only on a specific route module is needed, we can dynamically register it in the appropriate routing component, so that it would not exist in the primary bundles, specific or want to choose according to the business itself, actually if small project, if it is encountered complex project cases, we need to pay attention to the development to optimize every little detail. So today’s article here, feel good soil dog please click to see again, let more people see this article