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

zengdongbao 發(fā)布于2019-07-25 15:07 / 4128人閱讀

摘要：文件過大打包生成文件瀏覽器訪問效果第一步開啟配置完切記重啟后臺(tái)配置。像這樣如何識(shí)別與非請求請求非請求與非在響應(yīng)頭中區(qū)別就是是否表明是壓縮格式。在項(xiàng)目根目錄中內(nèi)找到，把改為。但是會(huì)報(bào)錯(cuò)，提示找不到解決方法記得帶版本號(hào)

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

瀏覽器訪問效果：

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

后臺(tái)配置nginx.config。關(guān)于gzip壓縮代碼：

http {
　　gzip on; #開啟或關(guān)閉gzip on off
　　gzip_disable "msie6"; #不使用gzip IE6
　　gzip_min_length 100k; #gzip壓縮最小文件大小，超出進(jìn)行壓縮（自行調(diào)節(jié)）
　　gzip_buffers 4 16k; #buffer 不用修改
　　gzip_comp_level 3; #壓縮級別:1-10，數(shù)字越大壓縮的越好，時(shí)間也越長
　　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等緩存服務(wù)有關(guān)，on的話會(huì)在Header里增加 "Vary: Accept-Encoding"
}

第二部：vue項(xiàng)目中config/index.js

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

開啟后cnpm run build 會(huì)生成*.gz文件。
像這樣：

如何識(shí)別gzip與非gzip請求

gzip請求：

非gzip請求：

gzip與非gzip在響應(yīng)頭中區(qū)別就是Content-Encoding是否表明是gzip壓縮格式。

　1、在項(xiàng)目根目錄config/index.js 中 build 內(nèi)找到 productionGzip: false，把 false改為true。與 productionSourceMap 剛好相反。

屬性值修改后，這個(gè)時(shí)候可以執(zhí)行 npm run build。但是會(huì)報(bào)錯(cuò)，提示找不到 " Cannot find module "compression-webpack-plugin""

解決方法：

npm install --save-dev compression-webpack-plugin@1.1.12　　　　//記得帶版本號(hào)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/40609.html

相關(guān)文章

m>vuem>2首頁加載慢的問題

摘要：開發(fā)完了，并部署到服務(wù)器后，就遇到了一個(gè)非常明顯的問題。所以可以利用按需加載來進(jìn)一步縮小文件的體積。另外圖片還可以去下面這個(gè)網(wǎng)上壓縮一下經(jīng)過上述的幾步，首頁的加載速度已經(jīng)比較快了，項(xiàng)目經(jīng)理也比較滿意。初步結(jié)束了首頁加載慢的問題的研究。本次開發(fā)的項(xiàng)目中使用了vue2.5.2和自帶的vue-cli生成了前端的基本架構(gòu)。隨后在項(xiàng)目開發(fā)當(dāng)中，添加了自己寫的UI組件，和復(fù)雜的業(yè)務(wù)邏輯。整個(gè)項(xiàng)目...

canopus4u 2019-08-22 16:11 評論0 收藏0
基于m>vuem>-cli3.0構(gòu)建功能完善的移動(dòng)端架子

摘要：對應(yīng)每一個(gè)環(huán)境可能都會(huì)有所差異，比如說服務(wù)器地址接口地址地址等等。具體的值取決于應(yīng)用運(yùn)行的模式。會(huì)和中的選項(xiàng)相符，即你的應(yīng)用會(huì)部署到的基礎(chǔ)路徑。基于vue-cli3.0構(gòu)建功能完善的移動(dòng)端架子，主要功能包括 webpack 打包擴(kuò)展 css：sass支持、normalize.css、_mixin.scss、_variables.scss vw、rem布局跨域設(shè)置 eslint設(shè)置...

Loong_T 2019-08-23 17:05 評論0 收藏0
記一次m>vuem>-webpack項(xiàng)目優(yōu)化實(shí)踐【更新】

摘要：優(yōu)化空間不大主要關(guān)注另外兩個(gè)上面。目前為止，項(xiàng)目打包后的大部頭就是，這個(gè)目前的優(yōu)化空間較小。當(dāng)然，從整體優(yōu)化的大維度上來說優(yōu)化的點(diǎn)還有很多，這個(gè)文章繼續(xù)更新下去。項(xiàng)目現(xiàn)狀項(xiàng)目是一個(gè)數(shù)據(jù)監(jiān)測平臺(tái)，引入了ehcart和three.js 負(fù)責(zé)項(xiàng)目的數(shù)據(jù)可視化；打包后，體積高達(dá)2.1M，這個(gè)體積相比于我的項(xiàng)目規(guī)模來說就顯得稍有笨重了使用webpack-bundle-analyzer分析了...

ernest.wang 2019-08-23 15:13 評論0 收藏0
Weex系列(3) —— 單頁面還是多頁面

目錄 Weex系列(序) —— 總要知道原生的一點(diǎn)東東(iOS) Weex系列(序) —— 總要知道原生的一點(diǎn)東東(Android) Weex系列(1) —— Hello World項(xiàng)目 Weex系列(2) —— 頁面跳轉(zhuǎn)和通信 Weex系列(3) —— 單頁面還是多頁面 [Weex系列(4) —— 老生常談的三端統(tǒng)一] [Weex系列(5) —— 封裝原生組件和模塊] [Weex系列(6) —...

monw3c 2019-08-26 13:25 評論0 收藏0
項(xiàng)目經(jīng)驗(yàn)總結(jié)

摘要：項(xiàng)目中前端開發(fā)問題經(jīng)驗(yàn)總結(jié)下的安全限制問題問題描述數(shù)據(jù)看板中的數(shù)據(jù)大部分都是實(shí)時(shí)數(shù)據(jù)或前一天統(tǒng)計(jì)的歷史數(shù)據(jù)，因此這邊后端考慮采用來實(shí)時(shí)和定時(shí)推送數(shù)據(jù)來保證數(shù)據(jù)的實(shí)時(shí)性和有效性。項(xiàng)目中前端開發(fā)問題經(jīng)驗(yàn)總結(jié) ie下websocket的安全限制問題問題描述：數(shù)據(jù)看板中的數(shù)據(jù)大部分都是實(shí)時(shí)數(shù)據(jù)或前一天統(tǒng)計(jì)的歷史數(shù)據(jù)，因此這邊后端考慮采用websocket來實(shí)時(shí)和定時(shí)推送數(shù)據(jù)來保證數(shù)據(jù)的實(shí)時(shí)...

William_Sang 2019-08-23 15:56 評論0 收藏0