Vue项目优化

在平常的Vue项目开发中，随着业务的日渐复杂，代码量的日益增长，随之带来的问题就是打包后的vendor.js体积过大，致使加载时空白页时间过长，给用户的体验太差。为此咱们须要减小vendor.js的体积，从本质上来解决这种问题。

这里大概例举几个在项目中实际用到过的方法，优化后的js大概缩小了50%左右，效果仍是挺明显的。

1，webpack externals

为何要配置externals

官方解释：webpack 中的 externals 配置提供了不从 bundle 中引用依赖的方式。解决的是，所建立的 bundle 依赖于那些存在于用户环境(consumer environment)中的依赖。

好比咱们会在项目中引用各类第三方的js文件，如 jquery，vue，axios 等，若是咱们在打包时排除这些依赖，则能够大大减少文件的大小，提升页面加载速度，配置方法以下：

// 在 index.js 中引入资源
<script src="jquery.js"></script>
<script src="vuex.js"></script>


module.exports = {
     ...
     output: {
       ...
     },
     externals : {
       jquery: 'jQuery'
       'vue': 'Vue',
     }
     ...
   }

这样就剥离了那些不须要改动的依赖模块，换句话，下面展现的代码还能够正常运行：

import $ from 'jquery';
import Vue from 'vue'

这样不只以前对第三方库的用法方式不变，还把第三方库剥离出webpack的打包中，从而加速webpack的打包速度。

2，组件按需加载

这也是能够优化的点。若是频繁使用了第三方组件/UI库，如个人项目中常用了 element-ui 组件库，若是所有引入，项目体积很是大，这时能够按需引入组件。

首先，咱们须要安装 babel-plugin-component

npm install babel-plugin-component -D

而后，将.babelrc 修改成：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

而后引入部分组件，这样一来，就不须要引入样式了，插件会帮咱们处理。

// main.js
import Vue from 'vue'
import { Dialog, Loading } from 'element-ui'

[Dialog, Loading].forEach((comp) => {
    Vue.use(comp);
})

3，路由懒加载

当打包构建应用时，JavaScript 包会变得很是大，影响页面加载。若是咱们能把不一样路由对应的组件分割成不一样的代码块，而后当路由被访问的时候才加载对应组件，这样就更加高效了。

方法一

const login = () => import('@/components/login')
const router = new VueRouter({
  routes: [
    { path: '/login', component: login }
  ]
})

注意：这个时候咱们须要安装 babel-plugin-syntax-dynamic-import 插件，这样打包时才会识别该语法

方法二

有时候咱们想把某个路由下的全部组件都打包在同个异步块 (chunk) 中。只须要使用 命名 chunk，一个特殊的注释语法来提供 chunk name (须要 Webpack > 2.4)。

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

4，数据缓存——keep-alive

VUE2.0中提供了一个keep-alive方法，能够用来缓存组件，避免屡次加载相应的组件，减小性能的消耗。

举例：用户浏览A页面，待A页面的资源都加载完毕了，用户经过路由跳转到了B页面，以后又退回到了A页面，若是没有特殊处理的话，A页面的资源会从新加载一遍，形成资源浪费；若咱们作了缓存，则能够减小请求的次数，极高用户体验。

1，缓存部分页面

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

// router 设置以下
routers:[
    {   path: '/home',
        name: home,
        meta: {keepAlive: true}      //  设置为true表示须要缓存，不设置或者false表示不须要缓存              
    }
]

2，缓存组件

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>

// include 和 exclude 属性容许组件有条件地缓存。两者均可以用逗号分隔字符串、正则表达式或一个数组来表示
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

除了以上的优化方法外，还有常规的 图片的压缩合并、CDN加速、压缩代码等方法，你们应该都很熟悉了，这里就不在一一阐述了。若是你们还有好的优化方案，欢迎你们留言交流~