Vue如何使用cdn加载资源加快打包速度
目录
- 为什么使用CDN
- 解决方法
- 使用CDN主要解决两个问题
- 具体步骤
- 资源引入
- 打包对比
- 附：vue项目常用的cdn地址
- 总结
为什么使用CDN
Vue项目打包的时候，默认会把所有代码合并生产新文件,其中包括各种库导致打包出来很大。如果使用cdn的话,会更利于程序的加载速度。
在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。
解决方法
将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首开的目的。
外部的库文件，可以使用CDN资源，或者别的服务器资源等。
使用CDN主要解决两个问题
- 打包时间太长、打包后代码体积太大，请求慢
- 服务器网络不稳带宽不高，使用cdn可以回避服务器带宽问题
具体步骤
下面，以引入vue、vuex、vue-router为例，说明处理流程。
资源引入
1. 在项目根目录index.html使用cdn节点导入
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<!--开发环境-->
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<!--生产环境-->
<!--<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>-->
<!-- 引入组件库 -->
<script src="https://cdn.bootcss.com/vue-router/3.2.0/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.23.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.15.6/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
</body>
2. 在vue.config.js中加入externals外部扩展
configureWebpack: {
externals: {
"vue": "Vue",
"vue-router": "VueRouter",
"axios": "axios",
"moment": "moment",
"element-ui": "ELEMENT",
}
},
这里解释一下externals 配置选项的作用：
我们想引用一个库，但是又不想让webpack打包，并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用，那就可以通过配置externals。
踩坑配置注意点：element-ui要大写为ELEMENT
3. 去掉原有的引用
如果不删除原先的import，项目还是会从node_modules中引入资源。
也就是说不删的话，npm run build时候仍会将引用的资源一起打包，生成文件会大不少。所以我认为还是删了好
打包对比
引入node_modules中模块：可以看到element和moment占比大
CDN引入模块：
能够看到vendor.js文件大大减少，打包速度也快了不少
问题集 vue-cli 4使用report分析vendor.js
Vue Cli（@/vue/cli）自带的webpack包体积优化工具，它可以查看各个模块的size大小，方便优化。只需要在build后面加上 --report 参数即可。
1. 我们把命令配置到package.json里
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"report": "vue-cli-service build --report" //加入该行
},
执行npm run report 打包并生成report。
注意：网上很多说要先安装webpack-bundle-analyzer包，其实不需要安装。
2. 运行npm run report 后，会在 build 的同时，在dist目录会生成一个report.html，打开后可看到各文件占用大小
附：vue项目常用的cdn地址
1.axios
https://cdn.bootcss.com/axios/0.18.0/axios.min.js
2.swiper
- https://unpkg.com/swiper@5.3.8/css/swiper.css
- https://unpkg.com/swiper@5.3.8/js/swiper.js
- https://cdn.jsdelivr.net/npm/vue-awesome-swiper/dist/vue-awesome-swiper.js
< script type=“text/javascript”> Vue.use(window.VueAwesomeSwiper); < /script>
3.vue-router
https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js
4.echarts
- https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js
- https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js
- https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js
- https://cdn.jsdelivr.net/npm/echarts/map/js/world.js
5.element-ui
https://unpkg.com/element-ui/lib/index.js
6.vue
- vue2:
https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js - vue3:
https://unpkg.com/vue@3.2.31/dist/vue.global.js
7.vant
- https://cdn.jsdelivr.net/npm/vant@next/lib/index.css
- https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js
8.vuex
https://unpkg.com/vuex@next
9.moment
- https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js
- https://cdn.jsdelivr.net/npm/moment@2.29.1/locale/zh-cn.js
10.ant-design-vue
- https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.2/dist/antd.min.css
- https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.2/dist/antd.min.js
总结
到此这篇关于Vue如何使用cdn加载资源加快打包速度的文章就介绍到这了,更多相关Vue使用cdn加载资源内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Vue项目使用CDN优化首屏加载问题
前言 作为一个网站应用,加载速度是非常重要的.加载速度,一个是程序的合理安排,如以组件按需加载,一个是js.css等资源的异步加载. 在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏.若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首开的体验. 解决方法是,将引用的外部js.css文件剥离开来,不编译到vendor.js中,而是用资源的形式引用,这样浏览器可以使用多个线程异步将vendor.js.外
-
vue项目中用cdn优化的方法
在我们写项目中,优化问题是不容忽视的,尤其是首屏优化更是重中之重,这里介绍两种方法优化方法--cdn和异步加载,异步请看 http://www.jb51.net/article/110661.htm 1.cdn 首先cdn是什么,自己百度哦 其作用是:当我们加载页面时,需要将我们所需要的一些依赖加载到当前会话中然后再开始执行,如果我们首屏,模块比较多是,需要等待的时间会比较长,而且.浏览器内存最多执行四十个进程,需要等到加载完前面的才能执行后面的代码,如果我们采用cdn的方式来引入一些第三方资源
-
Vue使用CDN引用项目组件，减少项目体积的步骤
Vue项目打包后有的文件动辄几百KB或几M,这对一个前端项目的加载无疑是致命的.当你的服务器部署在阿里云或亚马逊,每秒只有100kb的加载速度时,页面的载入速度绝对让你崩溃.那么有什么办法可以在依旧是100kb/s的加载速度下让我们的页面快起来呢?CDN算是其中之一的解决办法. 首先,我们要明白为什么我的Vue项目在打包后产生的文件会那么大.我们在最开始使用Vue的时候几乎所有组件.插件的引用都会放到项目主文件中进行即 main.js文件,我们的引用方式可能是这样的: import Vue fr
-
vue 优化CDN加速的方法示例
代码敲完,项目上线,然后就要与优化相遇. 项目有抢购的性质content download 时间非常的长加载慢的很,至此开始前端优化之旅 项目根目录运行 npm install webpack-bundle-analyzer --save-dev 在build/webpack.dev.conf.js中引入 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin plugins: [
-
Vue如何使用cdn加载资源加快打包速度
目录 为什么使用CDN 解决方法 使用CDN主要解决两个问题 具体步骤 资源引入 打包对比 附:vue项目常用的cdn地址 总结 为什么使用CDN Vue项目打包的时候,默认会把所有代码合并生产新文件,其中包括各种库导致打包出来很大.如果使用cdn的话,会更利于程序的加载速度. 在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏.若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首开的体验. 解决方法
-
vue项目首屏加载时间优化实战
问题 单页面应用的一个问题就是首页加载东西过多,加载时间过长.特别在移动端,单页面应用的首屏加载优化更是绕不开的话题.下面我会写出我在项目中做的一些优化,希望大家能够相互讨论,共同进步. 我的项目 vue-cli3构建的,vue+vue-router+vuex,UI框架选用 element-ui,ajax方案选用 axios,服务器使用Nginx .用到的这些技术都是现在用的比较广泛的,看到这篇文章,我估计你和我用的技术应该差不多. 第一步:webpack-bundle-analyzer 分析
-
Vue实现一个无限加载列表功能
一个需要判断的地方就是加载中再次触发滚动的时候,不要获取数据. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表无限加载</title> <style> * { margin: 0; padding: 0; } li { height: 50px; border-bottom: 1px s
-
vue 项目 iOS WKWebView 加载
1.首先让前端的同事打一个包(index.html,static文件包含css.资源文件.js等)导入项目: :warning: 注意: 把index.html放入项目根目录下,command+n创建一个资源文件.bundle,资源文件里也的包含一份 index.html 下面开始代码: 懒加载WKWebView 引入#import <WebKit/WebKit.h> #import <WebKit/WKWebView.h> 继承 WKNavigationDelegate,WKUI
-
解决vue-cli webpack打包后加载资源的路径问题
vue项目,访问打包后的项目,输入路径后,页面加载空白.这时会有两类问题,都是路径问题. 1.一个是css,js,ico等文件加载不到,是目录里少了dist 打开页面时一片空白 解决办法: config/index.js文件的build->assetsPublicPath的默认值改为 './' assetsPublicPath:资源的根目录.这个是通过http服务器运行的url路径.因为webapp和static中间还有层dist,所以要用'./' 2.另一个就是单纯的在背景图使用相对路径导致加
-
vue如何实现动态加载脚本
这篇文章主要介绍了vue如何实现动态加载脚本,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 今天在研究,tinymce富文本编辑器怎样在vue中使用,然后看到其它框架上的使用方法,它是动态加载tinymce脚本的,若果在本地引入静态文件或者,npm安装都会导致vue项目打包体积过大,这种动态脚本引入方式,是一个不错的实践,下面上的代码块叫 dynamicLoadScript 顾名思义,动态加载脚本,这个js只对加载tinymce有效,不过要想加
-
Vue使用Three.js加载glTF模型的方法详解
前言 Three.js是一个跨浏览器的脚本,使用JavaScript函数库或API来在网页浏览器中创建和展示动画的三维计算机图形,基于WebGL实现,对WebGL进行了进一步的封装,简化了多数复杂的接口. Three.js支持包括 .obj..gltf等类型的模型结构.glTF(GL传输格式)是Khronos的一个开放项目,它为3D资产提供了一种通用的.可扩展的格式,这种格式既高效又与现代web技术高度互操作. obj格式的模型只支持顶点.法线.纹理坐标和基本材质,而glTF模型除上述所有内容外
-
实现一个Vue自定义指令懒加载的方法示例
在项目中如果有大量的图片需要加载的时候,就可以考虑使用懒加载了,懒加载其实就是监听浏览器的滚动,当滚动到一定的范围的时候就将图片的真实路径赋给src,然后取消监听.实现的方法也比较简单,可以通过懒加载的插件实现,也可以手写,手写通过vue自定义指令来实现,一般情况自定义指令用的也不多,比较vue自带的就够用了,大型复杂的项目的可能用的多. 什么是图片懒加载 当我们向下滚动的时候图片资源才被请求到,这也就是我们本次要实现的效果,进入页面的时候,只请求可视区域的图片资源这也就是懒加载. 比如我们加载
-
如何让vue长列表快速加载
vue-long-list-load,满足特殊条件的长列表加载.支持:1.各个节点高度不同且可自由设定 2.各个节点可修改不影响加载效果 3.可精确的滚动到指定位置. 背景 有个长列表渲染的需求,本来用vue-virtual-scroll-list的.但是每个节点的高度不一样,用着有点问题.如果也有相应的需求可以参考下我的方案.欢迎大家交流! vue-long-list-load 满足特殊条件的的长列表加载. 列表内各个节点高度不一,各个节点可以进行修改,定位到指定位置指定节点. www.npm
-
Vue SPA首屏加载缓慢问题解决方案
目录 首屏加载 关于计算首屏时间 加载慢的原因 解决方案 静态资源本地缓存 UI框架按需加载 组件重复打包 图片资源的压缩 开启GZip压缩 使用SSR 首屏加载 首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成,但需要展示当前视窗需要的内容 首屏加载可以说是用户体验中最重要的环节 关于计算首屏时间 利用performance.timing提供的数据: 通过DOMContentLoad或者pe