原文鏈接：Scratch3.0優(yōu)化，開啟壓縮吕世，提高訪問速度 – 每天進(jìn)步一點點 (longkui.site)
0.背景
上一篇中彰触，使用cent os 服務(wù)器部署了scratch-gui∶剑可以正常訪問况毅，但是打包后的lib.min.js 文件有20多M，對于遠(yuǎn)程服務(wù)器來說是個巨大壓力尔艇。偶然間聽到一個“JS壓縮”的名詞尔许，搜索了好久才明白到底怎么用，一開始我以為是把打包出來的JS文件直接壓縮终娃，后來發(fā)現(xiàn)不完全是味廊。下面說下幾種優(yōu)化的思路。
1.優(yōu)化思路
1.webpack： webpack 簡單來說是一款打包工具（其實更復(fù)雜）棠耕，在我們下載下來的scratch-gui中有一個webpack.config.js文件余佛，這里面是一些配置信息，修改這些配置信息可以讓我們打包出來的文件不同窍荧，比如辉巡，分開打包的思路，或者某些不用的文件不用打包等等蕊退。但是這個經(jīng)過我的嘗試红氯，發(fā)現(xiàn)有一定的學(xué)習(xí)成本，且沒有現(xiàn)成的修改方式咕痛，故暫時放棄這個方法。
2.JS壓縮： 這個是偶然搜索到喇嘱，后來終于搞明白茉贡，是使用gzip壓縮的方式，經(jīng)過壓縮后者铜，比較明顯腔丧，且上手簡單，幾分鐘就行作烟，本文主要講此方法愉粤。
3.CDN加速:?如果你都會上面兩步，而且完美配置了后發(fā)現(xiàn)還是不能達(dá)到你想要的效果拿撩，那么你可能需要使用CDN加速這樣的東西衣厘，因為我們發(fā)現(xiàn)，使用scratch3時，他所請求的很多資源來自國外影暴，這個速度可想而知错邦，這個時候如果訪問的國內(nèi)的網(wǎng)絡(luò)那么速度就快了，當(dāng)然這個CDN并不完全免費型宙，有一定的成本撬呢。
2.開啟gzip壓縮
gzip壓縮是在服務(wù)端開啟的，本文用的是Cent OS + 寶塔+Apache妆兑。其開啟方式如下：
打開Apache 的配置文件魂拦，
去掉 #LoadModule headers_module modules/mod_headers.so 前面的注釋#
去掉 #LoadModule deflate_module modules/mod_deflate.so 前面的注釋#
去掉 #LoadModule filter_module modules/mod_filter.so 前面的注釋#
然后，在大概末尾的位置添加下面這段代碼（代碼并不唯一）
<IfModule deflate_module>
?#設(shè)置壓縮級別
DeflateCompressionLevel 6
SetOutputFilter DEFLATE??
# Don’t compress images and other?? #排除不需要壓縮的
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI .(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI .(?:pdf|doc)$ no-gzip dont-vary
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css
AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>
nginx的方式類似搁嗓，打開nginx的配置文件芯勘，把gzip改成on，gzip_comp_level 的等級按照你的需求改谱姓，然后保存即可借尿。
再次訪問后，可以看到其壓縮后的效果如下：
可以看出原來20多M的JS文件屉来，現(xiàn)在只有5.5M路翻，體積相當(dāng)于原來的四分之一。
3. 后記
雖然茄靠，體積壓縮了不少茂契，且經(jīng)過我的測試，本地服務(wù)器幾乎是秒開慨绳，但是從上面的圖片可以看出掉冶，即使在體積只有5.5M的基礎(chǔ)上，遠(yuǎn)程服務(wù)器加載還是需要45秒左右脐雪，這對于一個網(wǎng)站來說是個災(zāi)難厌小。
當(dāng)然，這也是下一步需要考慮的問題战秋，還需要繼續(xù)優(yōu)化璧亚。
