有声读物,好看的课外书

<strike id="cusea"></strike>

<ul id="cusea"></ul>

cnio 發(fā)布于2019-05-23 16:25 / 2740人閱讀

工作中一直在做一款公司內(nèi)部的BI工具，將數(shù)據(jù)可視化的報(bào)表賦能給業(yè)務(wù)人員，報(bào)表配置者通過(guò)簡(jiǎn)單的拖拽操作即可生成報(bào)表。隨著系統(tǒng)不斷的完善，加上運(yùn)維推廣，我們積累了越來(lái)越多的用戶。這時(shí)候用戶體驗(yàn)的方方面面都體現(xiàn)出來(lái)了。我們也停下產(chǎn)品的功能迭代，將整個(gè)系統(tǒng)進(jìn)行優(yōu)化，旨在提升用戶體驗(yàn)。以下是我對(duì)前端項(xiàng)目的優(yōu)化總結(jié)。

Webpack 打包優(yōu)化

項(xiàng)目中在使用的 Webpack 版本是3.x，本次優(yōu)化的方案仍然是基于Webpack3.x版本的 Vue 腳手架進(jìn)行優(yōu)化。升級(jí)4.x在計(jì)劃中。。。

之前也總結(jié)過(guò)一次 Webpack 2.x 在Vue2.x項(xiàng)目中的應(yīng)用，提到過(guò) Webpack 工程的一些優(yōu)化方案，以下算是一個(gè)補(bǔ)充。

開(kāi)啟Gzip

嘗試了下開(kāi)啟gzip，直接受益還是比較大的。下面是實(shí)際項(xiàng)目中打包結(jié)果。

Parsed的js，1.38M

Gizpped的js - 421.46K

通過(guò)數(shù)據(jù)分析，減少了**70.28%**的打包體積。

開(kāi)啟方式，在腳手架中修改配置文件：/config/index.js

// 生產(chǎn)模式
build: {
  productionGzip: true // 開(kāi)啟Gzip壓縮
}

同時(shí)服務(wù)端 nginx 加入配置項(xiàng)

gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 6;
gzip_types application/javascript text/plain application/x-javascript text/css application/xml text/javascript application/json;
gzip_vary on;

重啟 nginx 后刷新頁(yè)面，在Chrome develop tools中 Network 查看網(wǎng)絡(luò)鏈接

Request Headers 中出現(xiàn) Accept-Encoding: gzip 代表客戶端能夠理解 gzip 壓縮編碼方式

Response Headers 中出現(xiàn) Content-Encoding 代表服務(wù)端指明以 gzip 編碼方式對(duì)數(shù)據(jù)進(jìn)行壓縮

這一對(duì)請(qǐng)求頭部關(guān)鍵字搭配出現(xiàn)，說(shuō)明配置成功。

使用 Preload 插件

云服務(wù)器 GPU云服務(wù)器政務(wù) 快車道尹世明總經(jīng)理

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/7230.html

相關(guān)文章

vue中如何實(shí)現(xiàn)的自定義按鈕

摘要：在實(shí)際開(kāi)發(fā)項(xiàng)目中，有時(shí)我們會(huì)用到自定義按鈕因?yàn)橐粋€(gè)項(xiàng)目中，眾多的頁(yè)面，為了統(tǒng)一風(fēng)格，我們會(huì)重復(fù)用到很多相同或相似的按鈕，這時(shí)候，自定義按鈕組件就派上了大用場(chǎng)，我們把定義好的按鈕組件導(dǎo)出，在全局引用，就可以在其他組件隨意使用啦，這樣可以大幅度在實(shí)際開(kāi)發(fā)項(xiàng)目中，有時(shí)我們會(huì)用到自定義按鈕；因?yàn)橐粋€(gè)項(xiàng)目中，眾多的頁(yè)面，為了統(tǒng)一風(fēng)格，我們會(huì)重復(fù)用到很多相同或相似的按鈕，這時(shí)候，自定義按鈕組件就...

