vue單頁面打包文件大？首次加載慢？從7.5M到1.3M蛻變

npm run build 文件過大
打包生成文件：

瀏覽器訪問效果：

第一步：Nginx開啓gzip （配置完切記重啓nginx）

後臺配置nginx.config。關於gzip壓縮代碼：

http {
　　gzip on; #開啓或關閉gzip on off
　　gzip_disable "msie6"; #不使用gzip IE6
　　gzip_min_length 100k; #gzip壓縮最小文件大小，超出進行壓縮（自行調節）
　　gzip_buffers 4 16k; #buffer 不用修改
　　gzip_comp_level 3; #壓縮級別:1-10，數字越大壓縮的越好，時間也越長
　　gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; # 壓縮文件類型
　　gzip_vary off; #跟Squid等緩存服務有關，on的話會在Header裏增長 "Vary: Accept-Encoding"
}

第二部：vue項目中config/index.js

productionGzip: true, //是否開啓gizp壓縮
productionGzipExtensions: ['js', 'css'],

開啓後cnpm run build 會生成*.gz文件。
像這樣：

如何識別gzip與非gzip請求

gzip請求：

非gzip請求：

gzip與非gzip在響應頭中區別就是Content-Encoding是否代表是gzip壓縮格式。

　一、在項目 根目錄config/index.js 中 build 內找到 productionGzip: false， 把 false改成true。與 productionSourceMap 恰好相反。

屬性值修改後，這個時候能夠執行 npm run build。可是會報錯，提示找不到 " Cannot find module 'compression-webpack-plugin'"

解決方法：

npm install --save-dev compression-webpack-plugin@1.1.12　　　　//記得帶版本號