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

  • hyper-v找不到(hyper-v找不到磁盘)

    hyper-v找不到(hyper-v找不到磁盘)

  • 苹果xsmax有红外线吗(苹果xs带红外线功能吗)

    苹果xsmax有红外线吗(苹果xs带红外线功能吗)

  • 金立s10是不是双卡(金立s10是不是双卡双待)

    金立s10是不是双卡(金立s10是不是双卡双待)

  • 电脑分盘c盘多大合适(分盘c盘分多大合适)

    电脑分盘c盘多大合适(分盘c盘分多大合适)

  • 打印机有重影怎么消除(打印机有重影怎么消除没有维护功能)

    打印机有重影怎么消除(打印机有重影怎么消除没有维护功能)

  • 删除页码为什么是灰色(删除页码为什么没有了)

    删除页码为什么是灰色(删除页码为什么没有了)

  • 华为nova7pro返回键在哪里(华为nova7pro返回键怎么按)

    华为nova7pro返回键在哪里(华为nova7pro返回键怎么按)

  • 手机直播卡是什么原因(手机直播卡是什么问题)

    手机直播卡是什么原因(手机直播卡是什么问题)

  • 苹果8和6s大小一样吗(苹果6s和苹果8尺寸一样吗)

    苹果8和6s大小一样吗(苹果6s和苹果8尺寸一样吗)

  • mdz06aa是第几代啊(mdz09aa是第几代)

    mdz06aa是第几代啊(mdz09aa是第几代)

  • 有锁卡贴机什么意思(有锁的卡贴机)

    有锁卡贴机什么意思(有锁的卡贴机)

  • 微信投诉会提醒对方吗(微信投诉提醒几天取消)

    微信投诉会提醒对方吗(微信投诉提醒几天取消)

  • 微博异常状态需要激活(微博 异常状态)

    微博异常状态需要激活(微博 异常状态)

  • 荣耀9x怎么弄小窗口(荣耀9i怎么弄小窗口)

    荣耀9x怎么弄小窗口(荣耀9i怎么弄小窗口)

  • 爱奇艺最多几台设备(爱奇艺最多几台设备登陆)

    爱奇艺最多几台设备(爱奇艺最多几台设备登陆)

  • pcie4.0有什么用(pcie4.0有什么用配什么显卡)

    pcie4.0有什么用(pcie4.0有什么用配什么显卡)

  • 华为wastl10是什么机型(华为wastl10手机)

    华为wastl10是什么机型(华为wastl10手机)

  • vivo支持无线充电吗(vivo支持无线充电的5g手机有哪些)

    vivo支持无线充电吗(vivo支持无线充电的5g手机有哪些)

  • iphonex夜间模式怎么弄(iphonexs 夜间模式)

    iphonex夜间模式怎么弄(iphonexs 夜间模式)

  • 支付宝体验金有什么用(支付宝体验金有没害处)

    支付宝体验金有什么用(支付宝体验金有没害处)

  • ipad怎么连蓝牙耳机(ipad怎么连蓝牙运动耳机)

    ipad怎么连蓝牙耳机(ipad怎么连蓝牙运动耳机)

  • 怎么激活苹果11(怎么激活苹果14pro)

    怎么激活苹果11(怎么激活苹果14pro)

  • 小米5什么类型屏幕(小米5什么类型好)

    小米5什么类型屏幕(小米5什么类型好)

  • apple music怎么换区(apple music怎么换账号登陆)

    apple music怎么换区(apple music怎么换账号登陆)

  • qqsiri建议怎么关闭(苹果qq建议怎么关闭)

    qqsiri建议怎么关闭(苹果qq建议怎么关闭)

  • 步步高旗下的手机品牌(步步高旗下手机品牌和电子产品)

    步步高旗下的手机品牌(步步高旗下手机品牌和电子产品)

  • 苹果手机来电无声响(苹果手机来电无法拒绝)

    苹果手机来电无声响(苹果手机来电无法拒绝)

  • Windows操作系统出现内存错误解决方法

    Windows操作系统出现内存错误解决方法

  • 最贵的U盘是什么(贵的u盘和便宜的有什么区别)

    最贵的U盘是什么(贵的u盘和便宜的有什么区别)

  • 最小的触屏手机是什么(最小的触屏手机有哪些)

    最小的触屏手机是什么(最小的触屏手机有哪些)

  • 可回收再生资源有哪些
  • 建筑劳务公司的工资计入什么科目
  • 研发辅助账科目设置
  • 天猫最新提现技术
  • 劳务公司开票税收分类
  • 进项税加计抵减生产性服务
  • 车辆保险赔款怎么入账
  • 银行开户时存入的现金怎么做账
  • 退货或者销毁处理
  • 购买车间用的材料怎么做分录
  • 今年补缴去年的税汇算清缴吗
  • 增值税税负多少算高
  • 商业营业用房经营租赁税率是多少
  • 只开增值税普通发票,需要申报税务吗
  • 农产品增值税免税政策
  • 提供物业管理服务的纳税人如何认定
  • 简单内帐利润报表一目了然
  • 现金折扣税务会计
  • 贷款利息可以抵扣吗
  • 银行定期存款的利息是每个月给你吗
  • 小规模纳税人增值税超过30万怎么纳税
  • 外卖收入增值税怎么算
  • 基建期增值税如何抵扣
  • 电脑怎么进入bios中文
  • 局域网内如何设置静态ip
  • 关闭系统保留空间
  • 企业出现销售折扣时如何处理
  • 一般纳税人怎么算税
  • windows7怎么说
  • php安装及使用教程
  • 情人节海报怎么画简单
  • 转让二手设备如何交易
  • 新注册的外贸公司花名册
  • 固定资产一次性扣除后第二年账务处理
  • 中小企业所得税优惠政策2022
  • 企业预缴所得税怎么算
  • ros机器人自主导航中膨胀地图图层的颜色
  • defaultpool
  • vue框架搭建步骤
  • 利息支出是利息费用嘛
  • 应付职工薪酬账户期末余额可能是
  • 库存盘点差异分录
  • 公允价值变动损益
  • 甲供材料增值税规定
  • 印花税的计税依据为各种应税凭证上所记载的计税金额
  • 以房租入股公司怎么交税
  • sql20054n
  • 可以抵扣的进项发票有哪些
  • 营业执照变更法人需要本人去吗
  • 支付给职工以及为职工支付的现金增加说明什么
  • 充值卡赠送金额属于什么性质
  • 商业企业库存商品成本核算
  • 餐饮赠送的菜品需要缴税吗
  • 固定资产溢余账务处理
  • 材料合理损耗计入入账价值吗
  • 出差在火车上算上班吗
  • 跨年暂估成本会计分录
  • 期初建帐
  • 哪些收入属于免增值税
  • 应付账款怎么入账
  • 买货品的咨询服务有哪些
  • 会计科目的设置应该符合国家统一会计准则的规定
  • sql触发器菜鸟教程
  • sqlserver判断数据库是否存在
  • linux 执行结果写到文件
  • win8磁盘占用率高怎么处理
  • macbook移到废纸篓
  • ubuntu 14.4
  • linux服务器搭建实战详解
  • vivo渠道服容易被找回吗
  • vue router routes
  • 启动游戏使用的文件夹什么意思
  • js中写html代码
  • jquery实现动画
  • 事件的分发与传播的关系
  • 电子发票未验真是假发票吗
  • 广西税务局热线电话
  • 小规模年度财务报表
  • 代理记账和代理的区别
  • 四川地方税务局官网首页
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设