位置: 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 应用程序介绍(渐进模式的特点)

  • 网易云唱片收藏架怎么编辑(网易云唱片收藏架怎么换)

    网易云唱片收藏架怎么编辑(网易云唱片收藏架怎么换)

  • iphone铃声怎么设置(iphone铃声怎么设置静音)

    iphone铃声怎么设置(iphone铃声怎么设置静音)

  • TRT-AL00型号是什么手机

    TRT-AL00型号是什么手机

  • 微信被永久封了手机号咋办(微信被永久封了实名能不能注销)

    微信被永久封了手机号咋办(微信被永久封了实名能不能注销)

  • tcp协议通过什么来区分不同的连接(tcp协议通过什么机制保证可靠通信)

    tcp协议通过什么来区分不同的连接(tcp协议通过什么机制保证可靠通信)

  • 淘会员是什么(【淘会员】)

    淘会员是什么(【淘会员】)

  • 华为sa/nsa双模什么意思(华为sa+nsa模式是什么意思)

    华为sa/nsa双模什么意思(华为sa+nsa模式是什么意思)

  • 抖音不展示活跃状态是什么意思(抖音不展示活跃状态怎么进去)

    抖音不展示活跃状态是什么意思(抖音不展示活跃状态怎么进去)

  • 手机开关键失灵是什么原因(vivo手机开关键失灵)

    手机开关键失灵是什么原因(vivo手机开关键失灵)

  • qq号封永久能不能找回好友(qq号封永久能不能解封)

    qq号封永久能不能找回好友(qq号封永久能不能解封)

  • 为什么我苹果id老是被锁(为什么我苹果id密码正确也登不上)

    为什么我苹果id老是被锁(为什么我苹果id密码正确也登不上)

  • 小米快捷功能怎么取消(小米快捷功能怎么设置)

    小米快捷功能怎么取消(小米快捷功能怎么设置)

  • 手机酷狗怎么显示歌词(手机酷狗怎么显示频谱)

    手机酷狗怎么显示歌词(手机酷狗怎么显示频谱)

  • 内存卡需要激活吗(内存卡买回来是不是要先激活)

    内存卡需要激活吗(内存卡买回来是不是要先激活)

  • 拼多多买家要实名认证吗(拼多多买家实付金额和卖家到帐金额不一样是怎么回事l)

    拼多多买家要实名认证吗(拼多多买家实付金额和卖家到帐金额不一样是怎么回事l)

  • 怎样关闭qq语音自动翻译(怎样关闭qq语音自动转文字)

    怎样关闭qq语音自动翻译(怎样关闭qq语音自动转文字)

  • 与十六进制数bb等值的八进制数是多少(与十六进制数bb等值的8进制数是)

    与十六进制数bb等值的八进制数是多少(与十六进制数bb等值的8进制数是)

  • qq邮箱能发送6g附件吗(Qq邮箱能发送文件夹吗)

    qq邮箱能发送6g附件吗(Qq邮箱能发送文件夹吗)

  • 拼多多留言备注在哪里(拼多多留言备注怎么取消)

    拼多多留言备注在哪里(拼多多留言备注怎么取消)

  • 从环绕山峰的小径最高点看到的拉瓦莱多三峰山,意大利 (© AWL Images/Danita Delimont)(环绕着山的是什么歌)

    从环绕山峰的小径最高点看到的拉瓦莱多三峰山,意大利 (© AWL Images/Danita Delimont)(环绕着山的是什么歌)

  • 南邦国家公园的尖峰石阵,西澳大利亚州 (© Frank Krahmer/Getty Images Plus)(鬓角头发剃光了多久能长好)

    南邦国家公园的尖峰石阵,西澳大利亚州 (© Frank Krahmer/Getty Images Plus)(鬓角头发剃光了多久能长好)

  • 红字专票进项税额如何做
  • 普通发票的税费额度高吗
  • 企业当年发放以往年度工资
  • 新增社保工资填多少好
  • 加油发票样式图
  • 营业成本在资产负债表哪里
  • 航天金税的服务费如何抵扣
  • 已上传的红字发票怎么打印
  • 事业单位固定资产
  • 提取法定盈余公积会计分录
  • 存货盘亏进项税额转出会计分录
  • 商品溢余做销售的会计分录怎么写?
  • 公司自建房屋如何进行入账?
  • 房租费用在本年内可以不摊销吗?
  • 建筑公司亏损异常怎么办
  • 土地使用权出让和划拨有什么区别
  • 营改增个体工商户优惠政策
  • 营改增后水费差额征税账务处理怎么做?
  • 所得税汇算清缴扣除标准
  • 环保税征收意义
  • 季度缴纳所得税如何做账
  • 长期股权投资权益法初始计量
  • 钢结构施工速度快吗
  • 纳税申报表怎么打印
  • 工资和薪金是一回事吗
  • php网站架设
  • win10修改hosts文件权限
  • php中file
  • CVE-2016-1000027分析
  • php framework框架
  • 房产税城镇土地使用税申报期限
  • php用在哪些方面
  • vue插槽使用
  • ChatGPT 被大面积封号,到底发生什么了?
  • uniapp scroll-view基础用法
  • 商贸企业发生退税的原因
  • 锁定vlookup快捷键
  • 个人以实物出资怎么做账
  • 出售无形资产损益怎么算
  • java中public修饰什么
  • dom事件种类
  • 如何在控制台打印debug里的数据
  • 企业所得税汇算清缴会计分录
  • 低值易耗品还需要录入明细吗
  • 票据粘贴顺序是什么
  • 三险一金的专项扣除标准
  • 销售产品的运输费会计分录
  • MSSQL2005 INSERT,UPDATE,DELETE 之OUTPUT子句使用实例
  • mysql数据库编码
  • 购买研发设备的发票可以申报创新券吗?
  • 库存商品转成本意味着什么
  • 会计分录记录于什么中
  • 公司收到银行发放贷款会计分录
  • 固定资产盘亏造成的损失计入什么科目
  • 暂估入账错误了怎么办
  • 总公司与分公司的账务处理
  • 水利建设基金筹集和使用管理办法
  • 视同销售的账务处理方法
  • sql server入门新手教程
  • win10邮件和日历怎么更新新版outlook
  • windowsxp文件
  • linux模块的概念
  • win7系统播放器在哪
  • linux中文件系统
  • centosgui
  • nero recode
  • layui nodejs
  • extjs4 treepanel动态改变行高度示例
  • 动作
  • 批处理文件夹内文件名
  • win10如何使用命令
  • Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
  • shell脚本spool
  • javascript高级程序设计pdf百度云
  • js tab切换
  • python如何获取系统绝对路径
  • bootstrap快速入门
  • 说几条javascript的基本规范
  • 沈阳市地方税务局
  • 拟录用和录用的区别在哪
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设