vue2.x 從vue.config.js配置到項(xiàng)目?jī)?yōu)化
vue.config.js 是一個(gè)可選的配置文件,如果項(xiàng)目的 (和 package.json 同級(jí)的) 根目錄中存在這個(gè)文件,那么它會(huì)被 @vue/cli-service 自動(dòng)加載。你也可以使用 package.json 中的 vue 字段,但是注意這種寫(xiě)法需要你嚴(yán)格遵照 JSON 的格式來(lái)寫(xiě)。
前言
在實(shí)際項(xiàng)目中優(yōu)化也是經(jīng)常需要做的事情,特別在中大型項(xiàng)目中降低打包體積大小,提高首屏加載時(shí)間是必不可少的,同時(shí)在面試中也是一個(gè)高頻問(wèn)題。本片文章我將從vue.config.js配置到項(xiàng)目?jī)?yōu)化前后效果做一個(gè)介紹。
主要適用于Vue前端的優(yōu)化,通過(guò)CDN,路由懶加載,圖片壓縮,GIZP壓縮以后,達(dá)到降低部署到服務(wù)器上的前端項(xiàng)目的包體積大小,因?yàn)榘w積大小直接影響了項(xiàng)目首次打開(kāi)的速度,并且前端文件體積變小,也意味著 CSS文件和JS文件也變小了,下載速度會(huì)更快,同理網(wǎng)頁(yè)加載速度也就會(huì)變得更快,最終打到優(yōu)化前端項(xiàng)目的目的
vue.config.js配置選項(xiàng)
該文件應(yīng)該導(dǎo)出一個(gè)包含了選項(xiàng)的對(duì)象

配置選項(xiàng)
這邊說(shuō)幾個(gè)常用的配置:
- pages: 配置應(yīng)用的入口文件地址
- outputDir: 生成的生產(chǎn)環(huán)境構(gòu)建文件的目錄
- configureWebpack: 簡(jiǎn)單的打包配置,因?yàn)槟_手架內(nèi)置了webpack,所以在不修改打包命令的情況在,在這里個(gè)性化配置打包參數(shù),可以為一個(gè)對(duì)象或者箭頭函數(shù),注意: 這兩種形式同時(shí)存在的話(huà),后者會(huì)覆蓋前者,所以只能用里賣(mài)弄的一種。
- chainWebpack: 鏈?zhǔn)讲僮鞯膚ebpack配置,是一個(gè)函數(shù)
- devServer: 代理配置、服務(wù)端口設(shè)置,不設(shè)置的話(huà)默認(rèn)端口:8080
詳細(xì)配置說(shuō)明可以到官網(wǎng)查看。
打包優(yōu)化,減小包的大小
正常打包都有默認(rèn)的配置,在不修改的情況下也可以打包成功,但是包會(huì)比較大。
通過(guò)vue腳手架自帶的分析工具看下優(yōu)化前的情況,在命令行輸入:
vue ui
這是我自己項(xiàng)目前端部分的包分析

圖片視頻壓縮
看可以看到有三個(gè)圖片視頻文件可以?xún)?yōu)化,其中mp4為了保持分辨率不好壓縮暫時(shí)忽略。
在線(xiàn)圖片壓縮網(wǎng)站壓縮下圖片,壓縮率還不錯(cuò)