biaoxiaoduan 2019-08-23 16:29 評(píng)論0 收藏0
JavaScript代碼整潔之道

摘要：代碼整潔之道整潔的代碼不僅僅是讓人看起來(lái)舒服，更重要的是遵循一些規(guī)范能夠讓你的代碼更容易維護(hù)，同時(shí)降低幾率。另外這不是強(qiáng)制的代碼規(guī)范，就像原文中說(shuō)的，。里式替換原則父類和子類應(yīng)該可以被交換使用而不會(huì)出錯(cuò)。注釋好的代碼是自解釋的。 JavaScript代碼整潔之道整潔的代碼不僅僅是讓人看起來(lái)舒服，更重要的是遵循一些規(guī)范能夠讓你的代碼更容易維護(hù)，同時(shí)降低bug幾率。原文clean-c...

liaorio 2019-08-23 16:29 評(píng)論0 收藏0
前端經(jīng)典面試題總結(jié)

摘要：接著我之前寫的一篇有關(guān)前端面試題的總結(jié)，分享幾道比較經(jīng)典的題目第一題考點(diǎn)作用域，運(yùn)算符栗子都會(huì)進(jìn)行運(yùn)算，但是最后之后輸出最后一個(gè)也就是那么其實(shí)就是而且是個(gè)匿名函數(shù)，也就是屬于，就輸出第二和第三個(gè)都是類似的，而且作用域是都是輸出最后一個(gè)其實(shí)就接著我之前寫的一篇有關(guān)前端面試題的總結(jié)，分享幾道比較經(jīng)典的題目：第一題： showImg(https://segmentfault.com/im...

BlackMass 2019-08-23 16:29 評(píng)論0 收藏0
私有云那家好-六大私有云廠商詳細(xì)對(duì)比！

對(duì)比內(nèi)容UCloudStackZStackVMwareQingCloud騰訊TStack華為云Stack優(yōu)勢(shì)總結(jié)?基于公有云自主可控?公有云架構(gòu)私有化部署?輕量化/輕運(yùn)維/易用性好?政府行業(yè)可復(fù)制案例輕量化 IaaS 虛擬化平臺(tái)?輕量化、產(chǎn)品成熟度高?業(yè)內(nèi)好評(píng)度高?功能豐富、交付部署快?中小企業(yè)案例多全套虛擬產(chǎn)品及云平臺(tái)產(chǎn)品?完整生態(tài)鏈、技術(shù)成熟?比較全面且健全的渠道?產(chǎn)品成熟度被市場(chǎng)認(rèn)可，市場(chǎng)占...

ernest.wang 2022-07-05 17:45 評(píng)論0 收藏0
cross-env使用記錄

摘要：能跨平臺(tái)地設(shè)置及使用環(huán)境變量讓這一切變得簡(jiǎn)單，不同平臺(tái)使用唯一指令，無(wú)需擔(dān)心跨平臺(tái)問(wèn)題安裝方式改寫使用了環(huán)境變量的常見(jiàn)如在腳本多是里這么配置運(yùn)行，這樣便設(shè)置成功，無(wú)需擔(dān)心跨平臺(tái)問(wèn)題關(guān)于跨平臺(tái)兼容，有幾點(diǎn)注意 cross-env能跨平臺(tái)地設(shè)置及使用環(huán)境變量, cross-env讓這一切變得簡(jiǎn)單，不同平臺(tái)使用唯一指令，無(wú)需擔(dān)心跨平臺(tái)問(wèn)題 1、npm安裝方式 npm i --save-de...

Michael_Ding 2019-08-23 16:29 評(píng)論0 收藏0
webpack打包插件

摘要：引入的模塊引入的使用將打包打包的拆分將一部分抽離出來(lái)物理地址拼接優(yōu)化打包速度壓縮代碼，這里使用的是，同樣在的里面添加 const path = require(path); //引入node的path模塊const webpack = require(webpack); //引入的webpack,使用lodashconst HtmlWebpackPlugin = require(ht...

ChanceWong 2019-08-23 16:29 評(píng)論0 收藏0