程序员经验分享-hwhale

vue项目cdn加速，减少webpack打包体积

2023-11-07
在webpack中使用cdn加速优化,减少打包体积，减少用户访问时间

1.引入cdn资源

​
​

<link rel="stylesheet" href="https://unpkg.com/element-ui@2.3.5/lib/theme-chalk/index.css" />
<link rel="stylesheet" href="https://unpkg.com/vant@1.1.2/lib/vant-css/index.css" />

 <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/vuex@3.0.1/dist/vuex.min.js"></script>
 <script src="https://unpkg.com/element-ui@2.3.5/lib/index.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/vant@1.1.2/lib/vant.min.js"></script>
 <script src="https://cdn.staticfile.org/axios/0.17.1/axios.min.js"></script>

​

注：1.该文件为项目入口html文件，通常处于项目public目录下或者项目根目录下，使用了vant和elementUi,2.所以还应该引入相对应得css资源包3.cdn加速地址可以在官网中找到

代码展示

在这里插入图片描述

2.在webpack基础配置文件中加入externals配置，打包、编译时去除cdn加速的模块，可以大大压缩打包后的压缩包体积
  externals: {

   vue: 'Vue',

   'vue-router': 'VueRouter',

   "element-ui": "ElementUI",

   'vant':"Vant",

   axios: 'axios',

   vuex: 'Vuex',

  },

代码展示
在这里插入图片描述

3.去除main.js中对以上模块的引用，注册

在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vue

vuejs

WEBPACK

javascript

vue项目cdn加速，减少webpack打包体积 的相关文章

