CDN优化首屏加载速度
这次给大家带来CDN优化首屏加载速度，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)
测试
重新npm run build，会看到 vendor.js体积有所下降了。通过开发者模式的Network工具，可以看到vue.js、vuex.js、vendor.js等文件会分别由一个线程进行加载。且因为使用了CDN，加载速度比自已的服务器更快。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是CDN优化首屏加载速度的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
深度解读：为何Laravel速度慢如蜗牛？
Mar 07, 2024 am 09:54 AM
Laravel是一款广受欢迎的PHP开发框架，但有时候被人诟病的就是其速度慢如蜗牛。究竟是什么原因导致了Laravel的速度不尽如人意呢？本文将从多个方面深度解读Laravel速度慢如蜗牛的原因，并结合具体的代码示例，帮助读者更深入地了解此问题。1.ORM查询性能问题在Laravel中，ORM（对象关系映射）是一个非常强大的功能，可以让
Golang的gc优化策略探讨
Mar 06, 2024 pm 02:39 PM
Golang的垃圾回收（GC）一直是开发者们关注的一个热门话题。Golang作为一门快速的编程语言，其自带的垃圾回收器能够很好地管理内存，但随着程序规模的增大，有时候会出现一些性能问题。本文将探讨Golang的GC优化策略，并提供一些具体的代码示例。Golang中的垃圾回收Golang的垃圾回收器采用的是基于并发标记-清除（concurrentmark-s
解码Laravel性能瓶颈：优化技巧全面揭秘！
Mar 06, 2024 pm 02:33 PM
解码Laravel性能瓶颈：优化技巧全面揭秘！Laravel作为一款流行的PHP框架，为开发者提供了丰富的功能和便捷的开发体验。然而，随着项目规模增大和访问量增加，我们可能会面临性能瓶颈的挑战。本文将深入探讨Laravel性能优化的技巧，帮助开发者发现并解决潜在的性能问题。一、数据库查询优化使用Eloquent延迟加载在使用Eloquent查询数据库时，避免
C++ 程序优化：时间复杂度降低技巧
Jun 01, 2024 am 11:19 AM
时间复杂度衡量算法执行时间与输入规模的关系。降低C++程序时间复杂度的技巧包括：选择合适的容器（如vector、list）以优化数据存储和管理。利用高效算法（如快速排序）以减少计算时间。消除多重运算以减少重复计算。利用条件分支以避免不必要的计算。通过使用更快的算法（如二分搜索）来优化线性搜索。
Laravel性能瓶颈揭秘：优化方案大揭秘！
Mar 07, 2024 pm 01:30 PM
Laravel性能瓶颈揭秘：优化方案大揭秘！随着互联网技术的发展，网站和应用程序的性能优化变得愈发重要。作为一款流行的PHP框架，Laravel在开发过程中可能会面临性能瓶颈。本文将探讨Laravel应用程序可能遇到的性能问题，并提供一些优化方案和具体的代码示例，让开发者能够更好地解决这些问题。一、数据库查询优化数据库查询是Web应用中常见的性能瓶颈之一。在
优化WIN7系统开机启动项的操作方法
Mar 26, 2024 pm 06:20 PM
1、在桌面上按组合键(win键+R)打开运行窗口，接着输入【regedit】，回车确认。2、打开注册表编辑器后，我们依次点击展开【HKEY_CURRENT_USERSoftwareMicrosoftWindowsCurrentVersionExplorer】，然后看目录里有没有Serialize项，如果没有我们可以单击右键Explorer，新建项，并将其命名为Serialize。3、接着点击Serialize，然后在右边窗格空白处单击鼠标右键，新建一个DWORD(32)位值，并将其命名为Star
麒麟9000s性能究竟如何？
Mar 22, 2024 pm 03:21 PM
作为一款备受关注的旗舰手机，麒麟9000s一经推出便引起了广泛的讨论和关注。它搭载了麒麟9000系列最新的旗舰芯片，性能堪称强劲。那么，麒麟9000s的性能究竟如何？让我们一起来探讨。首先，麒麟9000s采用了全新的5nm工艺制造，极大提升了芯片的性能和功耗控制。与之前的麒麟处理器相比，麒麟9000s在性能上有着明显的提升。无论是运行大型游戏、多任务处理还是
Vivox100s参数配置大揭秘：处理器性能如何优化？
Mar 24, 2024 am 10:27 AM
Vivox100s参数配置大揭秘：处理器性能如何优化？在当今科技飞速发展的时代，智能手机已经成为我们日常生活不可或缺的一部分。作为智能手机的一个重要组成部分，处理器的性能优化直接关系到手机的使用体验。Vivox100s作为一款备受瞩目的智能手机，其参数配置备受关注，尤其是处理器性能的优化问题更是备受用户关注。处理器作为手机的“大脑”，直接影响到手机的运行速度
