前端項目時因chunk-vendors過大導致首屏加載太慢的優化

因app首頁加載不流暢，於是去檢查首頁加載項的耗時，最終發現是前端加載時js文件太大，導致首頁加載太慢，於是選擇了以下方案進行優化。

一、安裝compression-webpack-plugin插件。前端將文件打包成.gz文件，然后通過nginx的配置，讓瀏覽器直接解析.gz文件，可以大大提升文件加載的速度。

1.npm使用下面命令安裝

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

2.yarn使用下面命令安裝

yarn add compression-webpack-plugin --save-dev

二、接下來要去修改vue的配置文件 vue.config.js

const path = require('path'); const webpack = require('webpack') const CompressionWebpackPlugin = require('compression-webpack-plugin') const productionGzipExtensions = ['js', 'css'] const isProduction = process.env.NODE_ENV === 'production' module.exports = { publicPath:'/appShare/', productionSourceMap: false, configureWebpack:{ resolve:{ alias:{ '@':path.resolve(__dirname, './src'), '@i':path.resolve(__dirname, './src/assets'), } }, plugins: [ // Ignore all locale files of moment.js
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), // 配置compression-webpack-plugin壓縮
      new CompressionWebpackPlugin({ algorithm: 'gzip', test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), threshold: 10240, minRatio: 0.8 }), new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 5, minChunkSize: 100 }) ] },

 

三、nginx配置

server{
    listen 8087;
    server_name localhost;

    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]\.";

    location /appShare {
       client_max_body_size    10m;
       root /home/test/webIndex/appShare;
       try_files $uri $uri/ /appShare/index.html;
       index index.htm index.html;
    }

}

四、打包后對比結果很明顯，原來1.3M的js文件被壓縮到了351k，前端加載的速度也提升的很多。

[root@localhost js]# ll -h 總用量 1.9M -rw-r--r-- 1 root root 1.3M 10月 25 13:56 answer.1e6b29ba.js -rw-r--r-- 1 root root 351K 10月 25 13:56 answer.1e6b29ba.js.gz -rw-r--r-- 1 root root  49K 10月 25 13:56 app.319e43e7.js -rw-r--r-- 1 root root  18K 10月 25 13:56 app.319e43e7.js.gz -rw-r--r-- 1 root root  21K 10月 25 13:56 list.898721c9.js -rw-r--r-- 1 root root 5.0K 10月 25 13:56 list.898721c9.js.gz -rw-r--r-- 1 root root  45K 10月 25 13:56 qa.d8599e38.js -rw-r--r-- 1 root root  14K 10月 25 13:56 qa.d8599e38.js.gz -rw-r--r-- 1 root root  45K 10月 25 13:56 shareBottle2.4ceeca4d.js -rw-r--r-- 1 root root  14K 10月 25 13:56 shareBottle2.4ceeca4d.js.gz [root@localhost js]#