关于vue的懒加载实践

wangzy2019 发布于2019-08-22 15:09 / 744人阅读

摘要：最近在研究的按需加载，好奇怪，之前好像并没有看到的官文里面有这一部分，是我看差了吗尬笑其实只需要看官文就可以了，里面有懒加载的讲解，并且附带了详细内容的连接。所以很大程度上优化了页面的初始加载速度。只是为了测试按需加载随便写的而已。

最近在研究vue的按需加载，好奇怪，之前好像并没有看到vue的官文里面有这一部分，是我看差了吗hahaha~尬笑~

其实只需要看vue-router官文就可以了，里面有懒加载的讲解，并且附带了详细内容的连接。一个一个看过去，很容易操作了。
于是我看了一下。做个记录，防止忘记了又要重新看一遍。
首先是使用的vue-cli构建的简单项目
把多余的东西都删掉，剩下一个HelloWord.vue
然后修改目录接口，新建一个pages目录，把HelloWord.vue放进去，components目录新建两个文件,test1.vue test2.vue。pages目录新建一个Page2.vue
那么就用这四个文件来测试一下

pages目录下:
HelloWord.vue
Page2.vue

components目录下:
test1.vue
test2.vue

修改路由router.js内容为:

import Vue from "vue"
import Router from "vue-router"
// 这里用到了webpack2的import()它会返回一个promise
let HelloWorld = () => import("@/pages/HelloWorld")
let Page2 = () => import("@/pages/Page2")
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: "/",
      name: "HelloWorld",
      component: HelloWorld
    },
    {
      path: "/page2",
      name: "Page2",
      component: Page2
    }
  ]
})

然后改写HelloWord.vue和Page2.vue的组件引入形式，也是使用import(),
HelloWord.vue

最后是根据webpack的分块加载形式修改webpack设置
在根目录下的build/webpack.prod.confj.js
添加new webpack.optimize.CommonsChunkPlugin("common.js")

然后打包就可以看到效果了。
打包后的文件:

那些[number].[hash].js的文件就是页面分块后的文件了，加载页面时出了那些公共模块，会对应只加载响应页面模块。并且缓存起来。所以很大程度上优化了页面的初始加载速度。

最后Page2.vue, test1.vue, test2.vue的内容就不贴了，其实是很简单是实例来的。只是为了测试按需加载随便写的而已。

参考：
vue-router
webpack官文
示例博文

超融合服务器混合云 js实现数据的懒加载图片 vue20开发实践学习实践架构实践

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

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

vue项目首页加载速度优化

摘要：凡是做的项目，特别是移动端的项目，首屏加载速度必定是一个绕不过去的话题。大家知道这些依赖库的文件都会被一起打包到那个文件里面，如果这些你的第三方依赖库很多，很大的话，那就会导致这个文件很大，那首屏加载的速度肯定会被拖慢。凡是做SPA的项目，特别是移动端的SAP项目，首屏加载速度必定是一个绕不过去的话题。接下来我就我们项目里的一些实践来做一下总结。希望抛砖引玉，如果各位有更好的方案，不...

rickchen 2019-08-21 17:06 评论0 收藏0
前端周报：前端面试题及答案总结；JavaScript参数传递的深入理解

摘要：前端面试题及答案总结掘金技术征文金三银四，金九银十，用来形容求职最好的几个月。因为的存在，至少在被标准化的那一刻起，就支持异步编程了。然而异步编程真正发展壮大，的流行功不可没。 showImg(https://segmentfault.com/img/bVVQOH?w=640&h=319); 1、2017前端面试题及答案总结 |掘金技术征文金三银四，金九银十，用来形容求职最好的几个月...

ermaoL 2019-08-21 16:46 评论0 收藏0
Vue SPA(单页应用)首屏优化实践

摘要：原文首发代码压缩如果你用的是服务器，请修改配置文件其他类似在里加入开启或者关闭模块，这里使用表示启动设置允许压缩的页面最小字节数默认值是，不管页面多大都压缩设置系统获取几个单位的缓存用于存储的压缩结果数据流代表以为单位，按照原始数据大原文首发：　https://shuirong.github.io/ 1.代码压缩(gzip) 如果你用的是nginx服务器，请修改配置文件(其他web ...

wall2flower 2019-08-21 11:41 评论0 收藏0
「Vue实践」武装你的前端项目

摘要：所有的高阶抽象组件是通过定义选项来声明的。所以一般在生命周期或者中，需要用实例的方法清除可当你有多个时，就需要重复性劳动销毁这件事儿。更多的配置请看双端开启开启压缩的好处是什么可以减小文件体积，传输速度更快。本文目录接口模块处理 Vue组件动态注册页面性能调试：Hiper Vue高阶组件封装性能优化：eventBus封装 webpack插件：真香本文项目基于Vue-Cli3，想知...

曹金海 2019-05-23 17:30 评论0 收藏0
图片的预加载和懒加载

摘要：图片的预加载是提升用户体验而损失性能的一种做法，而懒加载的性能就比较好了，所以将两个结合起来放到程序中是一种不错的选择。最近在做H5滑页时，遇到一些比较大的场景，动辄二十、三十页，而图片更是可恨的能达到上百个，所以就会导致场景在加载的时候遇到网速比较慢的时候，用户等待的时间特别长，这样的话，就有可能导致一部分的用户没有耐心，而丢失这部分用户，于是就有了这里的图片的预加载和懒加载，记个...

SwordFly 2019-08-21 10:37 评论0 收藏0