使用Webpack的代码分离实现Vue懒加载-白红宇

使用Webpack的代码分离实现Vue懒加载

阅读量：6823 次

发布时间：2019-06-26

本文共 1227 字，大约阅读时间需要 4 分钟。

当一个Vue的项目体积变得十分庞大的时候，使用Webpack的代码分离功能将Vue Components，routes或Vuex的代码进行分离并按需加载，会极大的提高App的首屏加载速度。

在Vue的项目中，我们可以在三种不同的情况下使用懒加载和代码分离功能：

三者的共同点都是使用的，这在Webpack的第二个版本就开始被支持。

在Eggheads中有关于的解释。

实现异步组件只需要使用import函数去注册组件即可：

Vue.component('AsyncCmp', () => import('./AsyncCmp'))

也可以使用本地注册组件的方式：

new Vue({  // ...  components: {    'AsyncCmp': () => import('./AsyncCmp')  }})

使用箭头函数指向import函数，Vue将会在需要该组件的时候才执行请求加载该组件的代码。

如果导入的组件是使用命名的方式进行导出的，你可以在Promise的返回值中使用对象解构的方式实现按需加载组件。下面是加载的 UiAlert组件的例子：

components: {  UiAlert: () => import('keen-ui').then(({ UiAlert }) => UiAlert)}

Vue router在原生支持。和懒加载组件的方式一样，都是使用import函数。例如我们想在/login这个路由下懒加载Login组件。

// 不再使用 import Login from './login'const Login = () => import('./login')new VueRouter({  routes: [    { path: '/login', component: Login }  ]})

Vuex的registerModule方法允许我们动态的创建Vuex的模块。如果我们使用import函数在Promise中返回模块作为载荷（payload），就实现了懒加载。

const store = new Vuex.Store()...// 假设我们想加载'login'这个模块import('./store/login').then(loginModule => {  store.registerModule('login', loginModule)})

在Vue + Webpack中是懒加载十分简单。赶快使用上面学习到的方法将你的Vue项目进行代码分离并在它们需要的时候进行按需加载，这样可以显著减少应用首屏加载的时间。

原文链接：

转载于:https://www.cnblogs.com/lovellll/p/10180137.html

你可能感兴趣的文章