html壓縮

1、在線壓縮工具。https://tool.oschina.net/jscompress （現(xiàn)代化前端構(gòu)建過程中基本不會(huì)使用，一般會(huì)選擇構(gòu)建構(gòu)建webpack、Gulp、FIS 3） 2、nodejs提供的html-minifier工具（可以進(jìn)行參數(shù)配置，如：是否壓縮注釋） 3、后端模板引擎渲染壓縮 注：nodejs拓展性比較多，首先它可以作為構(gòu)建工具（在構(gòu)建層壓縮）、 也可做為服務(wù)端語言可在服務(wù)端進(jìn)行壓縮

css壓縮

作用：刪除無用代碼、語義合并 1、在線壓縮工具。 （現(xiàn)代化前端構(gòu)建過程中基本不會(huì)使用，一般會(huì)選擇構(gòu)建構(gòu)建webpack、Gulp、FIS 3） 2、使用html-minifier對html中的css進(jìn)行壓縮 3、使用clean-css壓縮

js壓縮和混亂

作用： 無效字符刪除 剔除注釋 代碼語義的縮短和優(yōu)化 代碼保護(hù) 1、在線壓縮工具。 （現(xiàn)代化前端構(gòu)建過程中基本不會(huì)使用，一般會(huì)選擇構(gòu)建構(gòu)建webpack、Gulp、FIS 3） 2、使用html-minifier對html中的js進(jìn)行壓縮 3、使用uglifyjs2壓縮

文件合并

上圖右側(cè)不合并請求的缺點(diǎn)

文件合并也存在問題：（同類文件都合并一塊的話）

首屏渲染問題

緩存失效

首屏渲染問題：場景大部分出現(xiàn)在現(xiàn)代化前端框架使用過程中（如：vue、angular如果沒有做啟動(dòng)服務(wù)端渲染的情況下，是將整個(gè)渲染過程通過框架來接管的，所以它要是渲染的話，必須要把框架代碼加載完成之后才能進(jìn)行渲染，如果框架代碼被一個(gè)非常大的框js代碼合并在一起了，這個(gè)渲染就會(huì)完全依賴于與這個(gè)文件合并之后js文件來進(jìn)行，就會(huì)出現(xiàn)首屏渲染問題),

緩存失效問題：js文件緩存，比如a、b、c三個(gè)js文件，合并為d.js文件。

合并前：a文件改變只會(huì)造成a文件緩存失效。

合并后：原本a文件內(nèi)容改變，會(huì)造成d.js文件全部內(nèi)容緩存失效

文件合并比較適合用的場景：公共庫的合并、不同頁面的合并、見機(jī)行事，隨機(jī)應(yīng)變

真實(shí)業(yè)務(wù)場景中我們希望當(dāng)單應(yīng)用的某個(gè)頁面被路由到的時(shí)候，我們才去加載那個(gè)頁面的組件才去請求該頁面是 js。也就是將不同頁面的js分別打包。在webpack、FIS等構(gòu)建工具中都是可以實(shí)現(xiàn)的，就是異步加載組件結(jié)合現(xiàn)在的框架都有很好的實(shí)現(xiàn)方式

1、在線網(wǎng)站 2、在構(gòu)建階段使用nodejs實(shí)現(xiàn)文件合并（就看使用什么樣的構(gòu)建工具了， 如果使用Gulp就可以使用Gulp相關(guān)插件進(jìn)行合并。 webpack配置entry及output。webpack本身機(jī)制就會(huì)根據(jù)入口文件進(jìn)行相關(guān)文件依賴的分析， 從而將這個(gè)文件入口所依賴的文件自動(dòng)打成一個(gè)包）

開啟gzip

總結(jié)：

最好結(jié)合構(gòu)建工具進(jìn)行壓縮

減少http請求數(shù)量

減少請求資源的大小

總結(jié)

以上是生活随笔為你收集整理的代码合并工具_资源合并与压缩的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。