位置: IT常识 - 正文

Vue打包优化篇-CDN加速(vue3打包优化)

编辑:rootadmin
Vue打包优化篇-CDN加速 优化原因

推荐整理分享Vue打包优化篇-CDN加速(vue3打包优化),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3打包优化,vuecli打包优化,vue打包怎么运行,vue打包命令是什么,vue打包命令是什么,vue3打包优化,vue打包umd,vuecli打包优化,内容如对您有帮助,希望把文章链接给更多的朋友!

在没有使用cdn加速之前打包后数据如下,可以看出element-ui、vue、vuex、vue-router这些依赖都打进chunk-vendors.js中导致体积很大,假设再来很多依赖项是不是更大,同时也会影响单页面应用首屏加载速度,所以这里采用一种打包优化手段之一来分离依赖项。

查看依赖版本

首先项目中需要使用依赖项,我这里项目中打算将element-ui、vue、vuex、vue-router这些依赖项进行分离,记录依赖版本方便后面使用。

依赖名称依赖版本vue2.6.11vue-router3.2.0vuex3.4.0element-ui2.15.9

查看依赖引用

在main.js中可以看到这些依赖被引用。 在项目中开发环境和生成环境一些配置是不同的,所以这里截图方便后面理解。

配置开发环境和生产环境Vue打包优化篇-CDN加速(vue3打包优化)

在上面我们已经看到main.js中如何引用依赖,现在我们需要做一些改动在main.js改为main-dev.js作为我们的开发环境,然后在同级目录下创建一个新的文件叫main-prod.js作为我们的生产环境,实际开发中开发环境(main-dev.js)和生产环境(main-prod.js)配置存在不同。

开发环境入口 - main-dev.js

// 这是给ElementUI组件库组件设置默认参数Vue.use(ElementUI, { size: 'small', zIndex: 3000 });生产环境入口 - main-prod.js

// 这是给ElementUI组件库组件设置默认参数(cdn加速和生产环境配置有区别)Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000};配置开发环境入口和生产环境入口

这里需要注意一下的是配置入口,因为默认入口文件只有一个main.js但是你给改成了main-dev.js而且还新增了一个main-prod.js,然后你运行项目或打包项目肯定报错,因为它去找main.js找不到啊,所以这里需要通过vue.config.js文件来指定生产环境和开发环境入口。

vue.config.js// 判断是否是生产环境const isProduction = process.env.NODE_ENV !== 'development';module.exports = { publicPath: './', // 不加这个可能会导致静态资源找不到的情况。 chainWebpack: config => { config.when(isProduction, config => { // 如果是生产环境,那么将main-prod.js作为入口文件(我这里是ts和js一样)。 config.entry('app').clear().add('./src/main-prod.ts'); }); config.when(!isProduction, config => { // 如果是不是生产环境,那么将main-dev.js作为入口文件(我这里是ts和js一样). config.entry('app').clear().add('./src/main-dev.ts'); }); }};

配置CDN加速

完成上面环境配置已经成功一半啦,接下来就需要配置cdn加速相关的啦。

vue.config.js

这里需要说明一下,看下面的cdn加速链接中依赖的版本和上面查看依赖版本表格展示是不是一样的?肯定要一样啊不然出现依赖版本冲突问题怎么办。 关于externals属性告诉webpack需要排除的依赖名称和挂载在window上的对象属性名称,这里简单列出常用的表,如需要其它的可以插件依赖导出到window的对象名称,也可以面向百度查找对应的对象属性名称。