編譯時(shí)還可以使用依賴(lài)再次壓縮:image-webpack-loader
...
chainWebpack: config => {
// 壓縮圖片
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({
//{ bypassOnDebug: true }
mozjpeg: { progressive: true, quality: 65 }, // Compress JPEG images
optipng: { enabled: false }, // Compress PNG images
pngquant: { quality: [0.65, 0.9], speed: 4 }, // Compress PNG images
gifsicle: { interlaced: false } // Compress GIF images
// webp: { quality: 75 } // Compress SVG images
})
.end()
}
...
js代碼壓縮
代碼壓縮需要用到依賴(lài):uglifyjs-webpack-plugin
cnpm i -D muglifyjs-webpack-plugin
由于打包時(shí)本來(lái)就會(huì)對(duì)空格進(jìn)行處理,所以我們使用這個(gè)插件的目的時(shí)刪除生產(chǎn)環(huán)境中的console和注釋
注意: 由于使用這個(gè)插件會(huì)導(dǎo)致編譯時(shí)間變長(zhǎng),所以建議在生產(chǎn)環(huán)境使用。
...
configureWebpack: {
...
process.env.NODE_ENV === 'production'
?new UglifyJsPlugin({
uglifyOptions: {
output: {
// 刪除注釋
comments: false
},
compress: {
drop_console: true,
drop_console: true //清除console語(yǔ)句
// pure_funcs: ['console.log'] // 自定義去除函數(shù)
}
},
sourceMap: false
})
: () => {} ...
}
,,,
cdn加速
正常的webpack打包會(huì)生成chunk-vendors.js文件,它是捆綁所有不是自己的模塊,而是來(lái)自其他方的模塊的捆綁包。它們稱(chēng)為第三方模塊或供應(yīng)商模塊。也就是來(lái)自項(xiàng)目/node_modules目錄的所有模塊。所以當(dāng)依賴(lài)模塊越來(lái)越多,模塊越來(lái)越大時(shí)chunk-vendors.js就會(huì)越來(lái)越大
如果我們自己制作的網(wǎng)站需要掛在到服務(wù)器上供其他人使用,要怎樣才能讓你的用戶(hù)在訪(fǎng)問(wèn)你的網(wǎng)址時(shí)更加快速呢?
有兩種方法:
- 讓你的文檔盡可能地小或少,這樣整個(gè)傳輸速度就會(huì)有所提升。
- 盡可能讓你的文檔離最終用戶(hù)所在的位置近一些,這樣整個(gè)傳輸路徑就會(huì)大大減短。
公有云廠商在全世界各地都遍布不計(jì)其數(shù)都數(shù)據(jù)中心和服務(wù)器,CDN服務(wù)簡(jiǎn)單來(lái)講就是這些廠商將你的服務(wù)器上面的文檔分發(fā)到他們不同地區(qū)的服務(wù)器的當(dāng)中。
每個(gè)地區(qū)可以稱(chēng)為一個(gè)節(jié)點(diǎn),這樣用戶(hù)在訪(fǎng)問(wèn)你的網(wǎng)址時(shí),瀏覽器發(fā)送的請(qǐng)求就會(huì)優(yōu)先繞去離客戶(hù)最近的節(jié)點(diǎn)來(lái)獲取數(shù)據(jù),這樣方便客戶(hù)更快的速度訪(fǎng)問(wèn)網(wǎng)站。
CDN的全稱(chēng)是 Content Delivery Network,即內(nèi)容分發(fā)網(wǎng)絡(luò),CDN是構(gòu)建在現(xiàn)有網(wǎng)絡(luò)基礎(chǔ)之上的智能虛擬網(wǎng)絡(luò),依靠部署在各地的邊緣服務(wù)器,通過(guò)中心平臺(tái)的負(fù)載均衡、內(nèi)容分發(fā)、調(diào)度等功能模塊,使用戶(hù)就近獲取所需內(nèi)容,降低網(wǎng)絡(luò)擁塞,提高用戶(hù)訪(fǎng)問(wèn)響應(yīng)速度和命中率。CDN的關(guān)鍵技術(shù)主要有內(nèi)容存儲(chǔ)和分發(fā)技術(shù)——來(lái)自引用。
引入CDN
引入CDN提供的第三方庫(kù)的地址,這邊我引用了幾個(gè)重要且較大的依賴(lài):vue vuex elemenet-ui vue-router echarts axios
<!-- public/index.html --> <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script> <script src="https://cdn.bootcss.com/vuex/3.5.1/vuex.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script> <link rel="stylesheet" rel="external nofollow" > <script src="https://cdn.bootcss.com/element-ui/2.13.2/index.js"></script> <script src="https://unpkg.com/element-ui@2.13.2/lib/index.js"></script> <script src="https://cdn.bootcss.com/echarts/5.0.2/echarts.min.js"></script>
添加引入的庫(kù)
在 vue.config.js中添加需要從CDN引用的依賴(lài)庫(kù)
...
configureWebpack: {
...
externals: {
// 指定需要掛載的第三方庫(kù) 格式: 第三方庫(kù)名 :'庫(kù)在項(xiàng)目中的別名'
// 注意element-ui別名只能用ELEMENT,改了會(huì)出現(xiàn)undefined的保存
vue: 'Vue',
vuex: 'Vuex',
'vue-router': 'VueRouter',
axios: 'axios',
echarts: 'echarts',
'element-ui': 'ELEMENT'
},
...
}
...
注釋項(xiàng)目中用到依賴(lài)的地方
提示: 如果項(xiàng)目較大,需要注釋的地方很多,我建議先把引入cdn的庫(kù)的package.json里刪除,然后運(yùn)行項(xiàng)目,肯定會(huì)提示模塊缺失,哪里提示哪里注釋?zhuān)粫?huì)有遺漏。

