Vue怎么使用CDN优化首屏加载的速度
这次给大家带来Vue怎么使用CDN优化首屏加载的速度，Vue使用CDN优化首屏加载速度的注意事项有哪些，下面就是实战案例，一起来看一下。
前言
作为一个网站应用，加载速度是非常重要的。加载速度，一个是程序的合理安排，如以组件按需加载，一个是js、css等资源的异步加载。
在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)
相信看了本文案例你已经掌握了方法，更多精彩请关注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
Perbincangan tentang strategi pengoptimuman gc Golang
Mar 06, 2024 pm 02:39 PM
Kutipan sampah (GC) Golang sentiasa menjadi topik hangat di kalangan pemaju. Sebagai bahasa pengaturcaraan yang pantas, pengumpul sampah terbina dalam Golang boleh mengurus memori dengan sangat baik, tetapi apabila saiz program bertambah, beberapa masalah prestasi kadangkala berlaku. Artikel ini akan meneroka strategi pengoptimuman GC Golang dan menyediakan beberapa contoh kod khusus. Pengumpulan sampah dalam pemungut sampah Golang Golang adalah berdasarkan sapuan tanda serentak (concurrentmark-s
Tafsiran mendalam: Mengapa Laravel lambat seperti siput?
Mar 07, 2024 am 09:54 AM
Laravel ialah rangka kerja pembangunan PHP yang popular, tetapi kadangkala ia dikritik kerana lambat seperti siput. Apakah sebenarnya yang menyebabkan kelajuan Laravel tidak memuaskan? Artikel ini akan memberikan penjelasan yang mendalam tentang sebab mengapa Laravel lambat seperti siput dari pelbagai aspek, dan menggabungkannya dengan contoh kod khusus untuk membantu pembaca memperoleh pemahaman yang lebih mendalam tentang masalah ini. 1. Isu prestasi pertanyaan ORM Dalam Laravel, ORM (Pemetaan Perhubungan Objek) ialah fungsi yang sangat berkuasa yang membolehkan
Pengoptimuman program C++: teknik pengurangan kerumitan masa
Jun 01, 2024 am 11:19 AM
Kerumitan masa mengukur masa pelaksanaan algoritma berbanding saiz input. Petua untuk mengurangkan kerumitan masa program C++ termasuk: memilih bekas yang sesuai (seperti vektor, senarai) untuk mengoptimumkan storan dan pengurusan data. Gunakan algoritma yang cekap seperti isihan pantas untuk mengurangkan masa pengiraan. Hapuskan berbilang operasi untuk mengurangkan pengiraan berganda. Gunakan cawangan bersyarat untuk mengelakkan pengiraan yang tidak perlu. Optimumkan carian linear dengan menggunakan algoritma yang lebih pantas seperti carian binari.
Penyahkodan kesesakan prestasi Laravel: Teknik pengoptimuman didedahkan sepenuhnya!
Mar 06, 2024 pm 02:33 PM
Penyahkodan kesesakan prestasi Laravel: Teknik pengoptimuman didedahkan sepenuhnya! Laravel, sebagai rangka kerja PHP yang popular, menyediakan pembangun dengan fungsi yang kaya dan pengalaman pembangunan yang mudah. Walau bagaimanapun, apabila saiz projek meningkat dan bilangan lawatan meningkat, kami mungkin menghadapi cabaran kesesakan prestasi. Artikel ini akan menyelidiki teknik pengoptimuman prestasi Laravel untuk membantu pembangun menemui dan menyelesaikan masalah prestasi yang berpotensi. 1. Pengoptimuman pertanyaan pangkalan data menggunakan pemuatan tertunda Eloquent Apabila menggunakan Eloquent untuk menanya pangkalan data, elakkan
Apakah prestasi Kirin 9000s?
Mar 22, 2024 pm 03:21 PM
Sebagai telefon bimbit utama yang telah menarik perhatian ramai, Kirin 9000s telah menarik perbincangan dan perhatian meluas sejak dilancarkan. Ia dilengkapi dengan cip perdana terbaharu siri Kirin 9000, dan prestasinya sangat kukuh. Jadi, apakah prestasi Kirin 9000s? Mari kita terokai bersama-sama. Pertama sekali, Kirin 9000s dihasilkan menggunakan proses 5nm baharu, yang sangat meningkatkan prestasi dan kawalan penggunaan kuasa cip. Berbanding dengan pemproses Kirin sebelumnya, Kirin 9000s telah meningkatkan prestasi dengan ketara. Sama ada menjalankan permainan besar, multitasking atau
Kesesakan prestasi Laravel didedahkan: penyelesaian pengoptimuman didedahkan!
Mar 07, 2024 pm 01:30 PM
Kesesakan prestasi Laravel didedahkan: penyelesaian pengoptimuman didedahkan! Dengan perkembangan teknologi Internet, pengoptimuman prestasi laman web dan aplikasi menjadi semakin penting. Sebagai rangka kerja PHP yang popular, Laravel mungkin menghadapi kesesakan prestasi semasa proses pembangunan. Artikel ini akan meneroka masalah prestasi yang mungkin dihadapi oleh aplikasi Laravel dan menyediakan beberapa penyelesaian pengoptimuman dan contoh kod khusus supaya pembangun dapat menyelesaikan masalah ini dengan lebih baik. 1. Pengoptimuman pertanyaan pangkalan data Pertanyaan pangkalan data ialah salah satu kesesakan prestasi biasa dalam aplikasi Web. wujud
Bagaimana untuk mengoptimumkan item permulaan sistem WIN7
Mar 26, 2024 pm 06:20 PM
1. Tekan kombinasi kekunci (kekunci win + R) pada desktop untuk membuka tetingkap jalankan, kemudian masukkan [regedit] dan tekan Enter untuk mengesahkan. 2. Selepas membuka Registry Editor, kami klik untuk mengembangkan [HKEY_CURRENT_USERSoftwareMicrosoftWindowsCurrentVersionExplorer], dan kemudian lihat jika terdapat item Serialize dalam direktori Jika tidak, kami boleh klik kanan Explorer, buat item baharu dan namakannya Serialize. 3. Kemudian klik Serialize, kemudian klik kanan ruang kosong dalam anak tetingkap kanan, cipta nilai bit DWORD (32) baharu dan namakannya Bintang
Konfigurasi parameter Vivox100s didedahkan: Bagaimana untuk mengoptimumkan prestasi pemproses?
Mar 24, 2024 am 10:27 AM
Konfigurasi parameter Vivox100s didedahkan: Bagaimana untuk mengoptimumkan prestasi pemproses? Dalam era perkembangan teknologi yang pesat hari ini, telefon pintar telah menjadi bahagian yang amat diperlukan dalam kehidupan seharian kita. Sebagai bahagian penting telefon pintar, pengoptimuman prestasi pemproses berkaitan secara langsung dengan pengalaman pengguna telefon mudah alih. Sebagai telefon pintar berprofil tinggi, konfigurasi parameter Vivox100s telah menarik banyak perhatian, terutamanya pengoptimuman prestasi pemproses telah menarik banyak perhatian daripada pengguna. Sebagai "otak" telefon bimbit, pemproses secara langsung mempengaruhi kelajuan berjalan telefon bimbit.
