首頁猿問請教一個(gè)網(wǎng)站各文件壓縮問題？

請教一個(gè)網(wǎng)站各文件壓縮問題？

JavaScript

慕容708150 2019-03-05 13:14:09

如題祥述：作為前端開發(fā)的我，做了一個(gè)公司網(wǎng)站，所有的靜態(tài)頁面都以寫好（其實(shí)都是靜態(tài)頁面）。上線服務(wù)器，卻是各種問題：1、網(wǎng)站字體加載特別慢，估計(jì)要個(gè)三四秒才能出來，主要是用了個(gè)性字體（Pingfang SC，里面的三個(gè)，每個(gè)都是10M左右），公司的網(wǎng)站的也就5M的速度吧，當(dāng)然很慢。最后跟UI溝通了，為了稍好的用戶體驗(yàn)，還是選擇了系統(tǒng)字體。請問：如果你們碰到如此問題都是如何處理的？2、圖片加載很慢，UI給的圖，有的是.svg格式，有的是.png格式，大小大一點(diǎn)的都有2M-3M，小一點(diǎn)的也有500KB——800KB。解決辦法：在線壓縮了下，普遍在200KB以下，用的是在線壓縮，還算能接受。這個(gè)網(wǎng)站好像能讓圖片多壓縮幾次，之后后面壓縮的大小沒減少多少，所以也就只壓縮了一次。請問：圖片壓縮是UI來做，還是前端的工作，如果是前端的話，有沒有更好的壓縮工具？3、其實(shí)主要是上述文件影響了加載速度。其他也有問題，比如：網(wǎng)站還有些其它文件pdf有必要壓縮嗎？那些CSS、js也要壓縮嗎？第一次做網(wǎng)站，沒什么經(jīng)驗(yàn)，希望能得到你的指教?。。?

查看完整描述

3 回答

楊__羊羊

TA貢獻(xiàn)1943條經(jīng)驗(yàn) 獲得超7個(gè)贊

一般來說，服務(wù)器端開啟gzip壓縮是一個(gè)不錯(cuò)的選擇，前端的話也可以將一些不大的圖片圖標(biāo)合并（雪碧圖，減少請求次數(shù)），對于不大的（2M以下）使用base64轉(zhuǎn)碼，webpack可以做，js ,css壓縮主要是對代碼進(jìn)行合并，去除注釋，換行，進(jìn)行簡寫，一般都可以交給打包工具，配置設(shè)置好就可以了

反對回復(fù) 2019-03-27

人到中年有點(diǎn)甜

TA貢獻(xiàn)1895條經(jīng)驗(yàn) 獲得超7個(gè)贊

一般在進(jìn)入設(shè)計(jì)階段前就要溝通好，文字密集的區(qū)域保持默認(rèn)字體（一般約定為雅黑），個(gè)別標(biāo)題可以偶爾上點(diǎn)美術(shù)體，但最好前期溝通好。另外版權(quán)的問題也要考慮。
我都是自己切圖、自己壓縮，這塊如果也讓設(shè)計(jì)來做的話，溝通上可能會(huì)比較麻煩，因?yàn)槌沁@個(gè)設(shè)計(jì)對前端這塊非常了解，否則切出來的東西可能會(huì)和你要的東西不太一樣，而且壓縮的結(jié)果可能也會(huì)不太理想（但盡量不要二次壓縮，尤其是JPEG這種有損格式），那么與其把時(shí)間浪費(fèi)在溝通上、還不如自己動(dòng)手。另外，熟悉一些ps/設(shè)計(jì)類的知識(shí)，設(shè)計(jì)階段中與設(shè)計(jì)溝通時(shí)也會(huì)帶來一定的便利。至于工具么我覺得沒什么太好的，一般用TinyPNG主要就是壓縮效果好但是不太方便（沒記錯(cuò)的話是50張還是20張來著），如果用批量工具做的話就會(huì)反過來了，挺方便但是壓縮效果不太好（其實(shí)主要原因是TingPNG是經(jīng)過算法優(yōu)化后的有損，好多工具都是無損所以肯定效果會(huì)略遜于前者）……想用的話可以去看看企鵝家的WeFlow（常用的壓縮都有）、limitPNG（這個(gè)我覺得可能是無損的王者了……不過極限無損耗時(shí)略長所以建議你試試有損模式）
圖片一般壓縮到300k左右（也看網(wǎng)站和具體情況，比如移動(dòng)端小一點(diǎn)最好、純色沒過渡用PNG8、色彩比較多圖片分辨率大得用JPEG、矢量風(fēng)格宜用PNG，這些得知道點(diǎn)）；PDF的話一般客戶端主要是下載，所以大小別太過分就行了（當(dāng)然壓縮一下也沒壞處，如果你知道怎么壓縮的話）；至于HTMLCSSJS，壓縮有兩種做法：一種是在你編譯時(shí)加個(gè)壓縮&trim多余字符的插件（當(dāng)然也可以用一些工具手動(dòng)搞），另一種，也可以在服務(wù)器這端來做些處理，比如Nginx就有對應(yīng)的插件（沒記錯(cuò)的話阿里的Tengine是自帶的，原生Nginx得額外引入一下），另外我記得是阿里的OSS吧，用做服務(wù)器的時(shí)候也可以進(jìn)行對應(yīng)預(yù)處理，總之目的就是在用戶端接收到的頁面已經(jīng)是處理后的了。