目錄
一、Gzip壓縮
二、異步組件
三、分包策略
最后
?
????????項目的性能優(yōu)化是有完整項目經(jīng)歷的開發(fā)者都會遇到得一個問題。這是整個項目開發(fā)最后的一步，也是最關(guān)鍵的一步，做一個項目并不是單單完成功能就算結(jié)束了，作為開發(fā)者，更要站在用戶角度去進行項目體驗，響應(yīng)快速的程序交互會直接提升程序的印象分。反之，如果頁面間的交互響應(yīng)緩慢、時?？D，無論程序功能再多再強大，讓人很難去想去體驗第二次。這個時候，性能優(yōu)化尤為重要。
一、Gzip壓縮
?1.服務(wù)端nginx Gzip壓縮配置
????????nginx開啟gzip壓縮后，就會幫你來把數(shù)據(jù)（靜態(tài)資源 和 接口數(shù)據(jù)）進行壓縮，然后傳入到客戶端，客戶端來解壓，然后在進行代碼的讀取，經(jīng)過測試之后，發(fā)現(xiàn)資源包體積會被壓縮到原來的20%左右，這樣大大減少了資源的請求時間，提升了頁面的響應(yīng)速度。Gzip壓縮是項目必備的優(yōu)化方法，也是最直觀有效的。
// nginx.conf ?
http { ?
gzip on; // 開啟gzip壓縮
gzip_types *; // 對響應(yīng)的MIME types在text/html的基礎(chǔ)上進行擴展配置，*匹配所有MIME types ...
gzip_static on; // 開啟gzip_static壓縮
// 詳細的配置信息可以參考nginx官網(wǎng)： http://nginx.org/en/docs/http/ngx_http_gzip_module.html
}2.客戶端插件Gzip壓縮
? ? ? ? webpack項目使用的compression-webpack-plugin插件
// 這里使用的 vue.config.js, webpack.config.js 里面內(nèi)容大部分相同，只是vue.config.js里面是鏈?zhǔn)秸{(diào)用的。
?const compressionWebpackPlugin = require('compression-webpack-plugin')
?configureWebpack: {
? ?plugins: [new compressionWebpackPlugin({
? ? ?filename: '[path].gz[query]', //壓縮后的文件名
? ? ?algorithm: 'gzip', // 壓縮格式 有：gzip、brotliCompress,
? ? ?test: /.(js|css|svg)$/,
? ? ?threshold: 10240,// 只處理比這個值大的資源，按字節(jié)算
? ? ?minRatio: 0.8, //只有壓縮率比這個值小的文件才會被處理，壓縮率=壓縮大小/原始大小，如果壓縮后和原始文件大小沒有太大區(qū)別，就不用壓縮
? ? ?deleteOriginalAssets: false //是否刪除原文件，最好不刪除，服務(wù)器會自動優(yōu)先返回同名的.gzip資源，如果找不到還可以拿原始文件
? })],
? ? ? ? vite項目使用的vite-plugin-compression插件
// vite.config.ts
import viteCompression from 'vite-plugin-compression';
// https://vitejs.dev/config/
export default defineConfig({
?plugins: [
? ? ?...
? ? ?viteCompression({
? ? ? ? ?verbose: true, // 默認即可
? ? ? ? ?disable: false, //開啟壓縮(不禁用)，默認即可
? ? ? ? ?deleteOriginFile: false, //刪除源文件
? ? ? ? ?threshold: 10240, //壓縮前最小文件大小
? ? ? ? ?algorithm: 'gzip', //壓縮算法
? ? ? ? ?ext: '.gz', //文件類型
? ? })
? ? ?...
],
})
二、vue異步組件
? ? ? ?異步組件在需要渲染的時候才會被加載，同時延遲加載其余組件，從而提高了首次加載速度，減輕了頁面渲染負擔(dān)，并且也減輕了服務(wù)器壓力。在項目打包后，如果一個vue頁面import了太多的資源，那么這個頁面生成一個js資源包而且體積很大，所以進入頁面的時候需要下載完這個資源包才會渲染，這樣服務(wù)端的壓力很大，可能出現(xiàn)響應(yīng)時間長、請求阻塞等問題。使用異步組件后，打包后會將這些組件打包為單獨的js包，這樣就將一個資源分割成了n個，服務(wù)端可以發(fā)起多個http請求來下載資源，大大提升了響應(yīng)時間與渲染速度。
?????????1.vue2異步組件
????????使用 Vue.component 方法與 resolve => require(['./yourComponent.vue'], resolve) 結(jié)合使用。require語法將會告訴 webpack，自動將你的構(gòu)建代碼切割成多個包，這些包會通過 http 請求加載。
Vue.component('async-component', function(resolve) {
require(['./components/AsyncComponent.vue'], resolve)
})? ? ? ? 2.vue3異步組件
? ? ? ? 使用vue3提供的?defineAsyncComponent?方法
import { defineAsyncComponent } from "vue"
const LoginPopup = defineAsyncComponent(() => import("./components/LoginPopup.vue"))
?使用異步組件之前主頁面打包完資源包6M
使用異步組件之后主頁面打包完資源包，把頁面掛載的組件單獨打包
?
?
三、分包策略
? ? ? ? ?其實異步組件就是vue的一種分包策略，但是由于前期考慮不足，導(dǎo)致開發(fā)完成后遇到嚴重的性能問題，這時候才考慮性能的優(yōu)化方案，使用vue異步組件之后，發(fā)現(xiàn)存在bug，因為引入組件都使用了ref標(biāo)記，由于ref在組件沒有實例的時候是獲取不到的，所以會報undeifiend。沒辦法只能通過vite工具來實現(xiàn)，在vite運行時是基于ESMoudle，打包是基于rollup，所以配置rollup打包即可。如下設(shè)置即可分割單個vue文件，比較過后與異步組件分割的文件大小幾乎一致。
// vite.config.ts
build: {
// rollup 配置
rollupOptions: {
output: {
manualChunks(id: any): string {
if (id.includes("style.css")) {
// 需要單獨分割那些資源 就寫判斷邏輯就行
return 'src/style.css';
}
if (id.includes("HelloWorld.vue")) {
// 單獨分割hello world.vue文件
return 'src/components/HelloWorld.vue';
}
// 最小化拆分包
if (id.includes("node_modules")) {
return id
.toString()
.split("node_modules/")[1]
.split("/")[0]
.toString();
}
}
}
}
}
???????分包之前，只有一個主頁js+css兩個資源包，首屏加載請求時間需要1.5s，點擊登錄等2s才有反應(yīng)，而且這個時間是對網(wǎng)速有一定要求的，網(wǎng)絡(luò)延遲高甚至要等7-8s，這對于用戶體驗來說是非常差的。
? ? ? ?分包之后響應(yīng)時間不到1s，雖然還很慢，但是請求高并發(fā)使請求時間趨于穩(wěn)定，最大的文件體積不到原來的1/10，更多的是文件的編譯時間，請求資源時間不會有太大影響。
??
文章來源：http://www.zghlxwxcb.cn/news/detail-707449.html
?
最后
?????????前端的優(yōu)化方案肯定不止這些，還有許多包括webpack的代碼優(yōu)化插件、刪除打包后的map文件、腳本優(yōu)化、靜態(tài)資源優(yōu)化、懶加載、預(yù)編譯、SSR渲染等等方案，但是大的方面弄好這三個就可以了，其他都是需要在編碼過程中需要注意與優(yōu)化的細節(jié)。文章來源地址http://www.zghlxwxcb.cn/news/detail-707449.html
到了這里，關(guān)于vue前端性能優(yōu)化之分包策略、異步組件、Gzip壓縮的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
