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

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

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

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

瀏覽器訪問效果：

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

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

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

第二部：vue項目中config/index.js

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

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

如何識別gzip與非gzip請求

gzip請求：

非gzip請求：

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

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

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

解決方法：

npm install --save-dev compression-webpack-plugin@1.1.12　　　　//記得帶版本號

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/40609.html

相關(guān)文章

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

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

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

摘要：對應(yīng)每一個環(huán)境可能都會有所差異，比如說服務(wù)器地址接口地址地址等等。具體的值取決于應(yīng)用運行的模式。會和中的選項相符，即你的應(yīng)用會部署到的基礎(chǔ)路徑。基于vue-cli3.0構(gòu)建功能完善的移動端架子，主要功能包括 webpack 打包擴展 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項目優(yōu)化實踐【更新】

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

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

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

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

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

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