vue 项目优化之第三方模块/库/组件-cdn

最新推荐文章于 2023-06-02 10:58:36 发布
最新推荐文章于 2023-06-02 10:58:36 发布
阅读量964 收藏 3
点赞数
分类专栏： # vue 文章标签： vue 项目优化 cdn
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gaogzhen/article/details/103475900
版权

vue 项目优化第三方模块/库/组件-cdn

cdn引入外部资源 注册windows对象

  1. 常用cdn地址：

https://cdn.bootcss.com
https://cdn.jsdelivr.net
https://cdn.staticfile.org/模块/版本/文件名.min.js

  1. 常用cdn与导入BOM对像名称
组件/库文件名名称（默认）cdndescribe
vueVuehttps://cdn.bootcss.com/vue/2.6.10/vue.min.jsvuejs库文件
vue-routerVueRouterhttps://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.jsvue路由
axiosaxioshttps://cdn.staticfile.org/axios/0.19.0/axios.min.js异步请求
momentmomenthttps://cdn.bootcss.com/moment.js/2.24.0/moment.min.js时间日期处理模块
echartsechartshttps://cdn.bootcss.com/echarts/4.3.0/echarts.min.js图表统计模块
vue-quill-editorVueQuillEditorhttps://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.min.jsvue富文本编辑器
lodash_https://cdn.bootcss.com/lodash.js/4.17.15/lodash.min.js数据集合处理模块
nprogressNProgresshttps://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js进度条插件

持续更新中……

注意：

  • cdn导入BOM中对象名称有默认值，为资源贡献者定义
  • vue项目使用cdn优化第三方模块/插件，webpack配置中externals键值对：键为cdn导入文件名,值为资源贡献者提供。配置不正确，项目打包运行会报模块或者插件未定义（undefine)
  • cdn 导入BOM对象挂载在顶级对象windows下，默认windows可省略。
  • cdn 导入BOM对象默认名字判断方法一：多个单词以‘-’连接 ，名称通常为文件名大驼峰命名；单个单词首字母大写或者小写；
  • cdn 导入BOM对象名称判断方法二：f12控制台->console->windows.查看
  • cdn 导入BOM对象名称判断方法三：查看源文件

如有问题或者补充，欢迎留言

