簡述vue項目性能優化！！！

1、代碼層面的優化

• 使用 v-if 與 v-show 減少初始化渲染和切換渲染的性能開銷；（v-if其實是重復的銷毀與創建，v-show只是基於簡單的CSS進行切換）
• v-for 加上 key提高 Diff 算法的速度；
• 圖片的大小優化以及懶加載（vue-lazyload）；
  • 不同格式的圖片對比

                   

• • jpg圖片常見的壓縮工具：jpegtran  
  • png圖片常見的壓縮工具：tinypng、node-pngquant-native    
  • GIf圖片支持完全透明與不透明，不適合存儲彩色，適合動畫與圖標；
  • 為什么不使用base64？
    • 將css文件的體積失去控制；
    • 瀏覽器的資源緩存策略無用話；
    • 低版本瀏覽器的兼容問題；
    • 不利於進行開發和調試；
  • SVG最大的缺點就是渲染成本比較高；
• 使用防抖（在一定時間內，連續觸發，只會執行一次）與節流（在一定時間內，只會執行一次）；

2、項目打包的優化

• 優化對比工具：webpack有一種可視化的打包分析工具：webpack-bundle-analyzer ，在vue.config.js中引入，代碼如下：npm run build的時候會出現打包分析圖

  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  
  module.exports = {
  configureWebpack: {
          plugins: [
              new webpack.ProvidePlugin({
                  $: "jquery",
                  jQuery: "jquery",
                  "window.jQuery": "jquery",
                  _: "lodash"
              }),
              new BundleAnalyzerPlugin()
          ]
      }        
  }

• 路由的懶加載
  • () =>import('url')  優點：每個組件的代碼都被打包成對應的js文件，加載組件時會對應加載js文件，或許你看這些js文件名會感到混亂，不能和項目中的組件一一對上，現在教你一個小技巧。 webpackChunkName ：chunk文件的名稱。[request]表示實際解析的文件名。

    import(/* webpackChunkName: "home" */ '../views/Home.vue')

    • 遇到的問題，懶加載失效，加載一些不需要的css與js文件：

      原因：
      Webpack默認開啟了“prefetch”選項，即預載功能，可以在配置中關閉
      
      prefetch空閑加載，
      prefetch會在頁面加載完成后，利用空閑時間提前加載獲取用戶未來可能會訪問的內容。
      
      preload：用來指定頁面加載后很快會被用到的資源，所以在頁面加載的過程中，我們希望在瀏覽器開始主體渲染之前盡早 preload
      
      關閉：vue.config.js文件中
      module.exports = {
        chainWebpack: config => {
              config.module
                  .rule('iview')
                  .test(/iview.src.*?js$/)
                  .use('babel')
                  .loader('babel-loader')
                  .end()
              Object.keys(pages).forEach(page => {
                  config.plugins.delete(`preload-${page}`)
                  config.plugins.delete(`prefetch-${page}`)
              })
          }
      }

  • resolve =>require(['url'],resolve)   缺點：異步引入組件，通過Webpack4打包，所有組件的代碼被打包成一個js文件
• 利用externals提取第三方依賴並用CDN引入，像vue.js 、vuex.js 、vue-router.js 等這些外部庫，基本不會變的，如果將它們獨立出來單獨加載就能利於瀏覽器的緩存機制，不用每次都重新加載這些庫js，並且大大的減少了打包的vendor.js文件。                                                                                                                                                                    但是需要注意的是：雖然可以優化首屏加載速度，但是由於靜態資源分離，也會增加http請求數量。所以如果是小項目，最好就不要用externals屬性，因為小項目打包的出來的vender.js體積不大，建議項目體量較大的項目再用比較合適。並且CDN具有不穩定性，如果掛了，我們的系統將會崩潰；
• 使用SplitChunks
• 使用mini-css-extract-plugin插件提取組件的CSS樣式到一個單獨的CSS文件中(加上此插件熱更新失效，因為二者不兼容)

  module.exports = {
     
     css : {
         extract ：true //在生產環境下默認為true，在開發環境下默認是false
   
     }
  
  }

• 使用OptimizeCssnanoPlugin插件壓縮和去重css樣式文件

  安裝：
     cnpm  i  --save-dev   @intervolga/optimize-cssnano-plugin
  
  使用：
     const OptimizeCssnanoPlugin = require('@intervolga/optimize-cssnano-plugin');
  module.exports={
      configureWebpack:config =>{
          return {
              plugins:[
                  new OptimizeCssnanoPlugin({
                      sourceMap: false,
                      cssnanoOptions: {
                          preset: [
                              'default',
                              {
                                mergeLonghand: false,  //合並屬性
                                cssDeclarationSorter: false  //根據css的屬性名稱進行排序
                              }
                          ]
                      },
                  }),
              ]
          }
      }
  }

• 開啟optimization.minimize來壓縮js代碼

  使用
  module.exports={
      configureWebpack:config =>{
          return {
              optimization:{
                  minimize: true  //在生產環境中默認為 true ，開啟壓縮js代碼，在開發環境中默認為false
              }
          }
      }
  }

• 使用image-webpack-loader壓縮圖片

  module.exports = {
      chainWebpack: config =>{
          config.module
              .rule('images')
              .use('imageWebpackLoader')
              .loader('image-webpack-loader')
      },
  }

3、項目部署的優化

• Gzip壓縮
  • 查看gzip壓縮是否開啟方法：查看響應頭部

                   

• • 在Nginx中開啟gzip壓縮，不然瀏覽器加載的還是未壓縮的資源

    在nginx/conf/nginx.conf中配置
    
    http {
        gzip  on;
        gzip_min_length 1k;
        gzip_comp_level 5;
        gzip_types application/javascript image/png image/gif image/jpeg text/css text/plain;
        gzip_buffers 4 4k;
        gzip_http_version 1.1;
        gzip_vary on;
    }

  • webpack上開啟gzip壓縮

    安裝
    npm/cnpm  i compression-webpack-plugin --save-dev
    
    使用
    const CompressionPlugin = require("compression-webpack-plugin")
    module.exports = {
       
        configureWebpack: config => {
         //生產環境，開啟js\css壓縮
        if (process.env.NODE_ENV === 'production') {
            config.plugin('compressionPlugin').use(new         
                   CompressionPlugin({
                      test: /\.js$|.\css|.\less/, // 匹配文件名
                      threshold: 10240, // 對超過10k的數據壓縮
                      deleteOriginalAssets: false // 不刪除源文件
                   }))
             }
        }
    
    }     

4、參考文檔：

• 常見的圖片打包工具： https://blog.csdn.net/weixin_43550660/article/details/104190896
• external結合cdn：https://blog.csdn.net/sixam/article/details/106058083
• https://www.jianshu.com/p/ef44aaa41fe8