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

zengdongbao 發布于2019-07-25 15:07 / 4003人閱讀

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

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

瀏覽器訪問效果：

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

后臺配置nginx.config。關于gzip壓縮代碼：

http {
　　gzip on; #開啟或關閉gzip on off
　　gzip_disable "msie6"; #不使用gzip IE6
　　gzip_min_length 100k; #gzip壓縮最小文件大小，超出進行壓縮（自行調節）
　　gzip_buffers 4 16k; #buffer 不用修改
　　gzip_comp_level 3; #壓縮級別:1-10，數字越大壓縮的越好，時間也越長
　　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等緩存服務有關，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在響應頭中區別就是Content-Encoding是否表明是gzip壓縮格式。

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

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

解決方法：

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

GPU云服務器云服務器 js頁面加載數據慢 asp單文件頁面模型大數據從入門到精通首次加載

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/40609.html

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

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

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

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

Loong_T 2019-08-23 17:05 評論0 收藏0
記一次m>vuem>-webpack項目優化實踐【更新】

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

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

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

monw3c 2019-08-26 13:25 評論0 收藏0
項目經驗總結

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

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