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

  • 微信扫码付款能查到付款人信息吗(微信扫码付款能查到对方微信号吗)

    微信扫码付款能查到付款人信息吗(微信扫码付款能查到对方微信号吗)

  • vivoz5x防水吗(vivoz5i手机防水吗)

    vivoz5x防水吗(vivoz5i手机防水吗)

  • 为什么手机充电会发烫(为什么手机充电会充一下断一下)

    为什么手机充电会发烫(为什么手机充电会充一下断一下)

  • 进入了联通的黑名单多久可以退出来(进入了联通的黑名单怎么办)

    进入了联通的黑名单多久可以退出来(进入了联通的黑名单怎么办)

  • 排版方式有哪几种(排版常见的两种方式)

    排版方式有哪几种(排版常见的两种方式)

  • 空间好友互动是啥意思(空间好友互动是干什么的)

    空间好友互动是啥意思(空间好友互动是干什么的)

  • 网线有屏蔽和非屏蔽吗(网线屏蔽与非屏蔽的区别)

    网线有屏蔽和非屏蔽吗(网线屏蔽与非屏蔽的区别)

  • 华为灭屏显示位置变换(华为灭屏显示位置)

    华为灭屏显示位置变换(华为灭屏显示位置)

  • 键盘复制键和粘贴键哪两个(键盘复制键粘贴)

    键盘复制键和粘贴键哪两个(键盘复制键粘贴)

  • 如何下载电视剧到手机上(如何下载电视剧在没网的时候观看)

    如何下载电视剧到手机上(如何下载电视剧在没网的时候观看)

  • 华为手机怎么设置白名单(华为手机怎么设置24小时制时间)

    华为手机怎么设置白名单(华为手机怎么设置24小时制时间)

  • 爱奇艺如何登录多个人(爱奇艺如何登录另一个手机)

    爱奇艺如何登录多个人(爱奇艺如何登录另一个手机)

  • 安卓手机怎么更换内存(安卓手机怎么更换返回键)

    安卓手机怎么更换内存(安卓手机怎么更换返回键)

  • vivo有nfc功能吗(vivo有nfc功能吗在哪里)

    vivo有nfc功能吗(vivo有nfc功能吗在哪里)

  • 华为体脂秤怎么添加新成员(华为体脂秤怎么用)

    华为体脂秤怎么添加新成员(华为体脂秤怎么用)

  • thumbnails删了会怎样(thumbdata删除后果)

    thumbnails删了会怎样(thumbdata删除后果)

  • 钉钉里怎么设置出差状态(钉钉里怎么设置管理员权限)

    钉钉里怎么设置出差状态(钉钉里怎么设置管理员权限)

  • 美团热门搜索怎么删除(美团热门搜索怎么设置)

    美团热门搜索怎么删除(美团热门搜索怎么设置)

  • qq邮箱照片怎么保存到手机(qq邮箱照片怎么压缩发送)

    qq邮箱照片怎么保存到手机(qq邮箱照片怎么压缩发送)

  • 抖音喜欢的作品可以隐藏吗(抖音喜欢的作品不让别人看怎么设置)

    抖音喜欢的作品可以隐藏吗(抖音喜欢的作品不让别人看怎么设置)

  • 苹果x超过150m怎么用流量下载(iphone怎么解决超过200m)

    苹果x超过150m怎么用流量下载(iphone怎么解决超过200m)

  • 06_HTML_表单提交的细节(submit提交按钮的使用细节)(html 提交表单)

    06_HTML_表单提交的细节(submit提交按钮的使用细节)(html 提交表单)

  • 山西省税务申报网站
  • 小规模纳税人刚成立公司如何记账
  • 一般纳税人优惠政策最新2022标准
  • 核定征收一般纳什么税
  • 旅游大巴怎么计费的
  • 资产评估费怎么收
  • 银行回单卡是什么卡
  • 滞纳金按什么比例算
  • 企业有哪些行为
  • 上个月没有结账可以做下个月的账吗
  • 公益性捐赠会计分录金额
  • 小企业核算其它货币资金包括哪些?
  • 开出发票上有折扣的怎么入账?
  • 增值税普票跨年重开风险
  • 已经使用的固定资产其变动方式等基础资料将
  • 固定资产的计税基础6种情况
  • 失控进项发票转出 补税做账
  • 设计服务发票怎么入账
  • 旅游景区税收标准
  • 通发票备注栏写什么内容
  • 代开普票需要具备哪些资料?
  • 职工福利费当年怎么扣
  • 西部大开发政策2020到期
  • 企业购入机器设备供方登记
  • 代缴个税税务局奖励款怎么做账?
  • 工资上浮20%怎么算
  • 预付货款样品费怎么入账
  • 自产自用的产品用于在建工程
  • 资产负债表怎么看平不平
  • 销售商品全部退回
  • 银行收付款凭证是什么
  • php中实现文件的上传需要使用哪个全局变量
  • php测试成功的邮件是什么
  • windows2004没有推送
  • 营改增后租金如何交税
  • 增值税跟企业所得税的关系
  • crontab不执行的原因和解决方案
  • 固定资产清理税务处理
  • 什么是增值税普票和专票
  • 固定资产备案有什么用
  • javascript核心技术
  • 安装充电桩电费怎么收
  • 报建费减免
  • 债权收益权转让
  • 本期进项税额明细表为什么数据一直出不来
  • php数据库网址
  • mysql报错1227
  • mongodb修改命令
  • 发票商品分类
  • 发放职工福利的会计处理
  • mysql load local
  • 跨年的房租费用怎么做账
  • 公司法人怎么样才会没有责任
  • 电子承兑汇票承兑后几天到账
  • 国有资产无偿划转需要缴税吗
  • 房地产开发企业资质证书
  • 收到广告费分录
  • 预付款属于什么会计分录
  • 跨年工程施工如何计算成本
  • 物业公司预收的物业费怎么做账
  • 弱电工程怎么入账
  • 客户购买商品的三要素
  • 进项税转出补缴增值税 城建税及两费
  • ubuntul
  • 怎么防止win10
  • 快速任务栏
  • mac dock栏不见了
  • win8系统如何打开摄像头
  • 冗余文件是什么意思
  • jquery判断控件是否存在
  • jquery常用
  • nodejsapi
  • shell脚本编程100例
  • Python装饰器入门学习教程(九步学习)
  • jq easyui
  • 安卓设备分辨率查看
  • listview属性设置
  • android 进程通信
  • 车船税完税证明开具如何开具
  • 上饶国资委领导班子成员名单
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设