随机推荐

  • html文件生成在线连接,使用Themleaf 模板引擎手动生成html文件

    1 为什么要写这一篇呢 在做一个邮件发送功能的时候 需要发送html邮件 javaMail 发送html 的时候需要有已经生成的html正文 所以需要提前将要发送的内容生成 所以就需要模板引擎来动态填充数据 public voidsendH

  • 【华为OD机试】宜居星球改造计划【2023 B卷

    华为OD机试 真题 点这里 华为OD机试 真题考点分类 点这里 题目描述 2XXX年 人类通过对火星的大气进行宜居改造分析 使得火星已在理论上具备人类宜居的条件 由于技术原因 无法一次性将火星大气全部改造 只能通过局部处理形式 假设将火星待

  • R语言学习-一、读取文件和数据基本处理01

    R语言学习01 读取文件 不同文件类型的数据读取 csv xlsx 处理数据对象 处理对象的函数 数据框内变量处理 逻辑运算符 数据框内变量计算 连续性变量分组 变量重命名 不同文件类型的数据读取 csv a lt read csv H d

  • 分布式基础学习【一】 —— 分布式文件系统

    转自 http blog csdn net heyutao007 article details 5468390 所谓分布式 在这里 很狭义的指代以Google的三驾马车 GFS Map Reduce BigTable为框架核心的分布式存储

  • AI「反腐」，德国马普所结合 NLP 和 DNN 开发抗蚀合金

    内容一览 在被不锈钢包围的世界中 我们可能都快忘记了腐蚀的存在 然而 腐蚀存在于生活中的方方面面 无论是锈迹斑斑的钢钉 老化漏液的电线 还是失去光泽的汽车 这一切的发生都与腐蚀有关 据统计 全世界每年由金属腐蚀带来的经济损失超过 2 5 万

  • 通过sql注入进行权限提升操控主机

    前面将sql注入的基础已经介绍完了 那么可能很多初学者不知道我们为什么要进行sql注入 除了拿到数据库以外还有什么用 所以今天来理一理 通过sql注入 能否提升权限 拿到主机shell呢 这里主要有两种方式 一 使用mysql自带函数int

  • UnitTest自动化测试框架结合数据驱动（DDT）应用实践

    原文链接 UnitTest自动化测试框架结合数据驱动 DDT 应用实践 1 安装ddt pip install ddt 2 使用方式 首先导入ddt 然后在测试类上使用 ddt ddt装饰 测试方法使用 ddt data 装饰 data里面

  • python语言基础

    第一次写博客 主要是分享一下语言的基础或者一些计算机核心的知识并推送一些github上好的项目 如果博客上有什么错误的以及需要交流的 请多多指教 1 python的数据结构 列表 字典 集合 元组 数组 分别以 进行声明 a 字典 1 直接

  • vue INPUT输入框始终聚焦的方法

    今天有个需求 弹出一个窗口 窗口里只有一个INPUT 要求始终聚焦在窗口中的输入框中 不管用户点哪里 都无法改变焦点 除非关闭这个弹窗 部份代码如下

  • strongswan——IKE建立过程

    strongswan的主进程为charon进程 负责IKE SA IPSec SA建立 拆除 更新及其他相关的操作 charon进程默认通过socket default插件与内核交互 用于IKE协议报文的收发 socket default插

  • Express全系列教程之(五)：Express的中间件

    一 中间件 从字面意思 我们可以了解到它大概就是做中间代理操作 事实也是如此 大多数情况下 中间件就是在做接收到请求和发送响应中间的一系列操作 事实上 express是一个路由和中间件的web框架 Express 应用程序基本上是一系列中间

  • LeetCode-合并两个有序链表(java实现)

    题目如下 看完题目之后 思考的结果是用递归做应该是最佳的选择 但无奈水平真的有限 没有想出来如何用设计递归 提交的时候就没有用递归实现 运行结果可想而知 23ms 看了第一名的用时是5ms 而且代码简洁优美 不得不佩服 Definition

  • Windows2012的VPN服务与测试

    一 配置环境 1 在Windows2012安装VPN服务 勾选网络策略和访问服务与远程访问 2 安装完成后点击打开 选择 打开开始向导 选择配置远程访问的类型 仅部署VPN 3 选择自定义配置后 根据需求选择摘要 VPN需要VPN访问和NA

  • 51单片机数据传送——片外到片内（汇编语言实现）

    51单片机 数据传送 片外到片内 汇编语言实现 问题描述 把存储在片外RAM 1000H开始的16个单元 地址为1000H到100FH 内容依次搬移到片内RAM 30H开始的16个单元 地址为30H到3FH 外部RAM 1000H 100F

  • 数据结构---快速排序

    快速排序 分治法思想 基准元素的选择 元素交换 双边循环法 JAVA实现 单边循环法 JAVA实现 快速排序也是从冒泡排序演化而来 使用了 分治法 快的原因 快速排序和冒泡排序共同点 通过元素之间的比较和交换位置来达到排序的目的 快速排序和

  • elasticsearch-数据聚合

    目录 介绍 实际操作 DSL实现Metrics聚合 嵌套聚合 RestClient实现聚合 以酒店品牌为例 实现对酒店品牌 城市 星级的过滤 补6 20 32条消息 Elasticsearch 聚合查询 aggs 龙源lll的博客 CSDN

  • 成pmo了（几年前帖子，私密变公开后时间就变了）

    哈哈 我还没转正 也没项目 只是做产品 估计就和小学的语文课代表一样

  • border 颜色渐变

    div style border right 1px dashed fff background none width 577px div style font size 16px background color fff div div

  • C语言文本文件与二进制文件转换

    本程序要自己创建个文本格式的输入文件a1 txt 编译后能将文本文件前255字节以内的字符转换成相应的AscII码值的二进制表示 并存入输出文件a2 txt中 然后再将二进制文件还原并存入a3 txt文件 实现文件之间的转换 具体代码如下

  • vue项目cdn加速，减少webpack打包体积

    在webpack中使用cdn加速优化 减少打包体积 减少用户访问时间 文章目录 在webpack中使用cdn加速优化 减少打包体积 减少用户访问时间 1 引入cdn资源 2 在webpack基础配置文件中加入externals配置 打包 编

热门标签