我的 vue 项目的优化总结

主要说的是，我在项目中，本身遇到的一些小问题和解决方案

图片 base64 问题

// 有一个 test 的组件
<template>
  <div class='icon'></div>
</template>
<style>
  .icon {
    background: url(../assets/test.png);
  }
</style>

// 而后有三个页面，引入了 test 组件
// h1.vue, h2.vue, h3.vue 分别都引入 test 组件
<template>
  <test></test>
</template>
<script>
import test from '@/components/test.vue'
// ...
</script>

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

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

import a from 'a.jpg'
<div style='backgroundImage: url(a.jpg)'></div>

使用 keep-alive

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

// app.vue
<keep-alive :include="['a', 'b', 'c']">
  <router-view></router-view>
</keep-alive>

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

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

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

• include: 只有匹配的组件会被缓存
• exclude: 任何匹配的组件都不会被缓存

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

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

在 activated 或 deactivated 钩子函数事件中，使用 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 组件是要缓存的

<keep-alive :include='array'>
  <router-view></router-view>
</keep-alive>
// ...
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，甚至 一、2MB 大，而这个文件是全部依赖文件的集合，像 vue.js, vue-router.js, axios.js, mint-ui.js 等

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

externals 其实不少大神的优化贴都有写了，根据本身得体验，这里只是简单得说明

咱们在 index.html 引入两个 js

<script src="//cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src='//cdn.bootcss.com/mint-ui/2.2.3/index.js'></script>

在 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 ，除了第一次的渲染，后面就不会再次渲染了

<div v-once>{{ a }}</div>

<script>
// ...
data() {
  return {
    a: 1
  }
},
created() {
  this.a = 2
}
</script>

最后 div 仍是显示 1。这能够用于优化更新性能

总结

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