Vue路由懒加载

前端开发作者： 2024-08-21 16:30:01

Vue路由懒加载对于SPA单页应用，当打包构建时，JavaScript包会变得非常大，影响页面加载速度，将不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这就是路由的懒加

Vue路由懒加载

Vue异步组件

Vue.component("async-example",function (resolve,reject) {
  setTimeout(function() {
    // 向 `resolve` 回调传递组件定义
    resolve({
      template: "<div>I am async!</div>"
    })
  },1000)
})

Vue.component("async-webpack-example",function (resolve) {
  // 这个特殊的 `require` 语法将会告诉 webpack
  // 自动将你的构建代码切割成多个包，这些包
  // 会通过 Ajax 请求加载
  require(["./my-async-component"],resolve)
})

Vue.component(
  "async-webpack-example",// 这个动态导入会返回一个 `Promise` 对象。
  () => import("./my-async-component")
)

{
  path: "/example",name: "example",//打包后，每个组件单独生成一个chunk文件
  component: reslove => require(["@/views/example.vue"],resolve)
}

动态import

//默认将每个组件，单独打包成一个js文件
const example = () => import("@/views/example.vue")

const example1 = () => import(/* webpackChunkName: "Example" */ "@/views/example1.vue");
const example2 = () => import(/* webpackChunkName: "Example" */ "@/views/example2.vue");

{
  path: "/example",//打包后，每个组件单独生成一个chunk文件
  component: () => import("@/views/example.vue")
}

webpack提供的require.ensure

// require.ensure(dependencies: String[],callback: function(require),chunkName: String)
{
    path: "/example1",name: "example1",component: resolve => require.ensure([],() => resolve(require("@/views/example1.vue")),"Example")
},{
    path: "/example2",name: "example2",() => resolve(require("@/views/example2.vue")),"Example")
}

https://github.com/WindrunnerMax/EveryDay

https://zhuanlan.zhihu.com/p/46843949
https://www.jianshu.com/p/c27b1640a01b
https://juejin.im/post/6844904025746309127
https://juejin.im/post/6844904013842874376
https://segmentfault.com/a/1190000011519350
https://cn.vuejs.org/v2/guide/components-dynamic-async.html
https://router.vuejs.org/zh/guide/advanced/lazy-loading.htm

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_66186.html