前端優化

1、加載速度優化

　　精靈圖

　　base64

　　iconfont替代圖片

　　代碼壓縮

　　圖片、視頻壓縮

　　cdn緩存

　　路由懶加載

原理：將每一個組件都打成一個包，首頁的大文件能夠進行分批引入 實現：main.js中將全部的同步引入組件的方式改成異步引入組件，即： import Home from "pages/Home"改成const Home=()=>import("pages/Home")

 

　　

2、運行效率優化

　　減小http請求----<keep-alive></keep-alive>

　　使用：

　　　　<keep-alive>
     　　　　<router-view></router-view>
　　　　</keep-alive>

　　原理：使用keep-alive包裹的組件在建立以後不會經歷銷燬，給不用頻繁請求數據的組件包裹

　　屬性：include：包括，表示須要緩存的組件----include="a,b"　　include="/a|b/"　　include="["a","b"]"

　　　　　exclude：除了，表示不須要緩存的組件，不能和include一塊兒使用

　　　　　max：最多能夠緩存多少個組件

　　增長兩個生命週期：

　　　　activated：進入該組件時觸發，能夠用來作數據的請求

　　　　deactivated：離開該組件時觸發

 

　　數據本地化

　　　　cookie、localStorage、sessionStorage

　　　　localStorage的二次封裝：

　　　　　　一、兼容

　　　　　　二、簡化讀取與存儲：JSON的兩個方法

　　　　　　三、設置時間限制

        export default{ set(key,data,time){ let obj={ data=data, ctime:(new Date()).getTime(),//時間戳，同Date.now()
                    express:1000*60*60//設置過時時間一個小時
 } localStorage.setItem(key,JSON.stringify(obj)); }, get(key){ let obj=JSON.parse(localStorage.getItem(key)); let getItem=(new Date()).getTime(); if(getItem-obj.ctime>=express){ localStorage.removeItem(key); return null; }else{ return obj.data; } } }

 

　　圖片懶加載----可使用ui框架，也可使用vue-lazyload插件

　　　　vue-lazyload插件的使用：

　　　　　　一、下載依賴：cnpm i vue-lazyload

　　　　　　二、main.js中：

    　　　　　　import VueLazyload from 'vue-lazyload' 　　　　　　Vue.use(VueLazyload, { 　　　　　　 preLoad: 1.3, 　　　　　　 error: require("./assets/vue_lazyload.jpg"), 　　　　　　loading: require("./assets/vue_lazyload.jpg"), 　　　　　　 attempt: 1 　　　　　　})　　

　　　　　　　　三、在須要圖片懶加載的頁面中，使用v-lazy指令替換:src

　　　　

 

3、用戶體驗優化

　　加載loading條：

　　　　一、新建Loading.vue組件

<template>
    <div class="loading">
        <img src="/loading.gif"><!-- 圖片在public目錄下 -->
    </div>
</template>
<script> export default { } </script>
<style lang="less" scoped> @import "~style/index.less"; .loading{ position: fixed; background-color: rgba(0,0,0,0.6); width: 100%; .top(0); .bottom(0); display: flex; align-items: center; justify-content: center; img{ .w(50); .h(50); } } </style>

　　　　二、在須要網絡請求的組件中引入loading組件，loading組件爲一個div，設置v-if="loading"，loading在data的初始值爲true。其餘內容爲另外一個div包裹，設置v-else。當請求完數據後，設置this.loading=false。