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

  • 微信怎么撤销拍一拍(微信怎么撤销拍拍别人)

    微信怎么撤销拍一拍(微信怎么撤销拍拍别人)

  • 苹果12怎么录屏(苹果12怎么录屏有声音)

    苹果12怎么录屏(苹果12怎么录屏有声音)

  • 抖音隐私设置绿色是开还是关的(抖音隐私设置绿色是关闭隐私么)

    抖音隐私设置绿色是开还是关的(抖音隐私设置绿色是关闭隐私么)

  • 快手为什么亮度发暗(快手屏幕变亮)

    快手为什么亮度发暗(快手屏幕变亮)

  • 电子版和扫描件一样吗(将纸质版扫描成电子版的软件)

    电子版和扫描件一样吗(将纸质版扫描成电子版的软件)

  • 王卡看腾讯视频不显示免流(王卡看腾讯视频为什么要流量)

    王卡看腾讯视频不显示免流(王卡看腾讯视频为什么要流量)

  • 荣耀v8电池有个叹号(荣耀手机电池旁边的标志是什么意思)

    荣耀v8电池有个叹号(荣耀手机电池旁边的标志是什么意思)

  • mate30灭屏显示费电吗

    mate30灭屏显示费电吗

  • 苹果多功能圆点(苹果圆点的功能)

    苹果多功能圆点(苹果圆点的功能)

  • 带命令的安全模式不显示cmd(带命令的安全模式)

    带命令的安全模式不显示cmd(带命令的安全模式)

  • 荣耀30s有方舟编译器吗(荣耀30可以玩方舟吗?)

    荣耀30s有方舟编译器吗(荣耀30可以玩方舟吗?)

  • 淘宝短视频怎么保存(淘宝短视频怎么制作)

    淘宝短视频怎么保存(淘宝短视频怎么制作)

  • 息屏显示会损坏屏幕吗

    息屏显示会损坏屏幕吗

  • usb反向充电如何解决(usb反向充电改不了usb已关闭)

    usb反向充电如何解决(usb反向充电改不了usb已关闭)

  • ps怎么剪掉图片一部分(ps怎么剪掉图片的一部分)

    ps怎么剪掉图片一部分(ps怎么剪掉图片的一部分)

  • 苹果手机充一晚上电对手机有影响吗(苹果手机充一晚上电没充满什么原因)

    苹果手机充一晚上电对手机有影响吗(苹果手机充一晚上电没充满什么原因)

  • 电脑pin什么意思(电脑pin码忘记了怎么解锁)

    电脑pin什么意思(电脑pin码忘记了怎么解锁)

  • ps如何选取人物(ps如何选取人物眉眼)

    ps如何选取人物(ps如何选取人物眉眼)

  • 苹果x无线充电怎么开启(苹果x无线充电多少w)

    苹果x无线充电怎么开启(苹果x无线充电多少w)

  • 手机信号h是什么意思(手机信号h什么意思?)

    手机信号h是什么意思(手机信号h什么意思?)

  • mt6762相当于骁龙哪种(mtkmt6762相当于骁龙多少)

    mt6762相当于骁龙哪种(mtkmt6762相当于骁龙多少)

  • 声卡怎么连接手机唱歌(声卡怎么连接手机录音)

    声卡怎么连接手机唱歌(声卡怎么连接手机录音)

  • 抖音怎么发5分钟长视频(抖音怎么发5分钟完整版)

    抖音怎么发5分钟长视频(抖音怎么发5分钟完整版)

  • 手机b站怎么2倍速(b站视频怎么2倍加速)

    手机b站怎么2倍速(b站视频怎么2倍加速)

  • 头条怎么不显示访客(头条怎么不显示抖音粉丝)

    头条怎么不显示访客(头条怎么不显示抖音粉丝)

  • 滴滴付不了钱怎么办(滴滴付不了款怎么回事)

    滴滴付不了钱怎么办(滴滴付不了款怎么回事)

  • 文心一言:中国版“ChatGPT”介绍与测评(文心一言中国版)

    文心一言:中国版“ChatGPT”介绍与测评(文心一言中国版)

  • 购进货物支付的运输费用如何计算增值税
  • 非拒付追索待清偿是什么意思
  • 初级会计计划成本法例题
  • 收到失业金返还什么意思
  • 预缴税款如何抵扣苗木款
  • 个人出租住房要交个税吗
  • 一般纳税人降为小规模还能升为一般纳税人吗
  • 开具红字信息表后怎么开负数发票
  • 发票报送失败怎么弄
  • 母公司给子公司担保的规定
  • 处理企业的财产有哪些
  • 建筑挂靠企业账务处理
  • 被投资方减资的会计处理
  • 解除合同补偿金需要缴纳个税吗
  • 零售商品收入会计分录
  • 加工承揽合同印花税谁交
  • 预收电费怎么做会计分录
  • 契税可以银行转让吗
  • 文化创意企业一般纳税人开票产生的税率为多少?
  • 天然气的销售需要什么资质
  • 增值税税负的概念和如何确定税负
  • 外地预缴的企业所得税可以退吗
  • 原材料报废怎么记账
  • 未分配利润清算如何处理
  • 工程公司收到工程款
  • windows 10鼠标如何操作
  • 玩游戏时切换窗口怎么弄
  • 更新出现网络异常
  • 自费出版的书籍可以售卖吗
  • 什么是民办非企业属于民营经济吗
  • 小型微利企业减免所得税计算公式
  • 提取法定盈余公积会计科目
  • 分公司不能享受所得税优惠
  • 谷歌浏览器被hao123锁定改不了
  • ntpd命令
  • 归还长期借款会计分录例题
  • 所得税费用会计科目代码
  • 企业年度报告包括哪些内容
  • 减免税在借方如何结转
  • python的多进程模块
  • mongodb基本操作
  • 公司处置汽车
  • 小规模纳税人应交税费科目设置
  • 核定扣除投入产品怎么算
  • 存货跌价准备借减贷增吗
  • 外贸企业应交税费计入
  • 小规模纳税人防水工程专用发票税率是多少
  • 水利基金的计税税率6
  • 同一控制下长期股权投资的入账价值
  • 厂房出租自用各种费用
  • 无形资产账面价值和账面余额的区别
  • 对公账户的钱怎么用
  • 建筑行业有哪些生意可以做
  • 出售固定资产怎样报增值税申报表
  • 充油卡未收发票怎么办
  • 公司给员工买房子如何做账
  • 暂估入库可以隔几个月再冲回吗
  • 劳务报酬现金流量
  • 银行承兑到期后怎么兑现
  • 收到货款但未开票怎么入账
  • 资本性支出项目管理
  • sqlserver 查看表
  • sqlserver用户权限不给增删查改表结构权限
  • 微软 win7
  • 怎么彻底卸载visual
  • mac小技巧
  • window7系统中的桌面指什么
  • 电脑window8系统怎么样
  • css图片标签
  • nodejs爬虫框架crawler
  • php编译安装常见的软件
  • 模仿文明
  • js动态给table添加行
  • javascript快速入门
  • python自带的gui
  • 新疆税务局电子
  • 四川国税局普通发票查询?
  • 图像信息采集照片
  • 天津税务查询电话
  • 小店区税务大厅
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设