Vue項(xiàng)目打包、合并及壓縮優(yōu)化網(wǎng)頁(yè)響應(yīng)速度
前言
影響網(wǎng)頁(yè)響應(yīng)速度的因素有很多,例如:請(qǐng)求內(nèi)容太大、http請(qǐng)求次數(shù)太多、服務(wù)器本身處理請(qǐng)求太久、JS腳本執(zhí)行耗時(shí)過(guò)長(zhǎng)、瀏覽器回流重繪等。網(wǎng)站頁(yè)面的響應(yīng)速度與用戶(hù)體驗(yàn)息息相關(guān),直接影響到用戶(hù)是否愿意繼續(xù)訪(fǎng)問(wèn)你的網(wǎng)站。對(duì)于Vue項(xiàng)目而言,最普遍的問(wèn)題可能在于打包后的文件太大,導(dǎo)致加載時(shí)間過(guò)長(zhǎng)。服務(wù)器請(qǐng)求處理太久和js腳本執(zhí)行耗時(shí)過(guò)長(zhǎng),這兩個(gè)跟代碼的質(zhì)量和服務(wù)器配置關(guān)系太重,需要根據(jù)具體的項(xiàng)目和代碼進(jìn)行優(yōu)化,今天我們只從請(qǐng)求次數(shù)和打包后的單文件過(guò)大兩個(gè)層面去優(yōu)化網(wǎng)頁(yè)響應(yīng)速度(這個(gè)適用于所有前端項(xiàng)目)。
一.請(qǐng)求內(nèi)容太大
在項(xiàng)目打包后,我們經(jīng)常會(huì)發(fā)現(xiàn)打包后的文件 vendors 和 app 文件尤其過(guò)大,其中app.js文件里放的是項(xiàng)目中各個(gè)頁(yè)面的邏輯代碼,vendor.js放的是各個(gè)頁(yè)面各個(gè)組件公用的一些代碼。隨著項(xiàng)目復(fù)雜度的增加,該文件的大小也與日俱增。在帶寬有限的情況下,往往下載這兩個(gè)文件就會(huì)等很長(zhǎng)時(shí)間。
解決方案:
- 路由懶加載:分割代碼塊
Vue支持異步組件,即可以在使用組件的地方使用一個(gè)Promise,Promise最終會(huì)通過(guò)resolve回傳一個(gè)組件對(duì)象。而webpack的動(dòng)態(tài)import的方式可以讓代碼分塊進(jìn)行打包,并且返回一個(gè)Promise(正是異步組件所需要的)。在路由配置表里使用import可以將各個(gè)頁(yè)面組件分割成不同的代碼塊,然后當(dāng)路由被訪(fǎng)問(wèn)的時(shí)候才加載對(duì)應(yīng)的組件,這樣就避免將所有內(nèi)容打包在一個(gè)chunk里,從而“按需加載”,大大提高響應(yīng)速度。如下圖所示引入路由組件:
CDN引入
業(yè)務(wù)代碼是經(jīng)常更新迭代的,為了讓瀏覽器盡可能長(zhǎng)的時(shí)間緩存我們的靜態(tài)文件,如果把類(lèi)庫(kù)代碼和業(yè)務(wù)代碼打包在一起,那么類(lèi)庫(kù)代碼會(huì)跟著業(yè)務(wù)代碼的更新而更新,而不能長(zhǎng)時(shí)間的利用瀏覽器里緩存。我們希望利用緩存,減少瀏覽器流量,提高用戶(hù)瀏覽器加載速度,所以單獨(dú)拆分出來(lái)進(jìn)行打包。一般第三方包都會(huì)有script引入方案,只需要打包的時(shí)候忽略制定第三方包,然后在模板上加上相應(yīng)的導(dǎo)入鏈接。
首先沒(méi)有vue.config.js需要在項(xiàng)目根目錄創(chuàng)建
具體代碼如下:
const cdn = { // 忽略打包的第三方庫(kù) externals: { vue: 'Vue', "element-ui": "ELEMENT", 'vue-router': 'VueRouter', vuex: 'Vuex', axios: 'axios', moment: "moment", echarts: "echarts" }, // 通過(guò)cdn方式使用 js: [ 'https://cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js', 'https://cdn.bootcss.com/vue-router/3.1.2/vue-router.min.js', 'https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js', 'https://cdn.bootcss.com/axios/0.19.0/axios.min.js', 'https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js', 'https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js', "https://cdn.bootcdn.net/ajax/libs/element-ui/2.8.2/index.js", ], css: ["https://unpkg.com/element-ui@2.8.2/lib/theme-chalk/index.css"], } module.exports = { publicPath: '/CRM/dist/', // publicPath: './', chainWebpack: config => { config.plugin('html').tap(args => { args[0].cdn = cdn return args }) config.plugins.delete('prefetch') }, //打包忽略第三方庫(kù) configureWebpack: { externals: cdn.externals }, }
然后在 pulic/index.html 模板相應(yīng)位置上加上(添加位置自己看著來(lái))
//下列是css ,script的話(huà)注釋換一下,仔細(xì)看很好理解,config配置是添加一個(gè)cdn變量,然后在模板中遍歷添加 <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %> <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="stylesheet"> <!-- <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>" crossorigin="anonymous"></script> --> <% } %>
使用CDN還會(huì)有另外一個(gè)好處,就是可以提高打包速度。
壓縮請(qǐng)求資源
一般我們部署到服務(wù)器會(huì)使用nginx來(lái)做代理服務(wù)器,所有的請(qǐng)求都通過(guò)nginx轉(zhuǎn)發(fā)。我們可以通過(guò)配置nginx,開(kāi)啟gzip。
server { gzip on; gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css; }
通過(guò)上面的配置,每次瀏覽器向服務(wù)器請(qǐng)求資源時(shí),服務(wù)器就會(huì)先把資源進(jìn)行壓縮后再返給瀏覽器,瀏覽器接收到后再解壓處理。這樣就可以很大的提高靜態(tài)資源的下載速度。
但還有一點(diǎn),就是這樣的話(huà),瀏覽器每次向服務(wù)器請(qǐng)求時(shí),服務(wù)器都會(huì)執(zhí)行一次壓縮操作,當(dāng)請(qǐng)求量很大時(shí),壓縮這個(gè)操作也會(huì)影響到服務(wù)器的響應(yīng)速度,所以我們可以直接在打包時(shí),就將文件打包成壓縮包。這樣不用服務(wù)器頻繁的去打包:
安裝依賴(lài):compression-webpack-plugin
npm install compression-webpack-plugin --save-dev
vue.config.js修改:
const CompressionPlugin = require('compression-webpack-plugin'); const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i; module.exports = { publicPath: './', productionSourceMap: false, configureWebpack: {...}, chainWebpack: config => { config.resolve.alias.set('@', resolve('src')); if (process.env.NODE_ENV === 'production') { config.plugin('compressionPlugin') .use(new CompressionPlugin({ filename: '[path].gz[query]', algorithm: 'gzip', test: productionGzipExtensions, threshold: 10240, minRatio: 0.8, deleteOriginalAssets: true })); } }, };
nginx配置
server { gzip_static on; gzip on; gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css; }
一.http請(qǐng)求次數(shù)太多
所有的事情都有個(gè)度,也就是我們所說(shuō)的物極必反。我們采用按需加載,代碼分割打包后,當(dāng)項(xiàng)目越來(lái)越大,模塊越來(lái)越多的時(shí)候,項(xiàng)目打包后,我們就會(huì)發(fā)現(xiàn)會(huì)生成很多的文件。對(duì)于前端性能而言,雖然每個(gè)文件更小了,但可能意味著更多的網(wǎng)絡(luò)連接建立和關(guān)閉的開(kāi)銷(xiāo),因此在前端優(yōu)化的實(shí)踐中,通常需要在文件數(shù)量和單個(gè)文件大小之間取得平衡。這里,我們可以利用webpack提供的插件 MinChunkSizePlugin, 通過(guò)合并小于 minChunkSize 大小的 chunk,將 chunk 體積保持在指定大小限制以上
解決方案:
vue.config.js配置
module.exports = { publicPath: './', productionSourceMap: false, configureWebpack: { plugins: [ new webpack.optimize.MinChunkSizePlugin({ minChunkSize: 10000 // Minimum number of characters }) ] }, }
通過(guò)以上這些操作,我們可以將打包后的文件控制在合理的大小和數(shù)量范圍之內(nèi),再配合ngnix配置,開(kāi)啟gzip,基本上就可以解決大部分vue單頁(yè)面應(yīng)用,首次加載等待時(shí)間過(guò)長(zhǎng)的問(wèn)題。
總結(jié)
到此這篇關(guān)于Vue項(xiàng)目打包、合并及壓縮優(yōu)化網(wǎng)頁(yè)響應(yīng)速度的文章就介紹到這了,更多相關(guān)Vue項(xiàng)目打包、合并及壓縮內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
利用vue和element-ui設(shè)置表格內(nèi)容分頁(yè)的實(shí)例
下面小編就為大家分享一篇利用vue和element-ui設(shè)置表格內(nèi)容分頁(yè)的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03vue Element-ui input 遠(yuǎn)程搜索與修改建議顯示模版的示例代碼
本文分為html,js和css代碼給大家詳細(xì)介紹了vue Element-ui input 遠(yuǎn)程搜索與修改建議顯示模版功能,感興趣的朋友一起看看吧2017-10-10Vue項(xiàng)目發(fā)布后瀏覽器緩存問(wèn)題解決方案
在vue項(xiàng)目開(kāi)發(fā)中一直有一個(gè)令人都疼的問(wèn)題,就是緩存問(wèn)題,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目發(fā)布后瀏覽器緩存問(wèn)題的解決方案,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09vue+iview?Table表格多選切換分頁(yè)保持勾選狀態(tài)
這篇文章主要為大家詳細(xì)介紹了vue+iview?Table表格多選切換分頁(yè)保持勾選狀態(tài),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07vue開(kāi)發(fā)中后臺(tái)系統(tǒng)復(fù)雜表單優(yōu)化技巧
這篇文章主要為大家介紹了vue開(kāi)發(fā)中后臺(tái)系統(tǒng)復(fù)雜表單的優(yōu)化技巧,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07uniapp開(kāi)發(fā)打包多端應(yīng)用完整方法指南
這篇文章主要介紹了uniapp開(kāi)發(fā)打包多端應(yīng)用完整流程指南,包括了uniapp打包小程序,uniapp打包安卓apk,uniapp打包IOS應(yīng)用,需要的朋友可以參考下2022-12-12Vue中computed屬性和watch,methods的區(qū)別
本文主要介紹了Vue中computed屬性和watch,methods的區(qū)別,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05