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

  • 微信拍一拍有提示音吗(微信拍一拍提示如果对方不是最新版本)

    微信拍一拍有提示音吗(微信拍一拍提示如果对方不是最新版本)

  • epubee怎么传到kindle(epubee的书怎么保存到kindle)

    epubee怎么传到kindle(epubee的书怎么保存到kindle)

  • 滴滴服务分500滚动后变化吗(滴滴服务分500滚动在哪里看)

    滴滴服务分500滚动后变化吗(滴滴服务分500滚动在哪里看)

  • 易打单显示授权已过期(易打单绑定服务商)

    易打单显示授权已过期(易打单绑定服务商)

  • 图片查看器提示内存不足(图片查看器提示彩色打印)

    图片查看器提示内存不足(图片查看器提示彩色打印)

  • 苹果电脑风扇一直响是什么原因啊(苹果电脑风扇一直响无法开机)

    苹果电脑风扇一直响是什么原因啊(苹果电脑风扇一直响无法开机)

  • 关闭当前的演示文稿的快捷键(关闭演示怎么写)

    关闭当前的演示文稿的快捷键(关闭演示怎么写)

  • 蓝牙耳机连接手机经常中断怎么回事(蓝牙耳机连接手机成功但是没声音)

    蓝牙耳机连接手机经常中断怎么回事(蓝牙耳机连接手机成功但是没声音)

  • 微信账号异常多久恢复(微信账号异常多久能恢复正常)

    微信账号异常多久恢复(微信账号异常多久能恢复正常)

  • k歌等级的划分标准(k歌里面的等级是怎么晋级的)

    k歌等级的划分标准(k歌里面的等级是怎么晋级的)

  • 腾讯网卡都有哪些免流(腾讯网卡有哪些免流的APP)

    腾讯网卡都有哪些免流(腾讯网卡有哪些免流的APP)

  • 移动硬盘坏了数据可以恢复吗(移动硬盘坏了数据可以导出来吗)

    移动硬盘坏了数据可以恢复吗(移动硬盘坏了数据可以导出来吗)

  • 未开通联通服务功能是什么意思(未开通联通服务功能怎么办)

    未开通联通服务功能是什么意思(未开通联通服务功能怎么办)

  • 设置苹果id需要多久(设置苹果id需要什么邮箱)

    设置苹果id需要多久(设置苹果id需要什么邮箱)

  • 朋友圈点赞图标没了(朋友圈点赞图标不见了怎么回事)

    朋友圈点赞图标没了(朋友圈点赞图标不见了怎么回事)

  • b-e1是什么手机电池(bcg-e2816a是什么手机)

    b-e1是什么手机电池(bcg-e2816a是什么手机)

  • 一加6上市时间(一加6那年上市的)

    一加6上市时间(一加6那年上市的)

  • 抖音怎么拍9宫格视频(抖音如何拍九宫格)

    抖音怎么拍9宫格视频(抖音如何拍九宫格)

  • 手机耗电比充电快怎么办(手机耗电比充电快怎么办华为)

    手机耗电比充电快怎么办(手机耗电比充电快怎么办华为)

  • 国行苹果x是什么基带(iphone x 国行)

    国行苹果x是什么基带(iphone x 国行)

  • 乐视广告怎么关闭(乐视电视广告一键关闭)

    乐视广告怎么关闭(乐视电视广告一键关闭)

  • 花呗怎么添加到我的应用(花呗怎么添加到手机桌面)

    花呗怎么添加到我的应用(花呗怎么添加到手机桌面)

  • 445端口关闭后怎么共享(445端口关闭怎么关)

    445端口关闭后怎么共享(445端口关闭怎么关)

  • 华为手机微信图片怎么保存到相册(华为手机微信图片保存到文件夹在哪里)

    华为手机微信图片怎么保存到相册(华为手机微信图片保存到文件夹在哪里)

  • oppor15快充设置(opporeno5快充设置)

    oppor15快充设置(opporeno5快充设置)

  • 资本公积转增资本的限制条件
  • 应补退税额是什么意思
  • 什么软件属于无线网卡
  • 无法上报季度财务报告
  • 经营性应收项目和经营性应付项目
  • 企业所得税季报是全年累计吗
  • 购买方丢失未认证发票 怎么办
  • 销售农业产品的税率
  • 快递行业的收入与成本
  • 个体工商户生产经营所得税率
  • 押金是为了什么
  • 报废资产取得的增值税
  • 收到汇票的账务处理
  • 资产负债表里所有者权益合计为负数正常吗
  • 增值税即征即退政策
  • 税收滞纳金和税金滞纳金有什么区别
  • 实务操作中的税会差异有哪些?
  • 电费先付后开票怎么做账
  • 公司招待用烟酒的管理
  • 权利许可证照印花税每个月都要交吗
  • 合营企业之间为什么不构成关联方
  • 补贴收入营业外收入比例过高
  • 进料加工可分为
  • 苹果6plus自带软件有哪些
  • 多发工资未退回会怎么样
  • 什么是电流定律
  • mac版字体怎么安装
  • 扣缴公积金的会计分录
  • php中substr()
  • php上传大文件失败
  • win10删除了此电脑
  • 公司处于亏损状态,股东要退股怎么办
  • 集团公司交税怎么交?
  • 出口商品怎么做分录
  • 仓储服务和不动产租赁
  • vue3组件写法
  • php模板引擎原理
  • 什么是水利建设基金税
  • this.$router.push点了后hash地址改变了,页面却不跳转
  • 实现扩展功能的快捷键
  • React Hook - useEffecfa函数的使用细节详解
  • 机票的退票费计入什么会计科目
  • 税务局手续费返还政策
  • 信息技术服务所得税税负率多少
  • 红冲暂估是什么意思
  • 工厂道路设计规范
  • 用友t3采购订单怎么录入
  • 供应商货款支付流程
  • 境内企业借外债,不还会怎么样
  • 固定资产清理属于什么科目借方增加还是减少
  • 财务费用?
  • 固定资产转售账务处理
  • 购货方享受现金折扣增值税
  • 工人的工资占企业的比例
  • 账簿设置方法
  • macbook像素能不能提高
  • mac上网速度慢
  • Mail.app增强插件:Universal Mailer介绍
  • centos怎么查看文件
  • centos php apache
  • openbabel安装
  • win10系统任务栏卡顿
  • xp无法进入桌面怎么办
  • 苹果电脑安装中国银行网银助手
  • win8.1启动设置
  • js判断密码强弱
  • 批处理程序
  • Unity3D游戏开发标准教程吴亚峰于复兴人民邮电出版社
  • angular 嵌入html
  • IE、FF、Chrome浏览器中的JS差异介绍
  • jquery移动端ui
  • node .js
  • 用javascript
  • 绑定安卓
  • 设计模式具有的优点
  • 深入理解中国式现代化
  • python登陆代码
  • 从局部变量和全变量区分
  • 新加坡政治体制的介绍
  • 北京市工会会员卡免费公园有哪些
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设