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

  • 市场营销从业者的基本理论工具(市场营销从业者资格证书有哪些)

    市场营销从业者的基本理论工具(市场营销从业者资格证书有哪些)

  • 史上最详细的十八种微信推广方法

    史上最详细的十八种微信推广方法

  • 小米watch color2怎么打电话(小米watch color2怎么重置)

    小米watch color2怎么打电话(小米watch color2怎么重置)

  • vivox70pro+蓝牙在哪里(vivox70pro蓝牙在哪里)

    vivox70pro+蓝牙在哪里(vivox70pro蓝牙在哪里)

  • 新版qq音乐音乐房间去哪里了(新版qq音乐音乐影片功能)

    新版qq音乐音乐房间去哪里了(新版qq音乐音乐影片功能)

  • 为什么抖音转发不了(为什么抖音转发只能转发到日常)

    为什么抖音转发不了(为什么抖音转发只能转发到日常)

  • 快手号注销别人能看到吗(快手号注销别人还能看到私信吗)

    快手号注销别人能看到吗(快手号注销别人还能看到私信吗)

  • 超级快充可以设置吗(超级快充怎么变成普通充电)

    超级快充可以设置吗(超级快充怎么变成普通充电)

  • word五种基本视图(word的基本操作视频)

    word五种基本视图(word的基本操作视频)

  • 快手闪电购怎么退货(快手闪电购怎么上架商品)

    快手闪电购怎么退货(快手闪电购怎么上架商品)

  • 手机后盖碎了影响使用吗(手机后盖碎了影响保修吗)

    手机后盖碎了影响使用吗(手机后盖碎了影响保修吗)

  • 72伏充电器能充60伏吗(72伏充电器能充68伏的电动车不)

    72伏充电器能充60伏吗(72伏充电器能充68伏的电动车不)

  • 台式机键盘字母键错乱(台式机键盘字母错乱)

    台式机键盘字母键错乱(台式机键盘字母错乱)

  • itunes什么意思(已停用连接iTunes什么意思)

    itunes什么意思(已停用连接iTunes什么意思)

  • ipada1566是ipad几(苹果ipada1566是什么型号几代)

    ipada1566是ipad几(苹果ipada1566是什么型号几代)

  • 华为手机进网试用是什么意思(华为手机进网试用可以撕掉吗)

    华为手机进网试用是什么意思(华为手机进网试用可以撕掉吗)

  • 怎么让qq音乐的歌词显示手机屏幕(怎么让qq音乐的歌词显示在游戏界面)

    怎么让qq音乐的歌词显示手机屏幕(怎么让qq音乐的歌词显示在游戏界面)

  • 电脑桌面最下面一栏没有了怎么办(电脑桌面最下面一行叫什么)

    电脑桌面最下面一栏没有了怎么办(电脑桌面最下面一行叫什么)

  • ipad4平板如何全屏(2020款ipad怎么设置全屏)

    ipad4平板如何全屏(2020款ipad怎么设置全屏)

  • 手机ppt的背景怎么做(手机ppt的背景怎么设置图片)

    手机ppt的背景怎么做(手机ppt的背景怎么设置图片)

  • 抖音抢镜怎么调音量(抖音抢镜怎么调整大小)

    抖音抢镜怎么调音量(抖音抢镜怎么调整大小)

  • 淘宝店铺被管控期多久(淘宝店铺被管控资金15天后期也会被经常管控吗)

    淘宝店铺被管控期多久(淘宝店铺被管控资金15天后期也会被经常管控吗)

  • xsmax掉电快怎么办(xsmax掉电多少正常)

    xsmax掉电快怎么办(xsmax掉电多少正常)

  • ios12哪个版本最稳定(ios12哪个版本最流畅省电)

    ios12哪个版本最稳定(ios12哪个版本最流畅省电)

  • 苹果8p的无线充电在哪(苹果8p的无线充电在哪个位置)

    苹果8p的无线充电在哪(苹果8p的无线充电在哪个位置)

  • bixby按键自定义(bixby键自定义成电源键功能)

    bixby按键自定义(bixby键自定义成电源键功能)

  • aegisub字幕怎么和视频合并(aegisub字幕怎么换行什么键位)

    aegisub字幕怎么和视频合并(aegisub字幕怎么换行什么键位)

  • 微信小程序 | 小程序的事件处理(微信小程序小窗口)

    微信小程序 | 小程序的事件处理(微信小程序小窗口)

  • 累计交税如何计算?
  • 收入总额的概念
  • 食品销售税务起征点是多少
  • 餐饮通用机打发票可以报销吗
  • 金融企业往来收入是指
  • 超标的职工教育经费为什么是可抵扣
  • 注销地税需要缴纳什么税费
  • 净现金流量率计算公式
  • 核定征收是每个月都要交税吗
  • 取消国税用什么手续
  • 个体工商户开具增值税专用发票
  • 营改增后增值税小规模纳税人按什么申报
  • 小微企业每年可以开多少发票北京
  • 小规模需要公账还是私账
  • 结转实物发放的成本分录
  • 竹笋属于什么税目类别
  • 商品流通企业会计零售业务核算
  • 逾期往来账款怎么处理?
  • 进行财产清查
  • 营业收入现金怎么计算
  • 受让股东对出让股东抽逃出资
  • 认缴出资日期是2050什么意思
  • 文件改后缀什么意思
  • sixtypopsix.exe - sixtypopsix是什么进程 有什么用
  • wmiprvse.exe是什么程序
  • 原材料废料怎么做账
  • 阿尔山火山
  • 巴伐利亚森林国家公园钍自然真正自然
  • php preg_quote
  • 商业汇票转让后,能否追索前手
  • javaweb实验一
  • websocket怎么用
  • Win11系统自带输入法怎么卸载
  • 直接转销法能不能用
  • 公司车辆固定资产转移税
  • 其他应收款借贷方表示什么意思
  • php swoole 协程
  • sqlserver2008分页查询
  • 税控服务费全额抵扣怎么申报
  • 利得都需要缴纳企业所得税吗
  • 现时社保缴费
  • 纳税人增值税专用发票票面价税合计最多开多少金额
  • 交易性金融资产包括哪些项目
  • 原材料基本账务处理办法
  • 营业税金及附加包括哪些
  • 货款收不回来了怎么做账
  • 盈利能力分析对企业发展的意义
  • 存货周转次数越高好还是越低好
  • 银行收到货款会计分录怎么做
  • 河道维护中心
  • 应付账款二级科目可以是个人吗
  • 代销货物收取手续费计入
  • 未达起征点怎么报税
  • 如何提取坏账准备
  • 流动比率怎么算出来的
  • mysql5.7配置文件my.ini
  • centos 命令
  • gwservice进程
  • win8系统故障了怎么办
  • linux网络编程视频教程
  • centos永久修改主机名
  • win7如何访问xp
  • win7 桌面空白
  • win7系统打印服务怎么开启
  • Windows Server 8 ADDS轻松几步搞定密码个性化设置
  • win7电量
  • 手机背光面板
  • python 很简单
  • python ftp文件上传
  • Python装饰器基础详解
  • js入门基础教程
  • jquery动态添加div
  • 使用jquery实现的项目
  • jquery常用插件有哪些
  • javascript面向对象吗
  • 地税局书记是什么级别
  • 成都高新区税务局办税服务厅电话
  • 杨浦区办理健康证地点
  • 请问农村自建房彩钢瓦下面修房吊什么顶好
  • 教育用地性质可以更改么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设