欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-03-07 14:32:48
...
本篇文章给大家带来的内容是关于如何使用Webpack的代码分离实现Vue的加载,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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

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

  • Vue组件,也称为异步组件

  • Vue-Router

  • Vuex

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

在Vue组件中进行懒加载

在Eggheads中有关于使用Vue异步组件实现按需加载组件的解释。

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

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

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

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

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

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

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

在Vue router中进行懒加载

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

// 不再使用 import Login from './login'
const Login = () => import('./login')

new VueRouter({
  routes: [
    { path: '/login', component: Login }
  ]
})

在Vuex中进行懒加载

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

const store = new Vuex.Store()

...

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

总结

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

相关推荐:

系统归纳JS常用的方法整理(收藏)

webpack4和react 搭建多页面应用的实现方法

以上就是如何使用Webpack的代码分离实现Vue的加载的详细内容,更多请关注其它相关文章!