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加速、壓縮代碼等方法，你們應該都很熟悉了，這裏就不在一一闡述了。若是你們還有好的優化方案，歡迎你們留言交流~