問(wèn)題
vue cli2,打包完后比較大，每次訪問(wèn)都要請(qǐng)求的靜態(tài)文件都要等好久，需要優(yōu)化下靜態(tài)文件等大小。
解決思路
vuecli 2.x自帶了分析工具, 分析工具：webpack-bundle-analyzer(請(qǐng)自行搜索如何安裝)
只要運(yùn)行 npm run build --report
給出的結(jié)果如下圖
stat：
這是文件的“輸入”大小，在任何轉(zhuǎn)換（如縮?。┲啊?br>
它被稱(chēng)為“stat-size”，因?yàn)樗菑腤ebpack的stats對(duì)象獲得的。
parsed：
這是文件的“輸出”大小。如果您使用的是像uglify這樣的Webpack插件，那么這個(gè)值將反映代碼的小型化。
gzipped：
這是通過(guò)gzip壓縮運(yùn)行解析的包/模塊的大小。
服務(wù)器是nginx,沒(méi)有用過(guò)配置壓縮項(xiàng)，網(wǎng)上找了下，配置如下
再查看nginx配置gzip 發(fā)現(xiàn)有static靜態(tài)壓縮，才會(huì)訪問(wèn)gzip文件，描述如下：
Nginx的動(dòng)態(tài)壓縮是對(duì)每個(gè)請(qǐng)求先壓縮再輸出，這樣造成虛擬機(jī)浪費(fèi)了很多cpu，解決這個(gè)問(wèn)題可以利用nginx模塊Gzip Precompression，這個(gè)模塊的作用是對(duì)于需要壓縮的文件，直接讀取已經(jīng)壓縮好的文件(文件名為加.gz)，而不是動(dòng)態(tài)壓縮，對(duì)于不支持gzip的請(qǐng)求則讀取原文件。
gzip_static on;
a) 文件可以使用 gzip 命令來(lái)進(jìn)行壓縮，或任何其他兼容的命令。建議壓縮文件和原始文件的修改日期和時(shí)間保持一致。
b) gzip_static配置優(yōu)先級(jí)高于gzip。
c) 開(kāi)啟nginx_static后，對(duì)于任何文件都會(huì)先查找是否有對(duì)應(yīng)的gz文件。
d) gzip_types設(shè)置對(duì)gzip_static無(wú)效。
到此nginx配置完成，現(xiàn)在需要生成gz文件，需要用到compression-webpack-plugin這個(gè)gem,配置完成后，在打包。
結(jié)果
到現(xiàn)在前端靜態(tài)文件也已經(jīng)打包好，nginx也配置好了，清空瀏覽器緩存，再次訪問(wèn)，請(qǐng)求結(jié)果如下
可以看到傳輸?shù)氖菈嚎s后的gz文件，有2m變到600多k，對(duì)于支持gz的瀏覽器，傳輸量變成了原來(lái)的1/3
參考文章：
Nginx gzip static靜態(tài)壓縮
compression-webpack-plugin Gzip壓縮
