Bagaimana untuk mengoptimumkan projek uniapp? Artikel berikut akan berkongsi dengan anda beberapa kaedah dan cadangan pengoptimuman projek uniapp, saya harap ia akan membantu semua orang.
Pengenalan: Pengoptimuman prestasi telah menjadi keutamaan sejak zaman dahulu Koleksi kaedah pengoptimuman projek uniapp yang paling komprehensif akan ditambah mengikut pembangunan situasi
1. Kawasan data halaman yang kompleks dikapsulkan kepada komponen
Senario:
Sebagai contoh, projek mengandungi yang serupa halaman forum: klik ikon Suka titik, bilangan suka hendaklah 1 serta-merta, yang akan mencetuskan penyegerakan semua data pada peringkat halaman daripada lapisan js ke lapisan paparan, menyebabkan data keseluruhan halaman dikemas kini, menyebabkan kelewatan dan kelewatan klik
Pelan pengoptimuman:
Untuk halaman yang kompleks, apabila mengemas kini data di kawasan tertentu, anda perlu menjadikan kawasan ini sebagai komponen, supaya hanya komponen ini dikemas kini semasa mengemas kini data
Nota: app- nvue dan h5 tidak mempunyai masalah ini; sebab perbezaannya ialah applet pada masa ini hanya menyediakan mekanisme kemas kini perbezaan komponen dan tidak boleh secara automatik kira beza untuk semua muka surat
2. Elakkan menggunakan Gambar besar
Senario:
Jika besar bilangan sumber gambar yang besar digunakan dalam halaman, ia akan menyebabkan lag penukaran halaman, menyebabkan memori sistem meningkat, atau malah ranap skrin putih asas64ing fail binari besar juga sangat intensif sumber
Pelan pengoptimuman:
Sila mampatkan imej sebelum digunakan, elakkan imej besar, pertimbangkan jika perlu Sprite atau svg, jika kod mudah boleh mencapainya, tiada gambar diperlukan
3. Terdapat terlalu banyak halaman subkontrak untuk program mini dan APP
Pergi ke manual tapak web rasmi untuk melihat Konfigurasi
4 memuatkan imej
Penerangan fungsi:
Fungsi ini hanya untuk applet WeChat, Aplikasi, program mini Baidu, program mini ByteDance adalah sah dan didayakan oleh lalai
Pergi ke manual uView untuk melihat konfigurasi
5 Penyalahgunaan storan setempat adalah dilarang
Jangan. menyalahgunakan storan tempatan >
Dalam uni-app, setiap kali data yang ditakrifkan dalam data berubah, lapisan paparan akan dimaklumkan untuk memaparkan semula halaman jadi jika ia bukan pembolehubah yang diperlukan oleh paparan, ia tidak perlu untuk ditakrifkan dalam data. Tentukan pembolehubah secara luaran atau pasangkannya secara langsung pada contoh vue untuk mengelakkan pembaziran sumber
7. Muatkan data dalam kelompok untuk mengoptimumkan pemaparan halaman
<.> Senario:
Apabila halaman dimulakan, lapisan logik menghantar sejumlah besar data ke lapisan paparan pada satu masa, menyebabkan lapisan paparan menghasilkan sejumlah besar nod sekaligus, yang boleh menyebabkan komunikasi perlahan dan penukaran halaman tersekat
Pelan pengoptimuman:
Render halaman dengan mengemas kini sebahagian halaman sebagai contoh, jika pelayan mengembalikan 100 keping data , ia boleh dimuatkan dalam kelompok, memuatkan 50 keping pada satu masa, dan beban seterusnya akan dijalankan selepas 500ms
8 Elakkan komunikasi yang kerap antara lapisan paparan dan lapisan logik
Kurangkan pemantauan acara skrol bagi komponen paparan skrol Apabila acara skrol berlaku, lapisan paparan akan kerap menghantar data ke lapisan logik <. . apabila tatal ke atas kiri ditukar lapisan logik berkomunikasi dengan paparan ini boleh menyebabkan ketinggalan komunikasi>
Nota Apabila onPageScroll digunakan untuk pemantauan, lapisan paparan akan kerap. hantar data ke lapisan logik
-
Gunakan animasi css daripada melakukan animasi melalui antara muka operasi pemasa js
Jika anda perlu melakukan susulan operasi dalam kanvas, adalah disyorkan untuk menggunakan renderjs pada bahagian aplikasi dan komponen paparan web pada halaman applet dalam paparan web tidak mempunyai konsep pemisahan lapisan logik dan lapisan paparan , secara semula jadi tidak akan ada kehilangan komunikasi;
-
9. Pengoptimuman CSS
Anda perlu mengetahui atribut yang mempunyai kesan warisan, seperti fon, Warna fon dan saiz teks yang diwarisi, kod berulang tanpa makna adalah dilarang
10. Gunakan pendikit dan anti goncang
Anti goncang:
Tunggu n saat untuk melaksanakan fungsi jika ia dicetuskan semula semasa tempoh menunggu, masa menunggu akan dimulakan semula
Pendikit:
pencetus Acara hanya dilaksanakan sekali dalam masa n saat. Jika n saat tidak berlalu, ia akan menjadi tidak sah jika ia dicetuskan semula
11. Optimumkan animasi penukaran halaman
Adegan:
>
Apabila halaman dimulakan, terdapat sejumlah besar gambar atau pemaparan komponen asli dan sejumlah besar komunikasi data Penyajian halaman baharu dan animasi kemasukan borang akan berlaku untuk bersaing untuk mendapatkan sumber, mengakibatkan ketinggalan penukaran halaman dan bingkai jatuh
Pelan pengoptimuman :
Adalah disyorkan untuk menangguhkan 100ms~300ms untuk memaparkan imej atau komponen asli yang kompleks, dan melakukan komunikasi data secara berkelompok untuk kurangkan bilangan nod yang dipaparkan pada satu masa
Kesan animasi sisi apl boleh diperibadikan kesan animasi penyemperitan pautan dwi bentuk popin/popout menggunakan lebih banyak sumber dilaksanakan pada halaman semasa animasi, ia boleh menyebabkan animasi menjatuhkan bingkai ;Pada masa ini, anda boleh menggunakan kesan animasi yang menggunakan kurang sumber, seperti slaid-in-right / slaid-out-right
- App-nvue dan H5, yang turut menyokong pramuat halaman,
uni.preloadPage, yang boleh memberikan pengalaman pengguna yang lebih baik
12. Optimumkan warna latar belakang kepada berkelip putih
Adegan:
Latar belakang berkelip putih apabila memasuki halaman baharu. ia mungkin berlaku dalam halaman vue bahawa borang baharu mempunyai latar belakang kelabu-putih apabila ia mula-mula memulakan animasi, dan bertukar kepada kelabu-putih apabila animasi tamat, menyebabkan skrin percikan
Pengoptimuman penyelesaian:
- Tulis gaya dalam App.vue untuk mempercepatkan pemaparan gaya halaman; gaya dalam App.vue akan dimuatkan dahulu, dan kemudian gaya halaman Vue biasa akan dimuatkan
- Sebelah apl juga boleh digunakan dalam halaman Konfigurasikan warna latar belakang asli halaman secara berasingan dalam gaya halaman .json, contohnya, konfigurasikan warna latar belakang global di bawah globalStyle->style->app-plus->latar belakang
"style": { "app-plus": { "background":"#000000" } }Salin selepas log masuk
- halaman nvue tidak mempunyai masalah ini, anda juga boleh menukarnya kepada halaman nvue
13 Optimumkan kelajuan permulaan
14 Optimumkan saiz pakej
- Apabila uni-app dikeluarkan kepada program mini, jika fungsi es6 hingga es5 dan penjajaran css digunakan, kod mungkin meningkatkan Kelantangan, anda boleh mengkonfigurasi sama ada fungsi kompilasi ini dihidupkan
- Sebelah H5 uni-app, uni-app menyediakan mekanisme pengoptimuman gegaran pepohon dan volum pakej keseluruhan apl uni sebelum pengoptimuman gegar pepohon Kira-kira 500k, 162k selepas gzip digunakan pada pelayan . Untuk mendayakan pengoptimuman gegaran pokok, anda perlu mengkonfigurasi
pada bahagian apl uni-app Enjin asas Android ialah kira-kira 9M. seperti peta dan Bluetooth dsb. Jika anda tidak memerlukan modul ini semasa membungkus, anda boleh memotongnya untuk mengurangkan pakej pengedaran boleh dipilih dalam kebenaran modul manifes.json-App
-
Selepas bahagian App dipasang dalam HBuilderX 2.7, bukan v3 digugurkan daripada bahagian App Dalam mod penyusunan, saiz pakej dikurangkan sebanyak 3M
15 . Penyalahgunaan pemalam js luaran adalah dilarang
Penerangan:
Jika terdapat API rasmi, jangan gunakan pemalam js tambahan untuk meningkatkan saiz projek
Contohnya:
Gunakan encodeURIComponent() dan decodeURIComponent() untuk menghantar url terus
Disyorkan: "
tutorial uniapp
"
Atas ialah kandungan terperinci Bagaimana untuk mengoptimumkan projek uniapp? Kongsi beberapa rancangan dan cadangan pengoptimuman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
