外网带宽小的情况下vue项目cdn加速部署流程

已于 2023-01-03 15:08:35 修改
阅读量505 收藏
点赞数
文章标签： javascript
于 2022-09-22 17:11:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21207803/article/details/126995785
版权

一、准备工作

1,七牛云cdn域名
2,cpolar内网穿透工具(1MB免费版)
3,vue开发环境

二、流程开始

1,首先将项目打包成dist,放到本地tomcat启动

在这里插入图片描述
浏览器访问
在这里插入图片描述
正常访问
开启内网穿透
安装cpolar,使用教程 https://www.cpolar.com/docs
随便打开一个管理员cmd窗口
在这里插入图片描述
输入命令 cpolar http 8088 将刚启动的tomcat的端口写入
在这里插入图片描述
访问外网地址
在这里插入图片描述
发现图片,js静态资源由于带宽的问题,响应时间很慢
在这里插入图片描述
最终页面加载出来用了1.3分钟
将这些耗时很长的静态文件上传到七牛云的cdn目录
然后将
index.html中的静态文件
在这里插入图片描述
替换成全路径的七牛云文件地址
再访问就能很快的访问项目了

迷失岛的章鱼
关注
Vue打包优化篇-CDN加速
小生不才
08-06 7228
在没有使用cdn加速之前打包后数据如下，可以看出element-ui、vue、vuex、vue-router这些依赖都打进chunk-vendors.js中导致体积很大，假设再来很多依赖项是不是更大，同时也会影响单页面应用首屏加载速度，所以这里采用一种打包优化手段之一来分离依赖项。......
Nginx + Node + Vue 部署初试(2019-03-18修改)
Rain120
02-04 712
趁着爸妈做年夜饭之前，把之前做的笔记贴出来，新的一年到了，祝大家 Nginx + Node + Vue 部署初试 知乎 个人博客 Github 日常学习笔记 Nginx 定义 异步框架的 Web服务器，也可以用作反向代理，负载平衡器 , HTTP缓存, 媒体流等的开源软件。它最初是一个旨在实现最高性能和稳定性的Web服务器。除了HTTP服务器功能外，NGINX还可以用作电子邮件（IMAP，...
【vue】配置cdn加速
代码随想录
11-10 3703
//vue.config.js let cdn = { css: [], js: [] }; // 通过环境变量 来区分是否使用cdn const isDev = process.env.NODE_ENV === 'development'; // 判断是否是开发环境 let externals = {}; if (!isDev) { // 如果是非开发环境 就排除打包 否则不排除 externals = { // key(包名) / value(这个值 是 需要在CDN中获取js, 相.
Vue项目性能优化、配置CDN加速
最新发布
m0_71071209的博客
07-10 1645
CDN（Content Delivery Network，内容分发网络）是一种分布式网络服务，它通过在地理上分散的多个服务器上存储内容的副本，使用户可以从最近的服务器节点获取数据，从而加快内容的加载速度和提高可用性项目体现:生产环境打包项目时, 将项目依赖的一些第三方包, 替换成 cdn方式外部加载,从而提升应用的加载、响应速度, (直观感受: vue ui视图可视化,查看前后配置的统计分析)
Vue3项目使用cdn加速
weixin_45732455的博客
06-11 4190
vue3项目使用cdn加速
Vue线上部署之cdn加速（终极加速）
Java
01-02 8925
1.概述 之前做过服务器nginx开启gzip压缩，速度缩减了很多，加载时间在1秒多，会出现白屏，原因是好多依赖被打包到js中了，体积太大，加载很慢，今天加了下cdn，速度真正起飞 2.cdn加速流程 修改vue.config.js const compressionPlugin = require('compression-webpack-plugin') module.exports={ ...
Vue项目使用CDN优化首屏加载
weixin_34159110的博客
03-31 1141
前言 作为一个网站应用，加载速度是非常重要的。加载速度，一个是程序的合理安排，如以组件按需加载，一个是js、css等资源的异步加载。 在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。 解决方法是，将引用的外部js、css文件剥离开来，不编译...
vue学习笔记（超详细）
jiey0407的博客
03-09 5640
文章目录 一. Vue基础 认识Vue.js Vue安装方式 Vue的MVVM 二. Vue基础语法 生命周期 模板语法 创建Vue, options可以放什么 语法 综合 v-on v-for遍历数组 v-model表单绑定 v-model结合radio类型使用 v-model结合checkbox类型使用 v-model结合select类型使用 值绑定 修饰符 检测数组更新 计算属性 computed 计算属性setter和getter computed / meth
Vue --- vue入门
ty0714的博客
04-25 157
1. Vue.js是什么？ Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架 官网：https://cn.vuejs.org/ Vue作者：尤雨溪/中国无锡 2. 库和框架的区别 2.1 库(Library)，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者 代表：jQuery jQuery这个库的核心：DOM（文档元素）操作，即：封装DOM操作，简化DOM操作 JavaScript：d...
vue入门了解
qq_45547474的博客
08-14 1023
vue入门了解一、 Vue.js是什么？二、库和框架的区别1、库(Library 简写Lib)2、框架(Framework)三、MVVM的介绍四、 安装Vue1、cdn下载(需连接网络)2、CDN概况五、实例代码了解1、 Vue实例（显示Hello Vue!以及获取系统当前时间）显示Hello Vue!获取系统当前时间2、双向数据绑定(Vue two way data binding)六、什么是BootCDN1、使用cdn的好处2、使用cdn的坏处七、总结 前言 敲太多后端代码，总要看看前端的东西放松一下
在 vue-cli 构建的项目中配置使用资源CDN，加速我们的项目
热爱思考、活力满满、开朗爱笑的年轻人
09-19 1660
出于对网站性能的要求，有时候我们不希望一些比较大的第三方库直接打包到最后的bundle中，而会选择在打包的时候忽略他们，并直接使用CDN上面的资源。生产环境中将项目依赖的一些第三方包替换成通过cdn方式外部加载，而不是打包到vender，对于提升应用的加载、响应速度很有意义。在vue-cli3及以后的项目中，相关配置都需要在这个文件中进行，如果你没有这个文件请自己新建一个（与同级）。
vue 优化CDN加速的方法示例
10-17
主要介绍了vue 优化CDN加速的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue项目中用cdn优化的方法
11-28
在我们写项目中，优化问题是不容忽视的，尤其是首屏优化更是重中之重，这里介绍两种方法优化方法—-cdn和异步加载，异步请看 //www.jb51.net/article/110661.htm 1。cdn 首先cdn是什么，自己百度哦 其作用是：当我们加载页面时，需要将我们所需要的一些依赖加载到当前会话中然后再开始执行，如果我们首屏，模块比较多是，需要等待的时间会比较长，而且。浏览器内存最多执行四十个进程，需要等到加载完前面的才能执行后面的代码，如果我们采用cdn的方式来引入一些第三方资源，就可以缓解我们服务器的压力，原理是将我们的压力分给其他服务器点。下面是代码的具体实现： （1）
vue优化 VUE部署优化 vue优化 vue性能优化 vue 性能 优化 vue 部署 优化 cdn优化
半只
11-30 957
可以将请求缓存起来，并且可以同时将页面全部缓存起来，可以达到 哪怕网络断掉了，还能正常使用，效果和使用原生app一样，网页如果没有网络 是打不开的，有了 server-worker支持，会将所有页面缓存起来，哪怕某个页面没有打开过，也是可以正常打开，和原生安卓一样，无网络也可以正常用，只是没有数据而已 ，实现 离线使用。如果 项目页面多、列比较多、页面比较复杂，搜索千万不要写成这样, 单独用一个表单用于搜索条件，我之前就是这样写的，把搜索条件直接写到表头列上面，页面比较多了之后，整个页面特别卡顿。
vue 优化CDN加速
weixin_34032792的博客
09-12 160
代码敲完，项目上线，然后就要与优化相遇。项目有抢购的性质content download 时间非常的长加载慢的很，至此开始前端优化之旅 项目根目录运行 npm install webpack-bundle-analyzer --save-dev 在build/webpack.dev.conf.js中引入 const BundleAnaly...
前端Vue项目实现CDN加速
m0_50013804的博客
02-04 2182
前端Vue项目实现CDN加速 我们在开发前端项目的时候难免会遇到请求响应慢，页面数据渲染慢，等等问题。浏览器从服务器上下载 CSS、js 和图片等文件时都要和服务器连接，而大部分服务器的带宽有限，如果超过限制，网页就半天反应不过来。而 CDN 可以通过不同的域名来加载文件，从而使下载文件的并发连接数大大增加，且CDN 具有更好的可用性，更低的网络延迟和丢包率 。 一，引用外部CDN加速 首先我这里用的是 jsdelivr 的CDN加速。 进入jsdelivr的官网后，我们可以看见，不仅有npm的加速
Vue中使用cdn加载资源，加快打包速度
qq_37214137的博客
10-22 4361
为什么使用CDN Vue项目打包的时候，默认会把所有代码合并生产新文件,其中包括各种库导致打包出来很大。如果使用cdn的话,会更利于程序的加载速度。 在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。 解决方法 将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、
vue使用cdn加速 减少项目体积
kilito_01的博客
02-07 648
vue使用cdn加速减少项目体积
Vue项目部署难题与解决方案详析
本文主要探讨了Vue项目部署上线过程中可能遇到的问题及其解决方案，作者以自身的经验为基础，详细阐述了部署流程，旨在为读者提供实用的参考。以下是文章的关键知识点： 1. **服务器搭建**： - 作者选择腾讯云作为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值