可能出現(xiàn)的報(bào)錯(cuò)
element-ui的別名只能設(shè)置為‘ELEMENT',在按需引入時(shí),使用ELEMENT.Message…error(…),我試過(guò)修改未其他,但是這樣會(huì)報(bào)xxx is undefined
大文件文件定位對(duì)比
對(duì)比下cdn前后大文件分布
cdn加速前:

cdn加速后:

文件減小很多,大依賴(lài)基本沒(méi)有
成果

對(duì)比下,前后效果很是很明顯的
首屏加載時(shí)間優(yōu)化
上面這個(gè)過(guò)程其實(shí)已經(jīng)是在優(yōu)化首屏加載的時(shí)間了,是不過(guò)首屏加載時(shí)間還可以再進(jìn)行優(yōu)化
在只進(jìn)行了上面的打包優(yōu)化時(shí),首屏?xí)r間比較:
優(yōu)化前加載時(shí)間1.92秒,優(yōu)化后1.26秒,加載的資源也減小不少,總之提升明顯。


因?yàn)槭褂昧薱dn,所以requset的數(shù)量有所增加
路由懶加載優(yōu)化
定義
懶加載簡(jiǎn)單來(lái)說(shuō)就是延遲加載路由或按需加載路由,即在需要的時(shí)候的時(shí)候進(jìn)行加載,不需要就先不進(jìn)行加載,這樣可以加快項(xiàng)目網(wǎng)頁(yè)的加載速度。
常用實(shí)現(xiàn)方法
1、vue異步組件實(shí)現(xiàn)路由懶加載
component:resolve=>(['需要加載的路由的地址',resolve])
2、es提出的import(推薦使用這種方式)
// 下面2行代碼,沒(méi)有指定webpackChunkName,每個(gè)組件打包成一個(gè)js文件。
const Index = () => import('@/components/index')
const About = () => import('@/components/about') */
// 下面3行代碼,指定了相同的webpackChunkName,會(huì)合并打包成一個(gè)js文件。 把組件按組分塊
const Home = () => import(/* webpackChunkName: 'visualization' */ '@/components/home')
const Index = () => import(/* webpackChunkName: 'visualization' */ '@/components/index')
const About = () => import(/* webpackChunkName: 'visualization' */ '@/components/about')
以我項(xiàng)目的打包為例,不指定webpackChunkName打包出來(lái)js文件夾有17個(gè)文件

指定兩個(gè)頁(yè)面路由為相同的webpackChunkName后打包出來(lái)未文件夾只有16個(gè)

