使用Webpack的代码分离实现Vue懒加载（译文）

SmallBoyO 发布于2019-08-23 10:42 / 2171人阅读

摘要：当一个的项目体积变得十分庞大的时候，使用的代码分离功能将，或的代码进行分离并按需加载，会极大的提高的首屏加载速度。如果我们使用函数在中返回模块作为载荷，就实现了懒加载。

当一个Vue的项目体积变得十分庞大的时候，使用Webpack的代码分离功能将Vue Components，routes或Vuex的代码进行分离并按需加载，会极大的提高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项目进行代码分离并在它们需要的时候进行按需加载，这样可以显著减少应用首屏加载的时间。

原文链接： Lazy Loading in Vue using Webpack"s Code Splitting

云服务器 GPU云服务器 js实现数据的懒加载图片懒加载懒加载异常 javascript懒加载

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96603.html

Vue.js应用性能优化：第二部分---路由懒加载和 Vendor bundle 反模式

摘要：现在，我们将更深入地研究，并学习用于分割应用程序最实用的模式。本系列文章基于对性能优化过程的学习。路径时才被下载。为了便于理解，文件名称并不是由生成的真实名称。接下来，我们将学习其他部分和单独的组件也能够从主文件分割出来并延迟加载。在前一篇文章中，我们学习了什么是代码分割，它是如何与 Webpack 一起工作的，以及如何在Vue应用程序中使用延迟加载。现在，我们将更深入地研究，并学习...

0x584a 2019-08-26 13:45 评论0 收藏0
JavaScript系列（四） - 收藏集 - 掘金

摘要：函数式编程前端掘金引言面向对象编程一直以来都是中的主导范式。函数式编程是一种强调减少对程序外部状态产生改变的方式。 JavaScript 函数式编程 - 前端 - 掘金引言面向对象编程一直以来都是JavaScript中的主导范式。JavaScript作为一门多范式编程语言，然而，近几年，函数式编程越来越多得受到开发者的青睐。函数式编程是一种强调减少对程序外部状态产生改变的方式。因此，...

cfanr 2019-08-20 16:33 评论0 收藏0
记一次vue-webpack项目优化实践【更新】

摘要：优化空间不大主要关注另外两个上面。目前为止，项目打包后的大部头就是，这个目前的优化空间较小。当然，从整体优化的大维度上来说优化的点还有很多，这个文章继续更新下去。项目现状项目是一个数据监测平台，引入了ehcart和three.js 负责项目的数据可视化；打包后，体积高达2.1M，这个体积相比于我的项目规模来说就显得稍有笨重了使用webpack-bundle-analyzer分析了...

ernest.wang 2019-08-23 15:13 评论0 收藏0
提升90%加载速度——vuecli下的首屏性能优化

摘要：如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。前言之前用vuecli做了个博客，是一个单页面项目，大概有十个路由直接npm run build打包出来，有一个1M的巨大js文件 showImg(https://segmentfault.com/img/bVbtXVk?w=1516&h=218); 先挂载到服务器上试试好家伙...

dreamtecher 2019-08-23 18:09 评论0 收藏0