vue 項目優化

1. productionSourceMap

• productionSourceMap是使用vue-cli創建項目的時候在condif/index.js（vue-cli3中是vue.config.js） 文件中的一個屬性。一般情況下我們是要將這個屬性設置爲false（初始值是true）,如果設置的初始值是true，我們項目上線之後再生產環境可以看到所有的源碼。所以我們爲了安全還是要將其設置爲false的。

2. 使用webpack進行優化，compression-webpack-plugin 開啓gzip

• 打包的時候開啓gzip可以大大減少體積，非常適合線上部署，
• 在vue項目配置中設置productionGzip:true;
• 設置需要壓縮的文件productionGzipExtensions: [‘js’, ‘css’,‘svg’],這個數組中的可以添加你想要的壓縮的文件後綴。
• 設置webpack.prod.config.js文件中的plugins,添加下面的代碼。（一般情況下使用vue-cli2.x搭建的項目都是有這段代碼的）

    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })

• 查看壓縮之後的大小情況可以使用webpack-bundle-analyzer插件（vue-cli2.x項目中也是有的） “report”:“npm run build --report=true”
• 注意點：使用這個compression-webpack-plugin插件的時候會有版本的問題。使用的時候注意：目前最新版需要運行在webpack4.0以上，如果你的webpack是3.x版本的，請安裝compression-webpack-plugin的1.x版本。

3. 對路由組件進行懶加載：

• 在路由配置文件中：如果使用同步的方式加載組件，在首屏加載的時候會對網絡資源加載的比較多，資源比較大。加載速度比較緩慢。所以這個時候我們可以通過懶加載路由的方式來優化。按需加載會j加速首屏渲染。
• 按需加載也有一些問題：打包的時候項目不會把所有的js打包進app.[hash].js裏面，可以減少app.[hash].js的體積，缺點是會將其他的js分開打包。造成多個js文件。會有多次http請求。如果項目比較大，需要注意懶加載的效果。
• https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#%E6%8A%8A%E7%BB%84%E4%BB%B6%E6%8C%89%E7%BB%84%E5%88%86%E5%9D%97
• 注意：在開發環境的時候不要使用懶加載，懶加載頁面太多會造成wwebpack熱更新太慢。所以我們只在生產環境使用懶加載。

  // 懶加載實現
  import Vue from "vue";
  import Router from "vue-router";
  Vue.use(Router);
  export default new Router({
  mode: "history",
  base: "/facex/district/",
  routes: [
    { path: "/", redirect: "index" },
    {
    path: "/",
    name: "home",
    component: resolve=>require(["@/views/home"],resolve),
    children: [
      {
        // 員工查詢
        path: "/employees",
        component: resolve=>require(["@/components/employees"],resolve)
      },
    {
      // 首頁
      path: "/index",
      component: resolve=>require(["@/views/index"],resolve)
    }]
  })    

4. 源碼優化(這部分一般是一些代碼規範的問題，日常開發中多注意一些)

(1)：v-if和v-show的使用:

1. v-if類似於懶加載，只有爲true的是時候纔會渲染，爲false的時候不會佔用佈局空間。

• 在首屏的時候建議還是使用v-if,因爲我們首屏一般追求的是用戶的初次體驗，所以儘可能的減少一開始DOM的數量，從而提交首屏的渲染速度
• 在模板中v-if的判斷儘量少用表達進行判斷，最好還是將這部分寫入到computed或者是methods中。封裝成爲一個方法。這樣更加有利於我們進行判斷。

2. v-show狀態無論是false還是true，都會進行渲染，並佔用佈局空間。需要頻繁調用，不涉及權限的時候可以使用v-show，可以減少系統的切換開銷。

(2): 遍歷渲染的時候設置唯一key值:

1. 遍歷渲染的時候設置唯一key值,這樣方便vuejs內部機制精準找到該條數據。當數據狀態更新的時候可以快速替換,key的作用主要是爲了高效的更新虛擬DOM。

(3): 組件化

1. 我們將項目中的組件細分，按鈕組件，表格組件，分頁組件等等。細分成一個一個單獨的組件，這樣渲染起來比較快。

(4)：減少監聽的數據。

1. vue中使用watch監聽數據。當父組件中的某個數據變化的時候，可能會有一個或者多個子組件使用watch監聽這個改變的數據。當watch監聽的數據量比較小的時候影響微乎其微，但是當項目比較大的時候，監聽的數據比較多，這個時候就會出現卡頓的問題。如果我們需要數據全局變化，我們可以使用時間中央總線，或者是vuex進行處理。

(5)：資源按需加載

1. 圖片的懶加載:

• 使用 vue-lazyload 對圖片進行懶加載。 https://www.npmjs.com/package/vue-lazyload

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload,{
  loading: require(),
  error:require(),
})

<!--用法1:圖片標籤直接使用：-->
<img v-lazy="'/static/img/' + item.productImage" :key="'/static/img/' + item.productImage"> //將 :src 屬性直接改爲v-lazy, :key是爲了防止刷新頁面或圖片更改時圖片不更新

<!--用法2：標籤背景圖片使用：-->
<div style="width:100px;height:100px;" v-lazy:background-image="{src: item.imgpath}"></div>

<!--用法3：多個img標籤的時候使用：-->
<div v-lazy-container="{ selector: 'img', error: 'error.jpg', loading: 'loading.jpg' }">
  <img data-src="www.baidu.com/img1.jpg">
  <img data-src="www.baidu.com/img2.jpg">
  <img data-src="www.baidu.com/img3.jpg">  
</div>

2. 骨架屏：一般我們開發一些首頁的內容會很多。會出現黑/白屏或者頁面不急混亂的問題。這個時候我們可以使用骨架屏，當數據還沒有出現的時候有一個大概的框架。然後結合懶加載。用戶體驗會好一點。

(6)：SSR服務端渲染

1. 當項目比較大的時候，我們可以使用服務端渲染。但是目前服務端渲染的有一定的侷限性。以後再補充。

• 想了解的可以看下：https://cn.vuejs.org/v2/guide/ssr.html

Vue項目優化的辦法還有很多很多。上面所提及的只是最爲基礎的幾種，隨着業務的需求以後還會去探索更多的優化方法。

最近一直在思考我工作的這一年中的問題，感覺自己還是缺少總結，一個項目做過去就過去了，沒有提煉出這個項目所帶給我的深層的經驗。這也導致了我在面試準備的時候回想起自己做過的項目感觸深刻的技術點很少。希望如果和我有同樣問題的小夥伴引以爲戒！！！