gaog2zh
关注
专栏目录
Vue项目使用CDN优化首屏加载问题
11-26
在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。 解决方法是，将...
Vue-Quill-Editor富文本编辑器的cdn引入与简单使用
张杰伦的博客
01-14 4146
今天需要用到富文本编辑器，所以选择了Vue-Quill-Editor，网上大多都是npm使用介绍，而github上的cdn 演示又需要翻墙，所以这里给大家演示下如何通过cdn引入Vue-Quill-Editor使用。 引入 <!-- Include the Quill library --> <script src="https://cdn.quilljs.com/1.3.4/quill.js"></script> <script src="https://cdn
css vue 引入cdn,vue-cli中，使用第三方CDN外链资源（js、css）
weixin_42298809的博客
03-12 812
双十一买了一台云服务器，正巧最近用vue写了一个生成随机密码的页面，于是部署在了该机器上。机器的部署过程就略过，如果有人感兴趣，可以联系我，交流一下。部署完成之后，打开页面，接近8秒的白屏时间，页面才渲染出来。what？这是咋的啦？F12打开看了一下网络请求，chunk-vendors.js文件居然有700多kb！先简单介绍一下，这个页面使用 Vue Cli 3 生成，为了开发方便，引入了 ele...
cdn方式使用vue.config.js
fzsdchenbigui的专栏
08-01 2141
vue.config.js 使用 let webpack = require("webpack"); //gzip 配置 start const CompressionWebpackPlugin = require('compression-webpack-plugin'); // const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); const productionGzipExtensions = ['js', 'css']; //安装 g
详解vue 配置 cdn 加载依赖的方法
csdn姚宏波
04-24 7544
前言 生产环境中，将项目依赖的一些第三方包替换成通过 cdn 方式外部加载，而不是打包到 vender，对于提升应用的加载、响应速度很有意义，下面我们一步步的实现这点 CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率 1. 查看打包后的资源情况 首先使用 build 命令打包，看看在使
viser-vue打包编译运行报错Cannot assign to read only property ‘constructor‘ of object ‘#＜t＞‘
最新发布
m0_49280365的博客
06-02 900
viser-vue打包编译运行报错Cannot assign to read only property ‘constructor‘ of object ‘#＜t＞‘
Vue-Cli项目优化操作的实现
10-16
综上所述，Vue-Cli项目优化主要包括路由懒加载、预加载和优先加载、启用GZip压缩以及对第三方库的CDN处理。通过这些策略，可以有效地减小项目体积，提升首屏加载速度，从而提供更好的用户体验。在实际开发中，应根据...
jsp中使用vuejs+element-ui+vuejs第三方组件
02-17
本文将详细探讨如何在JSP环境中集成Vue.js和Element-UI，并利用Vue.js的第三方组件增强功能。 首先，我们需要了解JSP的基础知识。JSP是一种服务器端的动态网页技术，它可以嵌入Java代码，用于处理动态内容。而Vue....
vue 优化CDN加速的方法示例
10-17
Vue 优化和CDN加速是提高...综上所述，Vue项目的CDN优化是一个综合性的过程，涉及Webpack配置、第三方库的管理以及资源加载策略等多个层面。通过这些方法，我们可以显著提升前端应用的性能，为用户提供更流畅的体验。
记一次vue-webpack项目优化实践详解
10-17
然而，项目的优化不仅仅局限于第三方库的按需引入，还可以涉及代码结构优化、懒加载、图片压缩、tree-shaking等更多方面。这是一个持续的过程，需要不断地学习和实践，以实现最佳的性能表现。本文仅作为一次简单的...
vue项目打包优化的方法
weixin_68531033的博客
08-15 7966
项目上线前对项目进行极致压缩的方法 将20MB文件压缩为20KB 优化项目运行速度
关于vue-shop项目优化的注意事项
qq_46601680的博客
09-03 405
关于vue项目优化，使用cdn方式引入依赖包的注意事项
VUE 打包 项目优化总结
weixin_45893643的博客
04-29 230
## VUE的项目，在上线之前是要进行优化的。简单总结一下 代码规范问题 一般我们写项目为了更好的交流，还有多人开发项目的时候，团队都会进行一定的代码规范。我们这里就用到了eslint。 设置默认的vscode的语法规范 npm run lint 命令检查并修改代码。剩下的需要手动修改。 创建.eslintignore 文件, 写入src/assets 这样就不会检查 这个目录下的文件。 移除代...
Vue-Quill-Editor
生产队队长
03-08 236
Vue-Quill-Editor CDN staticfile、jsdelivr、vue-quill-editor <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt
Vue通过externals加载外部CDN资源
不想打代码
06-29 1196
案例 在我们打包项目的时候，会发现一些依赖包占用的空间很大，而现在很多的依赖包都在外部CDN服务器上有相应的资源，那么我们就可以使用外部CDN资源，减轻项目服务器的压力 默认情况下，通过 import 导入的第三方依赖包最终会被打包合并到同一个文件中，从而导致打包成功后出现单文件体积过大的问题 解决方法 为了解决上述问题，可以通过 webpack 的 externals 节点来配置外部的CDN资源 凡是生命在 externals 中的第三方依赖包，都不会被打包 步骤 在 vue.config.j
Vue 打包优化
liyifeng112的博客
04-29 254
1.移除console 在我们项目开发的阶段，我们会使用很多的console用于代码的测试，在打包的时候会有警告弹出，上线之后是不需要这些代码的所有要移除console。 解决方法 1.1 babel-plugin-transform-remove-console babel插件 1.1.1安装 npm install babel-plugin-transfor...
vue项目部署篇 -线上部署优化
weixin_43521579的博客
08-26 858
打包注意事项 打包完的项目 dist文件夹如果 已经启动服务，此时不能重新打包，（因为文件 在占用），需要停止服务，再进行重新打包。 vue打包上线移除 console 两种插件可选择 1、babel-plugin-transform-remove-console 比较流行的解决办法是使用 babel 的一个插件，因为webpack 打包时会使用 babel 进行代码降级，所以babel 插件可以在打包过程中，将 console 移除 安装 npm install babel-plugin-transfor
vue-admin 详细注释，必须手把手做项目系列之（一）
weixin_33875839的博客
12-10 1124
vue-admin-stepbystep A Vue.js project 系列文章 [juejin.im/post/5c1609… ]vue-admin详细注释，必须手把手做项目系列之（二） [juejin.im/post/5c18db…]vue-admin 详细注释，必须手把手做项目系列之（三）丢到服务器中解决报错 麻雀虽小五脏俱全：[项目地址 github.com/whylisa/vu...
项目上线阶段优化,通过 externals 加载外部 CDN 资源 nprogress（注意大小写）
QrunningGo的博客
10-21 741
项目上线阶段优化–nprogress（注意大小写） Config Set 命令可以动态地调整配置参数。打包的时候，直接排除掉以下这些，走cdn，可以减少包的体积 通过 externals 加载外部 CDN 资源 默认情况下，通过 import 语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功 后，单文件体积过大的问题。 为了解决上述问题，可以通过 webpack 的 externals 节点，来配置并加载外部的 CDN 资源。凡是声明在 externals 中的第三方依赖包，都不会被
Vue项目优化：实战策略与第三方库减负
当项目完成后，从开发环境转移到生产环境，可能会遇到由于第三方库和组件导致的js文件体积过大的问题。这种情况下，生成打包报告可以帮助我们识别出占用空间较大的模块，以便进行有针对性的优化。 生成打包报告有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

gaog2zh

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值