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

  • 微信朋友圈3天可见怎么设置(微信朋友圈3天可见是对所有人吗)

    微信朋友圈3天可见怎么设置(微信朋友圈3天可见是对所有人吗)

  • 大疆无人机跟随模式怎么设置(大疆无人机跟随模式高度)

    大疆无人机跟随模式怎么设置(大疆无人机跟随模式高度)

  • 红米手机接电话黑屏能怎么调整呢(红米手机接电话就没网络怎么解决)

    红米手机接电话黑屏能怎么调整呢(红米手机接电话就没网络怎么解决)

  • 抖音喜欢在哪里关闭(抖音喜欢在哪里设置关闭)

    抖音喜欢在哪里关闭(抖音喜欢在哪里设置关闭)

  • 笔记本电脑开合轴坏了(笔记本电脑开合处裂开)

    笔记本电脑开合轴坏了(笔记本电脑开合处裂开)

  • 电话权限允许后会怎样(电话权限允许后再次关闭会怎么样)

    电话权限允许后会怎样(电话权限允许后再次关闭会怎么样)

  • 毒无法鉴定是什么意思(毒无法鉴别会退钱吗)

    毒无法鉴定是什么意思(毒无法鉴别会退钱吗)

  • 0xc0000001是硬盘坏了吗(0xc00000e9是硬盘损坏吗)

    0xc0000001是硬盘坏了吗(0xc00000e9是硬盘损坏吗)

  • 网站显示有风险能看吗(网站显示有风险会会盗刷银行卡)

    网站显示有风险能看吗(网站显示有风险会会盗刷银行卡)

  • 淘宝卖家店铺不存在了怎么办(淘宝卖家店铺不开钱退不回)

    淘宝卖家店铺不存在了怎么办(淘宝卖家店铺不开钱退不回)

  • 华为手机可以装电信卡吗(华为手机可以装两个电信卡吗)

    华为手机可以装电信卡吗(华为手机可以装两个电信卡吗)

  • 文件传输和远程登录的区别(文件传输和远程登录都是)

    文件传输和远程登录的区别(文件传输和远程登录都是)

  • word文档分成左右两半(word文档分成左右两页怎么恢复)

    word文档分成左右两半(word文档分成左右两页怎么恢复)

  • vue怎么添加多张照片(vue动态添加多个表单)

    vue怎么添加多张照片(vue动态添加多个表单)

  • 小米8se有红外线功能吗(小米8se有红外线遥控功能吗)

    小米8se有红外线功能吗(小米8se有红外线遥控功能吗)

  • iphonexsmax有nfc功能吗(iphonexsmax开启nfc)

    iphonexsmax有nfc功能吗(iphonexsmax开启nfc)

  • 显示器60hz和144hz区别(显示器60hz和144hz哪个对眼睛伤害低)

    显示器60hz和144hz区别(显示器60hz和144hz哪个对眼睛伤害低)

  • 微店分期付款是真的吗(微店分期付款是全部付完才发货吗)

    微店分期付款是真的吗(微店分期付款是全部付完才发货吗)

  • 怎么防止手机号被定位(怎么防止手机号封号)

    怎么防止手机号被定位(怎么防止手机号封号)

  • 火山视频怎么增加火力(火山视频如何增加火力)

    火山视频怎么增加火力(火山视频如何增加火力)

  • 华为手机放大镜在哪里(华为手机放大镜功能怎么用在相机上)

    华为手机放大镜在哪里(华为手机放大镜功能怎么用在相机上)

  • Vue缓存路由(keep-alive)以及新的生命周期(vue缓存路由组件相关的两个生命周期函数是)

    Vue缓存路由(keep-alive)以及新的生命周期(vue缓存路由组件相关的两个生命周期函数是)

  • 销售商品的差价怎么算
  • 开具电费发票如何入账?
  • 进出口环节税
  • 计提附加税的金额怎么算
  • 土地使用税是新增税吗
  • 金税四期上线后对企业的影响
  • 车辆购置税可以刷信用卡吗?
  • 运输公司轮胎如何做会计分录
  • 增值税发票记账联要盖章吗
  • 财务会计制度备案表
  • 股权转让交的税如何做账
  • 退货开负数发票的情况该如何做会计处理?
  • 支付拆迁补偿款
  • 股票持有多久可以打新股
  • 以旧换新增值税税率是多少
  • 补提上个月折旧会计分录
  • 受赠人个人所得税
  • 既销售货物又提供劳务例题
  • 季度盈利要交所税吗
  • 建筑中小企业
  • 小企业短期投资的核算应设置的会计科目有
  • 客户收集软件
  • 固定资产残值率计算公式
  • 净资产收益率摊薄
  • 办公家具折旧年限及计算方法
  • 家庭版系统如何重装成专业版本
  • Win10如何去掉桌面快捷方式的箭头
  • 公司帮员工买社保能扣税吗
  • 应收票据与应付票据的使用与哪种银行结算方式有关
  • 莱奇沃思田园城市
  • 银行支付的存款怎么做账
  • php加载mysql
  • 利润的构成要素包括
  • 工程材料费发票没拿到是否能预提费用
  • php实现验证码
  • 微信小程序使用费用
  • Python 计算机视觉(八)—— OpenCV 进行图像增强
  • css过渡动画属性
  • ai 绘画原理
  • node 文件
  • 购入固定资产的进项税额可以抵扣吗
  • 预收账款未发货会计分录
  • 银行承兑到期后几天内有效
  • union ll
  • 以前年度多计提增值税
  • 事业单位成本核算具体指引—公立医院
  • 纳税减免申报
  • 企业每月应交哪几种税费
  • 未缴增值税的贷方
  • 科研项目财政拨款怎么算
  • 员工探亲路费报销入哪个科目
  • mysql@变量
  • mysql忘了密码
  • 固定资产达到预定状态的判定
  • 小规模纳税人转一般纳税人的条件
  • 出纳去银行取钱需要带什么
  • 商业承兑背书后怎么办
  • 出售未计提完折旧的固定资产需要折扣吗
  • 某酒店住宿费用定价分析
  • sql server常规错误
  • windows server 2008 r2离线激活
  • Windows Server 2008制作密码重设盘
  • Windows Server 2008疑难杂症
  • linux系统汉化教程
  • centos5.4 安装
  • centos6.5如何安装
  • xp系统java环境变量配置
  • centos7怎么配置
  • win8系统如何卸载软件
  • layer关闭当前窗口
  • 新闻客户端有哪些?
  • androidsocket原理
  • 虚拟现实国内做的最好的
  • nodejs例子
  • 如何查看驱动器
  • python字典有什么用
  • js初级教程
  • python twinter
  • 河南省国税电子普通发票发票真伪查询系统
  • 同业借款的主要用途
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设