Home > Article > Web Front-end > How to use Webpack's code separation to implement Vue loading
The content of this article is about how to use Webpack's code separation to implement Vue loading. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
When a Vue project becomes very large, use the code separation function of Webpack to Vue Components
, routes
or Vuex
code is separated and loaded on demand, which will greatly improve the loading speed of the first screen of the App.
In Vue projects, we can use lazy loading and code separation functions in three different situations:
Vue components, also known as asynchronous components
Vue-Router
Vuex
What the three have in common is the use of dynamic import , which was supported in the second version of Webpack.
Lazy loading in Vue components
In Eggheads, there is an explanation about using Vue asynchronous components to load components on demand.
To implement asynchronous components, you only need to use the import
function to register the component:
Vue.component('AsyncCmp', () => import('./AsyncCmp'))
You can also use the local registration method:
new Vue({ // ... components: { 'AsyncCmp': () => import('./AsyncCmp') } })
Use The arrow function points to the import
function, and Vue
will execute the code that requests to load the component when the component is needed.
If the imported component is exported using a named method, you can use object destructuring in the return value of Promise
to load the component on demand. The following is an example of loading KeenUI's UiAlert component:
components: { UiAlert: () => import('keen-ui').then(({ UiAlert }) => UiAlert) }
Lazy loading in Vue router
Vue router natively supports lazy loading. In the same way as lazy loading of components, the import
function is used. For example, we want to lazily load the Login
component under the /login
route.
// 不再使用 import Login from './login' const Login = () => import('./login') new VueRouter({ routes: [ { path: '/login', component: Login } ] })
Lazy loading in Vuex
Vuex’s registerModule
method allows us to dynamically create Vuex modules. If we use the import
function to return the module as the payload in Promise
, lazy loading is achieved.
const store = new Vuex.Store() ... // 假设我们想加载'login'这个模块 import('./store/login').then(loginModule => { store.registerModule('login', loginModule) })
Summary
Lazy loading is very simple in Vue Webpack. Quickly use the methods learned above to separate the code of your Vue project and load them on demand when they are needed. This can significantly reduce the time of loading the first screen of the application.
Related recommendations:
System summarizes commonly used JS methods to organize (collect)
Webpack4 and react implementation methods for building multi-page applications
The above is the detailed content of How to use Webpack's code separation to implement Vue loading. For more information, please follow other related articles on the PHP Chinese website!