Bagaimana untuk mengoptimumkan projek uniapp? Kongsi beberapa rancangan dan cadangan pengoptimuman

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

<.> Senario:

Pelan pengoptimuman:

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

Tunggu n saat untuk melaksanakan fungsi jika ia dicetuskan semula semasa tempoh menunggu, masa menunggu akan dimulakan semula

pencetus Acara hanya dilaksanakan sekali dalam masa n saat. Jika n saat tidak berlalu, ia akan menjadi tidak sah jika ia dicetuskan semula

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:

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" } }

• halaman nvue tidak mempunyai masalah ini, anda juga boleh menukarnya kepada halaman nvue

13 Optimumkan kelajuan permulaan

• Semakin banyak kod projek, termasuk imej latar belakang dan fail fon tempatan, semakin besar kod tersebut, yang akan memberi kesan pada kelajuan permulaan program mini Anda harus memberi perhatian untuk mengawal saiz

• Tutup percikan pada bahagian App dan ia akan menjadi putih mekanisme pengesanan skrin, jika halaman utama sentiasa putih atau halaman utama itu sendiri adalah halaman pemindahan kosong, percikan mungkin mengambil masa 10 saat untuk. tutup

• Apl menggunakan pengkompil v3, dan halaman utama ialah masa halaman nvue, dan ditetapkan kepada

  mod permulaan pantas, pada masa itu Apl memulakan terpantas

• Apl ditetapkan kepada projek nvue tulen (tetapkan pemapar di bawah app-plus dalam manifes) :"asli"), projek jenis ini bermula lebih cepat dan boleh dimulakan dalam 2 saat; kerana keseluruhan aplikasi menggunakan pemaparan asli dan tidak memuatkan rangka kerja berasaskan web

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
Sokongan apl jika anda memilih projek nvue tulen (tetapkan pemapar: "native" di bawah app-plus dalam manifes), saiz pakej boleh dikurangkan lagi sebanyak kira-kira 2J
Selepas bahagian App dipasang dalam HBuilderX 2.7, bukan v3 digugurkan daripada bahagian App Dalam mod penyusunan, saiz pakej dikurangkan sebanyak 3M

Jika terdapat API rasmi, jangan gunakan pemalam js tambahan untuk meningkatkan saiz projek

Gunakan encodeURIComponent() dan decodeURIComponent() untuk menghantar url terus

Disyorkan: "

"

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!