Vue怎样使用CDN优化首屏加载
这次给大家带来Vue怎样使用CDN优化首屏加载，Vue使用CDN优化首屏加载的注意事项有哪些，下面就是实战案例，一起来看一下。
在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。
解决方法是，将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首开的目的。
外部的库文件，可以使用CDN资源，或者别的服务器资源等。
下面，以引入vue、vuex、vue-router为例，说明处理流程。
一、资源引入
在index.html中，添加CDN资源，例如bootstrap：
<body> <p id="app"></p> <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script> </body>
二、添加配置
在bulid/webpack.base.conf.js文件中，增加externals，将引用的外部模块导入，如下：
module.exports = {
entry: {
app: './src/main.js'
},
externals:{
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex':'Vuex'
}注意一点：
格式为 'aaa' : 'bbb', 其中，aaa表示要引入的资源的名字，bbb表示该模块提供给外部引用的名字，由对应的库自定。例如，vue为Vue，vue-router为VueRouter.
三、去掉原有的引用
去掉import，如：
// import Vue from 'vue' // import Router from 'vue-router'
去掉Vue.use(XXX)，如：
// Vue.use(Router)
测试
重新npm run build，会看到 vendor.js体积有所下降了。通过开发者模式的Network工具，可以看到vue.js、vuex.js、vendor.js等文件会分别由一个线程进行加载。且因为使用了CDN，加载速度比自已的服务器更快。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci Vue怎样使用CDN优化首屏加载. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Apakah perisian crystaldiskmark? -Bagaimana menggunakan crystaldiskmark?
Mar 18, 2024 pm 02:58 PM
CrystalDiskMark ialah alat penanda aras HDD kecil untuk pemacu keras yang cepat mengukur kelajuan baca/tulis berurutan dan rawak. Seterusnya, biarkan editor memperkenalkan CrystalDiskMark kepada anda dan cara menggunakan crystaldiskmark~ 1. Pengenalan kepada CrystalDiskMark CrystalDiskMark ialah alat ujian prestasi cakera yang digunakan secara meluas yang digunakan untuk menilai kelajuan baca dan tulis serta prestasi pemacu keras mekanikal dan pemacu keadaan pepejal (SSD Prestasi I/O rawak. Ia adalah aplikasi Windows percuma dan menyediakan antara muka mesra pengguna dan pelbagai mod ujian untuk menilai aspek prestasi cakera keras yang berbeza dan digunakan secara meluas dalam ulasan perkakasan
Bagaimana untuk memuat turun foobar2000? -Cara menggunakan foobar2000
Mar 18, 2024 am 10:58 AM
foobar2000 ialah perisian yang boleh mendengar sumber muzik pada bila-bila masa Ia membawakan anda semua jenis muzik dengan kualiti bunyi tanpa kehilangan Versi pemain muzik yang dipertingkatkan membolehkan anda mendapatkan pengalaman muzik yang lebih komprehensif dan selesa mainkan audio lanjutan pada komputer Peranti dipindahkan ke telefon mudah alih untuk memberikan pengalaman main balik muzik yang lebih mudah dan cekap Reka bentuk antara muka adalah ringkas, jelas dan mudah digunakan Ia menggunakan gaya reka bentuk minimalis tanpa terlalu banyak hiasan dan operasi yang menyusahkan untuk bermula dengan cepat. Ia juga menyokong pelbagai kulit dan Tema, memperibadikan tetapan mengikut pilihan anda sendiri, dan mencipta pemain muzik eksklusif yang menyokong main balik berbilang format audio. Ia juga menyokong fungsi perolehan audio untuk melaraskan kelantangan kepada keadaan pendengaran anda sendiri untuk mengelakkan kerosakan pendengaran yang disebabkan oleh kelantangan yang berlebihan. Seterusnya, izinkan saya membantu anda
Cara menggunakan NetEase Mailbox Master
Mar 27, 2024 pm 05:32 PM
NetEase Mailbox, sebagai alamat e-mel yang digunakan secara meluas oleh netizen Cina, sentiasa memenangi kepercayaan pengguna dengan perkhidmatannya yang stabil dan cekap. NetEase Mailbox Master ialah perisian e-mel yang dicipta khas untuk pengguna telefon mudah alih. Ia sangat memudahkan proses menghantar dan menerima e-mel dan menjadikan pemprosesan e-mel kami lebih mudah. Jadi bagaimana untuk menggunakan NetEase Mailbox Master, dan apakah fungsi khusus yang ada di bawah, editor tapak ini akan memberi anda pengenalan terperinci, dengan harapan dapat membantu anda. Mula-mula, anda boleh mencari dan memuat turun aplikasi NetEase Mailbox Master di gedung aplikasi mudah alih. Cari "Induk Peti Mel NetEase" dalam App Store atau Baidu Mobile Assistant, dan kemudian ikut gesaan untuk memasangnya. Selepas muat turun dan pemasangan selesai, kami membuka akaun e-mel NetEase dan log masuk. Antara muka log masuk adalah seperti yang ditunjukkan di bawah
Cara menggunakan aplikasi Baidu Netdisk
Mar 27, 2024 pm 06:46 PM
Storan awan telah menjadi bahagian yang amat diperlukan dalam kehidupan dan kerja harian kita pada masa kini. Sebagai salah satu perkhidmatan storan awan terkemuka di China, Baidu Netdisk telah memenangi hati sebilangan besar pengguna dengan fungsi storan yang berkuasa, kelajuan penghantaran yang cekap dan pengalaman operasi yang mudah. Dan sama ada anda ingin menyandarkan fail penting, berkongsi maklumat, menonton video dalam talian atau mendengar muzik, Baidu Cloud Disk boleh memenuhi keperluan anda. Walau bagaimanapun, ramai pengguna mungkin tidak memahami penggunaan khusus aplikasi Baidu Netdisk, jadi tutorial ini akan memperkenalkan anda tentang cara menggunakan aplikasi Baidu Netdisk secara terperinci Jika anda masih keliru, sila ikuti artikel ini untuk mengetahui lebih lanjut! Cara menggunakan Cakera Rangkaian Awan Baidu: 1. Pemasangan Mula-mula, semasa memuat turun dan memasang perisian Baidu Cloud, sila pilih pilihan pemasangan tersuai.
Tutorial BTCC: Bagaimana untuk mengikat dan menggunakan dompet MetaMask pada pertukaran BTCC?
Apr 26, 2024 am 09:40 AM
MetaMask (juga dipanggil Little Fox Wallet dalam bahasa Cina) ialah perisian dompet penyulitan percuma dan diterima baik. Pada masa ini, BTCC menyokong pengikatan pada dompet MetaMask Selepas mengikat, anda boleh menggunakan dompet MetaMask untuk log masuk dengan cepat, menyimpan nilai, membeli syiling, dsb., dan anda juga boleh mendapatkan bonus percubaan 20 USDT untuk pengikatan pertama. Dalam tutorial dompet BTCCMetaMask, kami akan memperkenalkan secara terperinci cara mendaftar dan menggunakan MetaMask, dan cara mengikat dan menggunakan dompet Little Fox dalam BTCC. Apakah dompet MetaMask? Dengan lebih 30 juta pengguna, MetaMask Little Fox Wallet ialah salah satu dompet mata wang kripto yang paling popular hari ini. Ia percuma untuk digunakan dan boleh dipasang pada rangkaian sebagai sambungan
Cara menggunakan aplikasi Xiaomi Auto
Apr 01, 2024 pm 09:19 PM
Perisian kereta Xiaomi menyediakan fungsi kawalan kereta jauh, membolehkan pengguna mengawal kenderaan dari jauh melalui telefon bimbit atau komputer, seperti membuka dan menutup pintu dan tingkap kenderaan, menghidupkan enjin, mengawal penghawa dingin dan audio kenderaan, dsb. penggunaan dan kandungan perisian ini, mari kita pelajari bersama-sama . Senarai lengkap fungsi dan kaedah penggunaan apl Xiaomi Auto 1. Apl Xiaomi Auto telah dilancarkan di Apple AppStore pada 25 Mac, dan kini boleh dimuat turun dari gedung aplikasi pada pembelian kereta: Ketahui tentang sorotan teras dan parameter teknikal Xiaomi Auto, dan buat temu janji untuk pandu uji Konfigurasikan dan pesan kereta Xiaomi anda, dan sokong pemprosesan dalam talian bagi barang tugasan pengambilan kereta. 3. Komuniti: Memahami maklumat jenama Xiaomi Auto, bertukar pengalaman kereta, dan berkongsi kehidupan kereta yang indah 4. Kawalan kereta: Telefon bimbit adalah alat kawalan jauh, alat kawalan jauh, keselamatan masa nyata;
Cara menggunakan cdkey kotak hitam kecil
Mar 12, 2024 pm 07:34 PM
Bagaimana untuk menggunakan cdkey Little Black Box? Secara ringkasnya, anda boleh terus membeli permainan di platform Steam daripada Little Black Box, dan anda akan menerima kod penebusan CDK selepas pembelian yang berjaya. Seterusnya, gunakan kod penebusan ini di Steam Mall untuk membeli permainan yang sepadan. Ramai rakan-rakan mungkin tidak tahu cara menggunakan cdkey kotak hitam kecil Di bawah saya akan menerangkan langkah-langkah penebusan secara terperinci, saya harap ia akan membantu anda. Cara menggunakan cdkey Little Black Box 1. Salin dahulu kod penebusan CDK yang diperolehi selepas membeli permainan Little Black Box. 2. Kemudian mulakan platform Steam. 3. Klik pada pilihan "Permainan" dalam menu di sudut kiri atas. 4. Cari dan klik "Aktifkan Produk pada Steam" dalam menu baharu. 5. Klik Seterusnya terus pada antara muka pop timbul. 6. Beli kotak hitam kecil
Apa itu chirp down? -Cara menggunakan chirp down
Mar 18, 2024 am 11:46 AM
Chirp Down juga boleh dipanggil JJDown Ini adalah alat muat turun video yang dicipta khas untuk Bilibili Namun, ramai rakan tidak memahami perisian ini, biarkan editor menerangkan kepada anda apa itu Chirp Down. Cara menggunakan chirp down. 1. Asal usul Chirpdown Chirpdown berasal pada tahun 2014. Ia adalah perisian muat turun video yang sangat lama Antara muka menggunakan gaya jubin Win10, yang ringkas, cantik dan mudah dikendalikan. Chirna ialah gadis poster Chirpdown, dan artisnya ialah あさひクロイ. Jijidown sentiasa komited untuk menyediakan pengguna pengalaman muat turun yang terbaik, sentiasa mengemas kini dan mengoptimumkan perisian, menyelesaikan pelbagai masalah dan pepijat, serta menambah fungsi dan ciri baharu. Fungsi Chirp Down Chirp Down ialah
