1.因為官網圖片太多，伺服器頻寬又不夠，導致網頁載入很慢。20幾秒

打算把圖片放到七牛雲，發現七牛雲需要域名備案，（後面七牛雲回訪說可以提交工單申請國外的物件儲存不用備案。）

後面決定放到騰訊雲的cos上，有提供域名。有活動50g儲存空間，6個月免費，流量不算免費。

2.靜態圖片，直接上傳到騰訊雲的cos即可，還可以開通cdn加速。

3.後臺上傳圖片，使用th5.0框架。直接按照助騰訊提供的PHPSDK的文件進行操作。

通過composer安裝sdk。

安裝好後在vendor資料夾中出現qlcoud資料夾則說明安裝成功。

在控制器中無需引入（th5.0已經幫你引入了），直接按照文件案例進行呼叫即可。（

4.

依照平時上傳圖片的方式，獲取路徑上傳到騰訊雲cos即可。

上傳成功的返回，$res['Location']即可獲取cos的圖片路徑。

5.vue打包優化

打包後的chunk-vendors.js（引入的第三方外掛）很大，影響載入。

5.1 路由使用懶載入。當打包構建應用時，Javascript 包會變得非常大，影響頁面載入。如果我們能把不同路由對應的元件分割成不同的程式碼塊，然後當路由被訪問的時候才載入對應元件，這樣就更加高效了

5.2.安裝compression-webpack-plugin外掛。前端將檔案打包成.gz檔案，然後通過nginx的配置，讓瀏覽器直接解析.gz檔案，可以大大提升檔案載入的速度。

npm install --save-dev compression-webpack-plugin

修改vue.config.js配製

// 用來配製@引入路徑的
const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}
const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['
 
js', 'css']
// 用來配製@引入路徑的end
module.exports = {
  lintOnSave: false,
  publicPath: "./",//打包檔案路徑為相對路徑
  //webpack配置
  configureWebpack: {
    //關閉 webpack 的效能提示
    // performance: {
    //   hints: false
    // },
    //或者
    //警告 webpack 的效能提示
    performance: {
      hints: 'warning',
      //入口起點的最大體積
      maxEntrypointSize: 500000000,
      //生成檔案的最大體積
      maxAssetSize: 300000000,
      //只給出 js 檔案的效能提示
      assetFilter: function (assetFilename) {
        return assetFilename.endsWith('.js');
      }
    },
    plugins: [
      // new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      
      // 下面是下載的外掛的配置
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      }),
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 5, 
        minChunkSize: 100
      })
    ]
  },
  css:{extract:false,sourceMap:false}, //解決的打包後樣式衝突問題
  // 用來配製檔案@引入路徑的
  chainWebpack: config => {
    config.resolve.alias
      .set("@", resolve("src")) //@預設也是這個
      // .set("assets", resolve("src/assets"))
      // .set("components", resolve("src/components"))
      // .set("base", resolve("baseConfig"))
      // .set("public", resolve("public"));
  },

}

5.3配製nginx（效果不明顯，待考究）

server{
　　gzip_static on;  //會讀取我們我們壓縮好的.gz檔案，（不確定）
　　
　　
　　// 主動幫我們壓縮（不確定）
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9; //越大壓縮等級越高
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; //需要壓縮的檔案
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

}

6.後面直接把打包後的js檔案，也丟到騰訊去的cos上去，再使用cdn加速。基本幾百毫秒就載入完成了。

oss與cdn的區別與聯絡。（阿里叫oss,騰訊叫cos都是物件儲存）

oss來來存放靜態資源比如圖片啊js檔案啊.html啊視訊之類的.. cdn用來將oss裡面的檔案進行分發..oss裡面的檔案會快取到cdn的節點上 使用者就近訪問.

7,也可以把vue.vuex.axios都丟到cdn上，使用cdn引入的方式，優化載入時長。第三方外掛最好按需引入。

8.打包後的.map檔案（可以在配製中去掉）

“.map”檔案的作用：專案打包後，程式碼都是經過壓縮加密的，如果執行時報錯，輸出的錯誤資訊無法準確得知是哪裡的程式碼報錯。
有了map就可以像未加密的程式碼一樣，準確的輸出是哪一行哪一列有錯。