本文介绍了如何在Vue项目中通过使用CDN优化首屏加载速度。通过将vue、vuex、vue-router等库文件从vendor.js中剥离，直接在index.html引入CDN资源，减少打包后的文件大小，提升用户体验。在webpack配置中设置externals，确保模块正确引用，并移除原有import及Vue.use()语句。
在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。
解决方法是，将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首开的目的。
外部的库文件，可以使用CDN资源，或者别的服务器资源等。
下面，以引入vue、vuex、vue-router为例，说明处理流程。
一、资源引入
在index.html中，添加CDN资源，例如bootstrap上的资源：
<body>
<div id="app"
最低0.47元/天 解锁文章
扫一扫
1092
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