原因就是相同的webpackChunkName會(huì)合并打包為一個(gè)js文件
gzip壓縮優(yōu)化
簡(jiǎn)單說(shuō)gzip就是在打包后再對(duì)文件進(jìn)行一邊壓縮,讓文件更小,傳輸更快,效果就是你點(diǎn)擊網(wǎng)址后會(huì)很快的顯示出相關(guān)內(nèi)容
但不是每個(gè)瀏覽器都支持gzip的,如果知道客戶(hù)端是否支持gzip呢,請(qǐng)求頭中有個(gè)Accept-Encoding來(lái)標(biāo)識(shí)對(duì)壓縮的支持??蛻?hù)端http請(qǐng)求頭聲明瀏覽器支持的壓縮方式,服務(wù)端配置啟用壓縮,壓縮的文件類(lèi)型,壓縮方式。當(dāng)客戶(hù)端請(qǐng)求到服務(wù)端的時(shí)候,服務(wù)器解析請(qǐng)求頭,如果客戶(hù)端支持gzip壓縮,響應(yīng)時(shí)對(duì)請(qǐng)求的資源進(jìn)行壓縮并返回給客戶(hù)端,瀏覽器按照自己的方式解析,在http響應(yīng)頭,我們可以看到content-encoding:gzip,這是指服務(wù)端使用了gzip的壓縮方式。

前端開(kāi)啟GZIP
這里需要用到一個(gè)插件:compression-webpack-plugin
npm install compression-webpack-plugin
在 vue.config.js中進(jìn)行設(shè)置
configureWebpack: {
...
new CompressionPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.html$|\.css/,
threshold: 10240, // 只有大小大于該值的資源會(huì)被處理 10240
minRatio: 0.8, // 只有壓縮率小于這個(gè)值的資源才會(huì)被處理
// 刪除原文件
// 如果開(kāi)發(fā)環(huán)境要用就設(shè)置未false,不然編輯以后頁(yè)面打不開(kāi)
// 如果就生產(chǎn)環(huán)境用可以設(shè)置為true,這樣打包后的體積更小
deleteOriginalAssets: false
}),
...
}
,,,
// gzip壓縮
在服務(wù)器的 nginx中 開(kāi)啟GZIP壓縮

查看是否成功開(kāi)啟GZIP壓縮

參考文獻(xiàn)
Vue項(xiàng)目?jī)?yōu)化文檔
vue.config.js打包優(yōu)化
前端性能優(yōu)化之gzip
到此這篇關(guān)于vue2.x 從vue.config.js配置到項(xiàng)目?jī)?yōu)化的文章就介紹到這了,更多相關(guān)vue 項(xiàng)目?jī)?yōu)化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
基于Vue2.0和Typescript實(shí)現(xiàn)多主題切換的示例
本文主要介紹了基于Vue2.0和Typescript實(shí)現(xiàn)多主題切換的示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Vue實(shí)現(xiàn)input寬度隨文字長(zhǎng)度自適應(yīng)操作
這篇文章主要介紹了Vue實(shí)現(xiàn)input寬度隨文字長(zhǎng)度自適應(yīng)操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue組件props屬性監(jiān)聽(tīng)不到值變化問(wèn)題
這篇文章主要介紹了vue組件props屬性監(jiān)聽(tīng)不到值變化問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
vue項(xiàng)目中使用pinyin轉(zhuǎn)換插件方式
這篇文章主要介紹了vue項(xiàng)目中使用pinyin轉(zhuǎn)換插件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
vue?async?await?promise等待異步接口執(zhí)行完畢再進(jìn)行下步操作教程
在Vue中可以使用異步函數(shù)和await關(guān)鍵字來(lái)控制上一步執(zhí)行完再執(zhí)行下一步,這篇文章主要給大家介紹了關(guān)于vue?async?await?promise等待異步接口執(zhí)行完畢再進(jìn)行下步操作的相關(guān)資料,需要的朋友可以參考下2023-12-12
Vue中Video標(biāo)簽播放解析后短視頻去水印無(wú)響應(yīng)解決
這篇文章主要為大家介紹了Vue中使用Video標(biāo)簽播放?<解析后的短視頻>去水印視頻無(wú)響應(yīng)的解決方式,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-04-04
Vue使用vm.$set()解決對(duì)象新增屬性不能響應(yīng)的問(wèn)題
這篇文章主要介紹了Vue使用vm.$set()解決對(duì)象新增屬性不能響應(yīng)的問(wèn)題,為了解決這個(gè)問(wèn)題,Vue提供了一個(gè)特殊的方法vm.$set(object, propertyName, value),也可以使用全局的Vue.set(object, propertyName, value)方法,需要的朋友可以參考下2023-05-05

