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

  • 怎么通过引流赚钱?简简单单说几个重点!(怎么引流赚钱粉)

    怎么通过引流赚钱?简简单单说几个重点!(怎么引流赚钱粉)

  • QQ群推广的内容有哪些?(qq群推广的内容在哪里看)

    QQ群推广的内容有哪些?(qq群推广的内容在哪里看)

  • 戴尔笔记本拆机教程视频(戴尔笔记本拆机教程)(戴尔笔记本拆机inspiron7591拔电池)

    戴尔笔记本拆机教程视频(戴尔笔记本拆机教程)(戴尔笔记本拆机inspiron7591拔电池)

  • 华为荣耀10屏多大(华为荣耀10屏幕多长多宽)

    华为荣耀10屏多大(华为荣耀10屏幕多长多宽)

  • 支付宝刷脸付款如何设置(支付宝刷脸付款可靠吗)

    支付宝刷脸付款如何设置(支付宝刷脸付款可靠吗)

  • 抖音取消赞会提醒对方吗(抖音取消赞后会发现吗)

    抖音取消赞会提醒对方吗(抖音取消赞后会发现吗)

  • 二极管的单向导电性是指什么(二极管的单向导电性是指二极管加正向电压)

    二极管的单向导电性是指什么(二极管的单向导电性是指二极管加正向电压)

  • adc0809工作原理(分析adc0809的工作原理和电路设计)

    adc0809工作原理(分析adc0809的工作原理和电路设计)

  • 小米10官方标配是包括什么(小米官方标配与套餐一的区别)

    小米10官方标配是包括什么(小米官方标配与套餐一的区别)

  • 钉钉视频会议能看到观看时间吗(钉钉视频会议能容纳多少人)

    钉钉视频会议能看到观看时间吗(钉钉视频会议能容纳多少人)

  • 苹果怎么辨别是否拆机(苹果怎么辨别是不是翻新机)

    苹果怎么辨别是否拆机(苹果怎么辨别是不是翻新机)

  • 抖音下载功能怎么开启(抖音下载功能怎么关闭掉)

    抖音下载功能怎么开启(抖音下载功能怎么关闭掉)

  • 苹果手机频繁跳出中国移动(苹果手机频繁跳出欢迎使用中国移动)

    苹果手机频繁跳出中国移动(苹果手机频繁跳出欢迎使用中国移动)

  • 手机丢了怎么补办手机卡(手机丢了怎么补办手机号码)

    手机丢了怎么补办手机卡(手机丢了怎么补办手机号码)

  • mate30防窥屏怎么设置(mate30ai防窥屏)

    mate30防窥屏怎么设置(mate30ai防窥屏)

  • 怎样解除微信绑定的app(怎样解除微信绑定的银行卡)

    怎样解除微信绑定的app(怎样解除微信绑定的银行卡)

  • 小米mde6s手机怎么关机(小米mde6如何进入recovery)

    小米mde6s手机怎么关机(小米mde6如何进入recovery)

  • 快手删过的作品怎么找回(快手删过的作品还能不能找回来)

    快手删过的作品怎么找回(快手删过的作品还能不能找回来)

  • 集成运放电路的功能是什么(集成运放电路的特点及性能)

    集成运放电路的功能是什么(集成运放电路的特点及性能)

  • gp电池是充电电池吗(gp电池是充电电源吗)

    gp电池是充电电池吗(gp电池是充电电源吗)

  • word中如何插入尾注

    word中如何插入尾注

  • 美图秀秀橡皮擦在哪里(美图秀秀橡皮擦功能在哪)

    美图秀秀橡皮擦在哪里(美图秀秀橡皮擦功能在哪)

  • 若依框架:前端登录组件与图像验证码(若依框架前端改造)

    若依框架:前端登录组件与图像验证码(若依框架前端改造)

  • 不动产租赁税率2023
  • 证券交易计税依据
  • 交易性金融资产属于什么科目
  • 银行回单可以做收入吗
  • 免税进口的自用设备再销售时该怎么征税
  • 高速公路通行费发票可以抵扣增值税吗
  • 房产继承是不是谁照顾谁的
  • 个体工商户需要缴纳哪些税
  • 期初建账库存少录数量会计怎么处理
  • 个人开增值税普通发票税率
  • 为什么增值税可以抵扣
  • 签订几年合同每年都要缴纳印花税吗?
  • 劳务费税收分类是什么
  • 增值税专用发票的税率是多少啊
  • 广告宣传费扣除标准30%是什么?
  • 外埠纳税人经营地报验登记税务管理论文
  • 提高主营业务收入的意义
  • 周转天数是越大越好吗
  • 房租收入如何结转成本
  • 专项维修基金所得税可税前扣除吗?
  • 工程回扣增值税如何处理?
  • 开票需要对方提供营业执照吗
  • 企业 停业
  • 华为折叠手机mateX5价格
  • 小规模纳税人开票额度
  • SymSPort.exe - SymSPort是什么进程 有何作用
  • 外汇账户怎么开
  • 免抵退税的具体计算方法
  • 高新企业研发支出转产成品
  • 让绿萝疯长的妙招
  • 股票红利税如何收
  • 金融业贷款损失多少
  • 关于扩展检索,下列说法正确的是
  • yolov5 ios
  • 财务费用为什么流向债权人
  • 外贸公司主要是做什么产品
  • 哪些研发费用可以资本化
  • 零申报的申报表怎么填
  • 企业所得税申报表在哪里打印
  • 年度结转增值税
  • ieee compel 2021
  • 法人不发工资可以吗
  • 展会补贴需要准备什么资料
  • 每月随工资发放的房补,本月至今未发
  • 如何安装sql server2022
  • 个体户季报网上申报怎么填写
  • 房地产企业 预缴
  • 递延所得税资产和负债怎么理解
  • 应收款项计提坏损怎么算
  • 项目人员租房费用怎么算
  • 建筑企业外经证需要准备什么资料
  • 内部使用的收据可以做原始凭证吗
  • 限定性和非限定性资产
  • 备查账包括哪些
  • sql server 3417错误
  • SQLServer XML查询快速入门(18句话)
  • mysql数据库性能监控
  • mysql免安装版本
  • centos7 eth
  • 电脑系统win7怎么看
  • xp的命令提示符在哪
  • windows7怎么设置右键菜单
  • win8图标大小怎么调
  • iptables: Unknown error 4294967295问题解决方法
  • 对象转化为字符串的几种方式
  • ExtJS4中的requires使用方法示例介绍
  • linux管道定义
  • android基础知识大全
  • linux命令sed的用法
  • unity笔记本
  • JavaScript中的数据类型分哪为两大类?
  • Python 正则表达式入门(中级篇)
  • 《JavaScript高级程序设计》pdf链接
  • jquery 获取父元素的子元素
  • jquery 判断是否显示
  • android注入so
  • 2022河南省地方专项计划分数线
  • 现在还有地方税务登记证吗
  • 河南地税税率怎么计算
  • 海员证办理流程需要什么手续时间多长
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设