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

  • 抖音多少级可以抽惊喜盲盒(抖音多少级可以飘屏)

    抖音多少级可以抽惊喜盲盒(抖音多少级可以飘屏)

  • xboxgamebar什么意思(xbox game bar是啥)

    xboxgamebar什么意思(xbox game bar是啥)

  • pr按导出无反应(pr导出不动了怎么办)

    pr按导出无反应(pr导出不动了怎么办)

  • vivos6电池不耐用(vivox6sa电池不耐用)

    vivos6电池不耐用(vivox6sa电池不耐用)

  • 微信记录为啥电脑还有(微信记录显示不出来)

    微信记录为啥电脑还有(微信记录显示不出来)

  • 华为mate30128g够用吗(mate30128g够用吗)

    华为mate30128g够用吗(mate30128g够用吗)

  • 开关插座l1 l2 l3接法(开关插座十大排名)

    开关插座l1 l2 l3接法(开关插座十大排名)

  • 小米5c联通4g稳定吗(小米5c联通卡)

    小米5c联通4g稳定吗(小米5c联通卡)

  • 手机换完屏幕后发烫(手机换完屏幕后多久可以拆)

    手机换完屏幕后发烫(手机换完屏幕后多久可以拆)

  • 相机夜景模式怎么设置(相机夜景模式怎么开启)

    相机夜景模式怎么设置(相机夜景模式怎么开启)

  • 手机蓝牙可以连接多个设备吗(手机蓝牙可以连接几个蓝牙耳机)

    手机蓝牙可以连接多个设备吗(手机蓝牙可以连接几个蓝牙耳机)

  • 微信号永久封号还能解封吗(微信号永久封号还能重新申请吗)

    微信号永久封号还能解封吗(微信号永久封号还能重新申请吗)

  • 苹果7有原彩显示吗(苹果7有原彩显示开关吗)

    苹果7有原彩显示吗(苹果7有原彩显示开关吗)

  • 网线连接路由器哪个口(如何不插网线连接路由器)

    网线连接路由器哪个口(如何不插网线连接路由器)

  • 手机怎么提高照片画质(手机怎么提高照片清晰度)

    手机怎么提高照片画质(手机怎么提高照片清晰度)

  • 苹果8p指纹解锁突然不能用了是怎么回事(苹果8p指纹解锁还要按一下吗)

    苹果8p指纹解锁突然不能用了是怎么回事(苹果8p指纹解锁还要按一下吗)

  • ipad很久没用充不进电怎么办(ipad很久没用充电一直显示红色)

    ipad很久没用充不进电怎么办(ipad很久没用充电一直显示红色)

  • 百度网盘网址前缀是啥(百度网盘网址前辍)

    百度网盘网址前缀是啥(百度网盘网址前辍)

  • 淘宝聊天的文件在哪里(淘宝聊天的文件在哪里找)

    淘宝聊天的文件在哪里(淘宝聊天的文件在哪里找)

  • mate30几个摄像头(mate30有几个摄像头)

    mate30几个摄像头(mate30有几个摄像头)

  • iphone双卡双待是哪款(iphone 双卡双待)

    iphone双卡双待是哪款(iphone 双卡双待)

  • 广域网采用的交换技术大多是什么(广域网中采取的交换方式大多是)

    广域网采用的交换技术大多是什么(广域网中采取的交换方式大多是)

  • 华为mate20怎么扫描文件(华为mate20怎么扫wifi二维码)

    华为mate20怎么扫描文件(华为mate20怎么扫wifi二维码)

  • 华为mate30是typec接口吗(mate30 typec)

    华为mate30是typec接口吗(mate30 typec)

  • 一加语音助手怎么开(一加语音助手怎么唤醒)

    一加语音助手怎么开(一加语音助手怎么唤醒)

  • 肯德基优惠券怎么用(肯德基优惠券怎么退款)

    肯德基优惠券怎么用(肯德基优惠券怎么退款)

  • 电脑怎么备份文件步骤(电脑怎么备份文件到电脑wps网盘)

    电脑怎么备份文件步骤(电脑怎么备份文件到电脑wps网盘)

  • 按适用税率征税销售额等于销售收入吗
  • 应交所得税的计税基础
  • 土地税和房产税缴纳时间
  • 收到附加税退税的分录
  • 新公司和旧公司对比
  • 一次性发放年终奖怎么税务筹划
  • 开票地址太长显示不全
  • 机票抵扣进项只能在发生当月吗
  • 收回个人社会保险费是否可以冲红管理费用
  • 什么情况下可要求厂商出品质保证书
  • 缓缴税款到期缴纳罚款吗
  • 服务合同需要征税吗
  • 行政事业单位培训伙食补助报销规定
  • 工商年报中纳税总额包括工会经费吗
  • 上年的增值税专票,下年还能抵扣认证吗
  • 目前建筑里面税金总共包括几部分
  • 失控包括
  • 重置申报清册是什么意思
  • 个人独资企业是什么意思
  • 公司的班车费用怎么入账
  • 支付境外销售佣金如何入账科目
  • 个税怎么抵
  • 发放员工过节费
  • 关联企业借款利息税前扣除
  • mac安装windows不能用键盘
  • 资产负债表其他流动资产计算公式
  • 苹果电脑itu
  • thinkphp5框架介绍
  • php readdir函数
  • 企业的各项费用
  • 专用发票开具错误
  • 第三方代收的款项是什么意思
  • 医学图像处理的步骤一是设计
  • php使用oci8扩展连接oracle
  • 缴纳医疗保险费会计分录
  • 广东高速公路过路费官网
  • 外聘人员怎么申报个税
  • 社保主要有以下哪些方面
  • 三联发票是哪三联颜色分别
  • mysql null+1
  • discuz管理中心进不去
  • 购买方享受的现金折扣
  • 固定资产清理账户借方
  • 小微企业增值税减免政策
  • 商誉的会计核算怎么核算
  • sql server 2008使用
  • 增值税期末留抵退税原因采集确认单
  • 给保安买大衣算贿赂吗
  • 销售免税农产品的会计分录
  • 其他业务收入借贷方向表示
  • 公司为小规模纳税人
  • 其他应收款借方负数代表什么意思
  • 常见的递延所得税
  • 房地产开发企业与转让房地产有关的税金
  • 营业外支出包括
  • 经营地址怎么变更
  • 预付差旅费属于什么类型
  • mysql存储过程中调用存储过程
  • win10手机版下载官方中文版
  • mac怎么设置图片为桌面
  • Linux系统防火墙的命令
  • win10升级后无法进入系统一直重启
  • xp系统怎么删除电脑里所有东西
  • 硬盘安装fedora
  • call to OpenGL ES API with no current context (logged once per thread)
  • 我的第二个姐姐用英语怎么说
  • Unity3D游戏开发引擎
  • nodejs worker
  • bat注销命令
  • shell 数组变量
  • vue购物商城
  • python 钉钉打卡定位
  • 用python编写简单程序
  • ubuntu下安装win10
  • android studio怎么清除缓存
  • 村纪检书记主要工作
  • 北京西城区税务所
  • 北京市地税局领导
  • 增值税留抵退税政策
  • 铜陵职业技术学院专业
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设