Towards Automation of Module Lazy Loading in Single-Page Web Applications

Dynamic lazy loading in Vuex is an effective method for optimizing the performance of large-scale Vue.js applications. This paper proposes a method to simplify the implementation process of dynamic lazy loading in Vuex, enhancing code maintainability and readability. By leveraging Vue's plugin mechanism, the proposed method encapsulates the Vuex module loading process, allowing for the flexible application of techniques such as dynamic imports and code modularization in Vuex state management. This paper outlines the design principles, implementation details, and experimental results of this method, evaluating its performance in a demonstrating Vue.js application. Experimental results demonstrate that using this plugin mechanism for dynamic lazy loading in Vuex effectively reduces initial load times and improves application response speed, thereby enhancing the user experience.