资讯专栏INFORMATION COLUMN

个人 vue 项目的优化总结

taoszu / 2338人阅读

摘要:很多优化点都是根据实际情况入手,上面这几个,都是我在做项目时,感觉不合适而进行优化的,后面会持续补充下去

主要说的是,我在项目中,自己遇到的一些小问题和解决方案
图片 base64 问题
// 有一个 test 的组件



// 然后有三个页面,引入了 test 组件
// h1.vue, h2.vue, h3.vue 分别都引入 test 组件


第一次打包文件之后,三个页面的 js 文件,都会出现相同的一个 base64 图片

后面第二次打包使用 import 进行引用,或者直接在标签写死,就不会出现上面这种情况

import a from "a.jpg"
使用 keep-alive

使用 keep-alive 对某些页面进行缓存

// app.vue

  

router-view 父级,加上一层 keep-alive,再使用 include ,告诉 vue 有哪些页面需要缓存,就行了。

其中 a, b, c 是 .vue 文件的 name 属性值

keep-alive 标签,支持两个属性

include: 只有匹配的组件会被缓存

exclude: 任何匹配的组件都不会被缓存

会被缓存的页面(其实就是一个 vue 组件),离开时,vue 会在内部缓存当前组件的状态,下次再次进入这个页面,就会显示离开时的状态

如果有些需求,需要你在特定得状态下,才需要缓存,而在其他时间,进入页面都是保持最初的状态时,我们可以使用 vue 的一个方法,去销毁该组件,达到刷新的效果

activateddeactivated 钩子函数事件中,使用 this.$destroy() 这个方法进行销毁组件

使用 keepa-alive 的好处,缓存组件,的确是很好,我在项目体验中,更重要是缓存页面离开时的状态,这个真得非常棒。

比如我在一个支付页面,有 M 种状态,然后要用户去另外一个页面去设置密码后,才能支付(特定需求),这时不能用一个遮罩去挡住,而是真正得跳转另一个页面,然后用户在另外一个页面操作完后,跳回去支付页面,此时支付页面还是维持离开时的状态,大大减少了很多工作(可以用 vuex 实现此效果,不过有点麻烦)

而且配上钩子函数和 $destroy 销毁组件的方法,可以处理好各种情况

2018.01.15 更新

使用 $destroy 对组件进行销毁,会有个 BUG。

有三个页面 A,B,C。B 页面是要进行缓存的。B 页面,配置了 keep-alive

A -> B

B -> C(B 到 C 要进行缓存,所以不销毁)

C -> B (B 维持跳去 C 时的状态)

B -> A (不缓存)

A -> B

B -> C(B 到 C 要进行缓存,所以不销毁)

C -> B (这时候就会出问题了!,会触发 activated 和 created 两个钩子函数。在 vue 的 issue 中有人提出过这个问题,尤大也说了不支持。这里是链接)

解决方案:

我现在是把页面加进去 keep-alive 里面,然后离开时,判断下次进入要不要刷新页面。如果要刷新页面,手动把 state 更新…..超级麻烦,不优雅

2018.01.17 更新

有一个新的解决方案,动态的修改 include,达到更新的效果

比如,t1 组件是要缓存的


  

// ...
watch: {
  $route(to) {
    if (to.name === "t1") {
      this.array = "t1"
    }
  }
}

每次要去到 t1 页面,对页面设置为缓存。然后在 t1 页面要跳去其他页面时候,判断是否需要缓存页面,如果不需要,修改 array 这个值。而这个 array 值,应该存在 vuex 中,这样可以更好地处理它

代码分割

router.js 文件里

{ path: "/home", component: resolve => require(["@/module/home"], resolve) },
{ path: "/h1", component: resolve => require(["@/module/h1"], resolve) },
{ path: "/h2", component: resolve => require(["@/module/h2"], resolve) }

这里使用了 vue-router 的懒加载,结合 webpack 的代码分割,将代码按页面进行分割,达到懒加载效果。进入某个页面,会按需加载 js 文件,有效地降低首屏文件大小

但这里有个问题,如果某页面的 js 文件很大,用户在跳转页面时,会出现暂时性的白屏或者无法点击的情况,影响用户体验

这里我觉得就要根据项目情况去考虑了。在某个项目中,有5个页面是没用代码分割的,而这5个页面,浏览数会比较多,并且文件的大小相对会比较大。所以取消使用了代码分隔后,当用户首次点入这几个页面,就不会出现延迟的情况

当你这个页面使用了很多 icon ,经过 base64 转换后,这个 js 文件也会相对很大,是否不应该在页面的 js 文件出现 base64 ?提前把 base64 的图片加载了?

上面的操作都是为了提高用户的体验,这个要看情况而定了

使用代码分割,文件的大小,会稍微比不用的时候大一点

优化依赖文件

当我们 npm run build 后,通常可以看到一个依赖文件,有好几百 KB,甚至 1、2MB 大,而这个文件是所有依赖文件的集合,像 vue.js, vue-router.js, axios.js, mint-ui.js

这里我们可以使用 webpack 的 externals 进行优化,webpack 文档是这样说 externals: "防止将某些 import 的包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展依赖"

externals 其实很多大神的优化贴都有写了,根据自己得体验,这里只是简单得说明

我们在 index.html 引入两个 js


webpack.base.conf.js 里,添加一代代码

externals: {
  "vue": "Vue",
  "mint-ui": "MINT"
}

这样就能无缝切换,使用 cdn 去加载比较大的依赖文件,减少打包后的 bundle 文件大小

打包文件大小对比

没有使用 externals 的情况, vendor.js 文件是 307KB

使用 externals 的情况, vendor.js 文件是 107KB

这里面是去掉了 vue 和 mint-ui 两个 js 文件,而这两个 js 文件通过外链 cdn 进行引用,两个 js 文件大约都是 31KB 左右,这里面节省了 140KB 左右的大小

这样做,虽然加多了 HTTP 请求,但是不会影响并发的数量,而且大大减少了单个文件的大小,性能更好

在 ngrok 里运行时,会运行得更快(测试过)

使用 v-once

在 vue 文档中,是这样提示的:对低开销的静态组件使用 v-once

使用了 v-once ,除了第一次的渲染,后面就不会再次渲染了

{{ a }}

最后 div 还是显示 1。这可以用于优化更新性能

总结

以上的一些问题,在 PC 端好像影响不大,移动端的话,还是比较严重的。很多优化点都是根据实际情况入手,上面这几个,都是我在做项目时,感觉不合适而进行优化的,后面会持续补充下去~

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

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

相关文章

  • 个人分享--web前端学习资源分享

    摘要:前言月份开始出没社区,现在差不多月了,按照工作的说法,就是差不多过了三个月的试用期,准备转正了一般来说,差不多到了转正的时候,会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客,博文推荐分享给大家。 1.前言 6月份开始出没社区,现在差不多9月了,按照工作的说法,就是差不多过了三个月的试用期,准备转正了!一般来说,差不多到了转正的时候,会进行总结或者分享会议!那么今天我就...

    sherlock221 评论0 收藏0
  • 关于Vue2一些值得推荐文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    sutaking 评论0 收藏0
  • 关于Vue2一些值得推荐文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    khs1994 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<