依赖名称挂载在window上的对象属性名称vueVuevue-routerVueRoutervuexVuexlodash_element-uiELEMENTconst isProduction = process.env.NODE_ENV !== 'development';const cdn = { externals: { vue: 'Vue', 'vue-router': 'VueRouter', vuex: 'Vuex', "element-ui": "ELEMENT" }, css: [ 'https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.9/theme-chalk/index.min.css', ], js: [ 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js', 'https://cdn.jsdelivr.net/npm/vue-router@3.2.0/dist/vue-router.min.js', 'https://cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js', 'https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.9/index.min.js' ]};module.exports = { publicPath: './', chainWebpack: config => { config.when(isProduction, config => { config.entry('app').clear().add('./src/main-prod.ts'); // 我们希望的是在生产环境下才进行cdn优化!!!这点理解很重要。 // 告诉webpack需要排除的依赖名称和挂载在window上的对象属性名称。 config.set('externals', cdn.externals); // 这里的作用是在后面index.html页面中通过link,script标签加载这些cdn链接。 config.plugin('html').tap(args => { args[0].cdn = cdn; return args; }); }); config.when(!isProduction, config => { config.entry('app').clear().add('./src/main-dev.ts'); }); }};

index.html

这里也需要说明一下,这个index.html页面的位置一般在public目录下。 下面的htmlWebpackPlugin.options.cdn对象是不是很眼熟,不就是我们通过vue.config.js中生产环境配置config.plugin(‘html’)加入的属性?真是一环扣一环呐。

<!DOCTYPE html><html lang="zh"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title> <%= htmlWebpackPlugin.options.title %> </title> <!-- 这里从cdn配置里面加载css文件 --> <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %> <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" /> <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" /> <% } %> <!-- 这里从cdn配置里面加载js文件 --> <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %> <link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script" /> <% } %></head><body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> <!-- 这里从cdn配置里面加载js文件 --> <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %> <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script> <% } %></body></html>打包测试

完成以上步骤后,cdn打包优化就完成啦,现在运行打包测试一下。 下面打包数据和没有cdn优化的打包数据对比一下,是不是依赖项排除了?打包时间也变快了。 面试的时候是不是又多了一些底气了?

本文链接地址:https://www.jiuchutong.com/zhishi/293137.html 转载请保留说明!

上一篇:[vue]提供一种网站底部备案号样式代码(只用vue可以做网站不?)

下一篇:渐进式 Web 应用程序介绍(渐进模式的特点)

  • 网易云可以三个人一起听歌吗(网易云三个月黑胶会员是多少钱)

    网易云可以三个人一起听歌吗(网易云三个月黑胶会员是多少钱)

  • 华为手环6pro怎么设置nfc(华为手环6PRO怎么刷机)

    华为手环6pro怎么设置nfc(华为手环6PRO怎么刷机)

  • 腾讯会议怎么有声录屏(腾讯会议怎么有声录屏iphone)

    腾讯会议怎么有声录屏(腾讯会议怎么有声录屏iphone)

  • 苹果语音备忘录删除了可以恢复吗(苹果语音备忘录占用空间很大)

    苹果语音备忘录删除了可以恢复吗(苹果语音备忘录占用空间很大)

  • 谷歌浏览器兼容性设置在哪里(谷歌浏览器兼容性设置在哪里找)

    谷歌浏览器兼容性设置在哪里(谷歌浏览器兼容性设置在哪里找)

  • wps2019如何插入图片

    wps2019如何插入图片

  • 荣耀手机广角在哪里打开(荣耀手机广角在哪里设置)

    荣耀手机广角在哪里打开(荣耀手机广角在哪里设置)

  • 为什么淘宝没有省钱卡(为什么淘宝没有先用后付)

    为什么淘宝没有省钱卡(为什么淘宝没有先用后付)

  • 升级到icloud云盘打不开(升级到icloud云盘 点升级没反应)

    升级到icloud云盘打不开(升级到icloud云盘 点升级没反应)

  • 淘宝上传图片尺寸要求(淘宝上传图片尺寸调整)

    淘宝上传图片尺寸要求(淘宝上传图片尺寸调整)

  • 随手记同步失败是为什么(随手记同步后之前数据不见了)

    随手记同步失败是为什么(随手记同步后之前数据不见了)

  • 视频彩铃怎么制作(怎么做视频彩铃)

    视频彩铃怎么制作(怎么做视频彩铃)

  • 华为手机原装膜是什么膜(华为手机原装膜刮花了怎么办)

    华为手机原装膜是什么膜(华为手机原装膜刮花了怎么办)

  • 360浏览器白屏是怎么回事(360浏览览器白屏)

    360浏览器白屏是怎么回事(360浏览览器白屏)

  • 怎么注销apple id账号(怎么注销apple id的邮箱)

    怎么注销apple id账号(怎么注销apple id的邮箱)

  • b站里ul怎么升级(b站ul等级怎么升级)

    b站里ul怎么升级(b站ul等级怎么升级)

  • 华为nove5por有呼吸灯吗(华为nova5呼叫等待怎么设置)

    华为nove5por有呼吸灯吗(华为nova5呼叫等待怎么设置)

  • 飞行模式打电话是关机吗(飞行模式打电话会显示关机吗)

    飞行模式打电话是关机吗(飞行模式打电话会显示关机吗)

  • airprint是什么意思(air 是什么意思翻译)

    airprint是什么意思(air 是什么意思翻译)

  • 拼多多第二天还能砍吗(拼多多第二天还可以给同一个人砍吗)

    拼多多第二天还能砍吗(拼多多第二天还可以给同一个人砍吗)

  • 快手注销账号要多久(快手注销账号要多久才搜索不到)

    快手注销账号要多久(快手注销账号要多久才搜索不到)

  • 三星s10设置里处理器在哪查(三星s10+怎么设置悬浮窗口怎么隐藏)

    三星s10设置里处理器在哪查(三星s10+怎么设置悬浮窗口怎么隐藏)

  • word视图怎么恢复正常(word视图怎么恢复默认正常)

    word视图怎么恢复正常(word视图怎么恢复默认正常)

  • 税控盘是什么干嘛的
  • 印花税会计分录最新
  • 发货就要开票吗是真的吗
  • 法人存到公司账户的钱怎么记账
  • 不动产服务具体有哪些
  • 房地产企业承担的债务
  • 会计学中管理费用属于什么
  • 商品周转天数和周转率
  • 房地产增值税发票有什么用
  • 房地产企业收到预收款如何纳税
  • 银行电子回单号码什么意思
  • 何为自然人股东
  • 增值税专用发票电子版
  • 三方协议是先签先干活
  • 开外经证预缴税款金额需要自己计算吗?建筑行业
  • 单位报销托儿费
  • 退股支付的现金流量表怎么填
  • 工商年度报表怎么打印出来
  • 物流公司转包出售合法吗
  • 企业的其他业务成本包括什么
  • 企业所得税分期收款确认收入的时间政策
  • 银行承兑汇票没有提示付款
  • 资本的不同形态
  • 网络适配器不见了win7.上不了网了
  • 房地产企业人防工程计入什么科目
  • windows中的网络协议的配置原理
  • cpu天梯图2022最新排行榜
  • 取得土地所有权范围内的树如何处理
  • 重装系统D盘文件还能恢复吗
  • 公交车的乘车凭证能报销吗
  • win11电脑硬盘分区
  • 生产成本分配表模板
  • 委托开发软件如何入账
  • 企业规模扩大后更易于管理吗
  • 栖息在树林中
  • php学生管理系统设计报告
  • 如何使用应用程序
  • 图书免增值税具体包括哪些
  • 高速公路电子发票查询平台
  • 辞职单位补偿标准
  • 支付版权使用费怎么记账
  • 在建工程账务核算及处理
  • 跨省市提供建筑服务
  • 预算收入支出
  • 开办费的最新账务处理会计视野
  • 服务业小规模纳税人全套做账
  • 样机 研发费用归集与核算
  • 广告类的公司
  • 红字发票异常处理什么意思
  • 分期收款销售商品,收到本期贷款50万元
  • 代开发票的弊端是如何体现的?
  • 社保费和公积金计提分录
  • 挂靠人员社保缴费分录如何做?
  • 小规模纳税人哪里可以查
  • 支付安全生产费会计科目
  • 公司原股东转让全部股权误把认缴金额写成转让金额
  • 记账报税属于会计什么职位
  • 平均净资产是什么意思
  • sql函数使用
  • mysql8.0无法启动
  • win8出现问题需要重启
  • explorer.exe进程在哪
  • WIN10系统睡眠后点不动
  • linux系统的安全机制有哪些
  • mac无线打印
  • keyemain.exe是什么
  • win10飞行模式开关是灰色的
  • nodejs读写json文件
  • cocos2dx 2.2.2
  • cocos2048
  • unity 3d书籍
  • 用jquery实现全选
  • jquery json对象
  • js设计模式有哪些
  • 辽宁省国税局网站
  • 黑龙江电子税务局app手机
  • 地铁发票如何取得
  • 税务局 环保税
  • 山东省地方税务局关于个人所得税
  • 浙江省增值税专用发票票样
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设