Vue+VueRouter+Nginx+CDN 項目優化實際總結

時間 2019-11-15

標籤 vue+vuerouter+nginx+cdn vue vuerouter nginx cdn 項目優化實際總結欄目 Nginx 简体版

原文原文鏈接

使用場景：目前這個項目要嵌入到APP中使用，項目用到router、vuex、axios等
目前現狀：首次加載很是緩慢，等待時間超過8秒鐘

咱們目的：減小包體積、減小http請求次數，同時保證代碼可用性、維護性、不變更業務代碼javascript

路由按需加載

webpack默認將全部js源代碼打包成一個js文件，致使JS包會變得很是大，影響頁面首次加載速度
按需加載能把不一樣路由對應的組件分割成不一樣的代碼塊，而後當路由被訪問的時候才加載對應組件的js文件css

const home = () => import('@views/home/home')
// 或者
const home = (resolve) => {
    import('@views/home/home').then((module) => {
      resolve(module)
    })
}

部分走CDN

CDN是構建在網絡之上的內容分發網絡，依靠部署在各地的邊緣服務器，經過中心平臺的負載均衡、內容分發、調度等功能模塊，使用戶就近獲取所需內容，下降網絡擁塞，提升用戶訪問響應速度和命中率。
若是公司沒有考慮CDN，能夠酌情將例如 vue vux vue-router 等不變更的資源使用第三方免費 CND 引入，並添加本地 fallback

//在vue.config.js中配置
configureWebpack: config => {
    if (isProd != 'development') {
        config.externals = {
            vue: 'Vue',
            'vue-router': 'VueRouter',
            vuex: 'Vuex',
        }
    }
}

在public/index.html
<body>
    <div id="app"></div>
    <% if (VUE_APP_ENV != "development") { %>
        <!-- 運行時依賴 -->
        <script src="//cdn.staticfile.org/vue/2.5.17/vue.runtime.min.js" type="text/javascript"></script>
        <script src="//cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js" type="text/javascript"></script>
        <script src="//cdn.staticfile.org/vuex/3.0.1/vuex.min.js" type="text/javascript"></script>
        <script>
            // 當cdn資源失效時，加載本地資源
            window.Vue || document.write('<script src="./vue.min.js"><\/script>');
        </script>
    <% } %>
</body>

nginx壓縮

目前有兩種壓縮方式，nginx壓縮，客戶端打包壓縮在上傳
1.nginx壓縮
客戶端啥都不用作直接上傳打包的代碼便可
就是每次請求時服務器先壓縮再返回資源，對服務器性能有必定消耗html

nginx.conf文件
http{
    #開啓服務端壓縮-損耗服務器cpu 
    gzip on; #開啓gzip
    gzip_min_length 10k; #設置容許壓縮的頁面最小字節數; 這裏表示若是文件小於10個字節，就不用壓縮，由於沒有意義，原本就很小
    gzip_buffers 4 16k; #設置壓縮緩衝區大小，此處設置爲4個16K內存做爲壓縮結果流緩存
    gzip_comp_level 3; #壓縮級別，1-10，數字越大壓縮的越好，也越佔用CPU
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript; #制定壓縮的類型,線上配置時儘量配置多的壓縮類型!
    gzip_vary on; #選擇支持vary header；改選項可讓前端的緩存服務器緩存通過gzip壓縮的頁面; 這個能夠不寫，表示在傳送數據時，給客戶端說明我使用了gzip壓縮
    gzip_disable "MSIE [1-6]\."; #配置禁用gzip條件，支持正則。此處表示ie6及如下不啓用gzip（由於ie低版本不支持）
}

2.客戶端打包壓縮在上傳
在打包是須要配置vue.config.js前端

//須要安裝 npm i compression-webpack-plugin -D
const CompressionWebpackPlugin = require('compression-webpack-plugin');
if (process.env.NODE_ENV === 'production') {
    return {
         plugins: [
               new CompressionWebpackPlugin({
                   algorithm: 'gzip',
                   test: /\.(js|css)$/,// 匹配文件名
                   threshold: 10240, // 對超過10k的數據壓縮
                   deleteOriginalAssets: false, // 不刪除源文件
                   minRatio: 0.8 // 壓縮比
                })
          ]
     }
}

打包出來的可能會帶有.gz的文件夾vue

nginx配置一句話便可java

nginx.conf文件
http{
    gzip_static on; #靜態壓縮
}

nginx設置緩存

#server模塊通常對應在相對應的xxx.conf中,不建議都寫在nginx.conf中
server{
    location ~* ^.+\.(ico|gif|jpg|jpeg|png)$ { 
        access_log   off; 
        expires      30d; // 天
    }

    location ~* ^.+\.(css|js|txt|xml|swf|wav)$ {
        access_log   off;
        expires      24h; // 小時
    }

    location ~* ^.+\.(html|htm)$ {
        expires      1h;
    }
}