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

  • iphone8突然黑屏怎么按都没反应(iphone8突然黑屏开不了机过了很久又好了)

    iphone8突然黑屏怎么按都没反应(iphone8突然黑屏开不了机过了很久又好了)

  • 小米画报不更换壁纸(小米画报为什么就那么几张轮换)

    小米画报不更换壁纸(小米画报为什么就那么几张轮换)

  • 应用宝评论系统升级怎么回事(应用宝评论系统升级不能评论)

    应用宝评论系统升级怎么回事(应用宝评论系统升级不能评论)

  • 防窥屏手机膜都是条纹(防窥屏手机膜的原理)

    防窥屏手机膜都是条纹(防窥屏手机膜的原理)

  • 快手定向流量快手极速版能不能用(快手 定向流量)

    快手定向流量快手极速版能不能用(快手 定向流量)

  • wps横线怎么打出来再填字上去(wps横线怎么打出来)

    wps横线怎么打出来再填字上去(wps横线怎么打出来)

  • 不同品牌的路由器可以进行有线桥接吗(不同品牌的路由器可以有线连接吗)

    不同品牌的路由器可以进行有线桥接吗(不同品牌的路由器可以有线连接吗)

  • b站图片保存失败怎么办(b站图片保存失败原因)

    b站图片保存失败怎么办(b站图片保存失败原因)

  • qq笑脸是什么意思(qq笑脸表情)

    qq笑脸是什么意思(qq笑脸表情)

  • 微信群可以设置禁止加好友吗(微信群可以设置特别提醒吗)

    微信群可以设置禁止加好友吗(微信群可以设置特别提醒吗)

  • xsmax发热正常吗(xsmax发热严重怎么回事)

    xsmax发热正常吗(xsmax发热严重怎么回事)

  • 网络接入已满怎么解决(网络接入已满怎么解决钛马星可以连接几个手机)

    网络接入已满怎么解决(网络接入已满怎么解决钛马星可以连接几个手机)

  • 电子秤数字乱跳的原因(家用电子秤数字乱跳)

    电子秤数字乱跳的原因(家用电子秤数字乱跳)

  • 爱奇艺移动端指什么(爱奇艺 移动)

    爱奇艺移动端指什么(爱奇艺 移动)

  • ssl安全协议的概念及功能(ssl协议的安全性)

    ssl安全协议的概念及功能(ssl协议的安全性)

  • 操作放大器100kv/v是什么意思(造成放大器工作点不稳定的主要原因)

    操作放大器100kv/v是什么意思(造成放大器工作点不稳定的主要原因)

  • 小米8透明版就是探索版吗(小米8透明版参数配置详细)

    小米8透明版就是探索版吗(小米8透明版参数配置详细)

  • iphone中国移动不见了(iphone中国移动无服务怎么回事)

    iphone中国移动不见了(iphone中国移动无服务怎么回事)

  • 无法启动个人热点(无法启动个人热点怎么办)

    无法启动个人热点(无法启动个人热点怎么办)

  • win10清空回收站提示音怎么设置? 解决win10清空回收站没有声音(win10清空回收站是灰色的)

    win10清空回收站提示音怎么设置? 解决win10清空回收站没有声音(win10清空回收站是灰色的)

  • kodakprv.exe是什么进程 作用是什么 kodakprv进程查询(koeids.dll)

    kodakprv.exe是什么进程 作用是什么 kodakprv进程查询(koeids.dll)

  • 账面价值与计税基础之间没有差别只是计价的两种名称
  • 审计库存现金盘点方法
  • 增值税转型的主要内容
  • 在登记账簿时,应在记账凭证上注明所记账簿的页数
  • 价格调节基金费率
  • 房地产开发企业会计科目
  • 增值税专用发票电子版
  • 进项发票未抵扣部份开红冲后当月能抵扣吗?
  • 技术开发费税收优惠政策
  • 建筑业预缴附加税分录
  • 自持是啥意思
  • 不动产评估增值税处理
  • 质押贷款属于什么贷款
  • 委托加工存货要交什么税
  • 280元航天使用费多少钱
  • ipados15什么时候发布
  • php的!
  • windows 10预览版
  • 印花税计提与缴税的区别
  • 企业转手员工工龄怎么算
  • php生成csv文件
  • 税法规定个人收入超过3500元的超过部分应
  • 医院会计制度与实务
  • 即征即退增值税怎么申报
  • php array_walk_recursive 使用自定的函数处理数组中的每一个元素
  • 微信红包的随机性
  • erphpdown插件安装教程
  • 代收代付业务需要开发票吗
  • 日记账的定义
  • 商业汇票的承兑银行必须具备下列条件
  • 微信转账和支付宝转账的区别
  • 哪些发票可以抵企业所得税
  • 织梦cms为什么不维护了
  • 公司报销招待费需要发票还需要菜单明细吗
  • 资金结存属于资产科目吗
  • 金蝶余额调节表勾对日期什么意思
  • 数据库SQL中DML
  • sqlserver2005使用
  • 企业为职工支付的补充医疗保险费
  • sql server 2008的安全机制
  • 未交增值税如何计提
  • 出租固定资产租金属于什么收入
  • 收到营业外收入政府补贴的会计分录
  • 固定资产为什么要交税
  • 月末假退月初假领
  • 预付账款期末可能有余额吗
  • 企业送员工的礼品
  • 以土地出资的税费怎么算
  • 残疾人就业保证金上年工资总额是说上一年度么
  • 认缴资金 实缴资金
  • 如何理解出口退税的意义
  • 退货销售折让会计分录
  • 银行退回服务费怎么写分录
  • 涉及销售费用如何计算
  • 库存商品怎么做表格
  • 被代持股份的股东需要负责吗
  • 去银行更换帐户需要什么
  • 企业材料物资的采购费用包括
  • mysql怎么查询数据表
  • win8应用程序无法正常启动
  • win8电脑设置
  • mac系统锁屏
  • linux shell awk 流程控制语句(if,for,while,do)详细介绍
  • ubuntu如何打开
  • cocos2d-x引擎
  • js面向对象的几种方式
  • xp启动项 命令
  • vue的自定义组件
  • 用javascript
  • python jsonp
  • python字符串拼接join
  • 使用权资产
  • 宁夏电子税务局登录入口
  • 已抵扣过的进项怎么做账
  • 上海地铁和公交乘车码
  • 企业滞纳金怎么算 计算公式
  • 直辖市税务局
  • 国家税收返还政策有哪些
  • 内蒙古赤峰市房价2023年最新房价走势
  • 个人所得税怎么申报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设