Vue打包优化篇-CDN加速

这篇具有很好参考价值的文章主要介绍了Vue打包优化篇-CDN加速。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

优化原因

在没有使用cdn加速之前打包后数据如下,可以看出element-ui、vue、vuex、vue-router这些依赖都打进chunk-vendors.js中导致体积很大,假设再来很多依赖项是不是更大,同时也会影响单页面应用首屏加载速度,所以这里采用一种打包优化手段之一来分离依赖项。

Vue打包优化篇-CDN加速

查看依赖版本

首先项目中需要使用依赖项,我这里项目中打算将element-ui、vue、vuex、vue-router这些依赖项进行分离,记录依赖版本方便后面使用。

依赖名称 依赖版本
vue 2.6.11
vue-router 3.2.0
vuex 3.4.0
element-ui 2.15.9

Vue打包优化篇-CDN加速

查看依赖引用

在main.js中可以看到这些依赖被引用。
在项目中开发环境和生成环境一些配置是不同的,所以这里截图方便后面理解。

Vue打包优化篇-CDN加速

配置开发环境和生产环境

在上面我们已经看到main.js中如何引用依赖,现在我们需要做一些改动在main.js改为main-dev.js作为我们的开发环境,然后在同级目录下创建一个新的文件叫main-prod.js作为我们的生产环境,实际开发中开发环境(main-dev.js)和生产环境(main-prod.js)配置存在不同。

开发环境入口 - main-dev.js

Vue打包优化篇-CDN加速

// 这是给ElementUI组件库组件设置默认参数
Vue.use(ElementUI, {
    size: 'small', zIndex: 3000 });

生产环境入口 - main-prod.js

Vue打包优化篇-CDN加速

// 这是给ElementUI组件库组件设置默认参数(cdn加速和生产环境配置有区别)
Vue.prototype.$ELEMENT = {
   
  size: 'small',
  zIndex: 3000
};

配置开发环境入口和生产环境入口

这里需要注意一下的是配置入口,因为默认入口文件只有一个main.js但是你给改成了main-dev.js而且还新增了一个main-prod.js,然后你运行项目或打包项目肯定报错,因为它去找main.js找不到啊,所以这里需要通过vue.config.js文件来指定生产环境和开发环境入口。文章来源地址https://www.toymoban.com/news/detail-401772.html

vue.config.js

// 判断是否是生产环境
const isProduction = process.env.NODE_ENV !== 'development';

module.exports = {
   
    publicPath: './', // 不加这个可能会导致静态资源找不到的情况。
    chainWebpack: config => {
   
        config.when(isProduction, config => {
   
        	// 如果是生产环境&

到了这里,关于Vue打包优化篇-CDN加速的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vite配置cdn优化打包体积

    大家都知道前端性能优化的方法,cdn外部引入的方法可以使项目打包后体积大大缩小,所以是前端性能优化方面非常推荐的方法之一。 本文关于 vite2 vue3 + Ts 项目如何cdn引入 element plus 做一个简单教程,我们可以通过两种方式引入配置cdn。 由于 vite 的核心基于 rollup 和 webpac

    2024年02月05日
    浏览(41)
  • CDN加速要怎么使用?一分钟教你使用CDN

    互联网行业的发展脱离不开越来越多人生活习惯的变动,比如以前我们在线下购物,现在我们在线上抢购,虽然以前的经营模式并没有产生变化,但因为互联网的进军,大众的生活已经不能没有网络了。但光有网络没有足够好的服务肯定是不行的,因为越来越多的网民出现,

    2024年02月12日
    浏览(39)
  • 使用国际阿里云CDN加速和OSS传输加速区别是什么呢?

    详细信息 阿里云对象存储OSS以海量、安全、低成本、高可靠等特点已经成为用户存储静态资源和文件的首要选择,实际使用中面向全球各地用户访问OSS资源时,访问速度会受到客户端网络、OSS的下行带宽、Bucket地域、访问链路长等限制出现访问慢的情况。以下主要介绍CDN加速

    2024年02月13日
    浏览(44)
  • 如何使用jsDelivr+Github 实现免费CDN加速?

    目录 序言 1 cdn简介 2 cdn请求分发原理 3 jsDelivr简介 4.jsDelivr 的简单使用 5 jsDelivr + Github 的具体实现 5.1 新建Github仓库 5.2 使用git clone 命令将仓库克隆到本地 5.3 将需要cdn加速的资源上传到github仓库 5.4 点击release 发布版本 5.5 通过jsDelivr引用资源 6 将hexo中用到静态资源的地方换成

    2024年02月03日
    浏览(48)
  • 【阿里云OSS对象存储搭配CDN加速使用】

    内容分发网络CDN (Content Delivery Network)是建立并覆盖在承载网之上,由遍布全球的边缘节点服务器群组成的分布式网络。将源站内容分发至 最接近用户的节点 ,使用户可就近取得所需内容, 提高用户访问的响应速度和成功率 。解决因分布、 带宽、服务器性能带来的访问延

    2024年02月09日
    浏览(40)
  • Github搭建图床 github搭建静态资源库 免费CDN加速 github搭建图床使用 jsdelivr CDN免费加速访问

    写博客文章时,图片的上传和存放是一个问题,使用小众第三方图床,怕不稳定和倒闭,七牛云和又拍云都有免费10GB,但是需要自己有域名才行,这时候就可以使用Github,github免费版是无限仓库数量、无限文件数量,但是限制 单个文件不能大于100MB ,完全够用了 Github搭建静

    2024年02月01日
    浏览(74)
  • 使用Github + PicGo搭建个人图床,并使用CDN加速

    前言 在写博客的时候,常常需要为博客配图,于是一个好用稳定的图床的重要性不言而喻。本文主要介绍如何使用GitHub + PicGo的方式快速搭建一个个人使用的图床。该方式方便快捷,还免费hh,唯一的不足是图片存放在GitHub公有仓库中,但是应该不会有人在图床里上传私密的

    2024年01月18日
    浏览(60)
  • nginx开启Gzip压缩,Vue性能优化之使用gzip压缩打包

    不管是vue项目还是react项目在使用webpack打包之后都会生成一个动辄一两兆甚至更大的js文件,在某些情况下严重影响项目性能,打开页面的时候白屏时间会很长,本文将介绍如何使用gzip压缩打包,主要是nginx部署的配置,非常重要,我查阅了很多文章基本都没用说清楚甚至错

    2024年02月02日
    浏览(40)
  • 什么是CDN加速?CDN加速有哪些作用?

    CDN 的全称是 Content Delivery Network,即内容分发网络。CDN 是在现有 Internet 基础上增加一层新的网络架构,通过部署边缘服务器,采用负载均衡、内容分发、调度等功能,使用户可以就近访问获取所需内容,从而解决网站拥塞情况,提高用户访问响应速度。 CDN 加速技术主要就是

    2023年04月23日
    浏览(43)
  • vue打包完成后出现空白页原因及解决

    资源路径不对 路由模式:使用history, 此模式上线后易出现404 1、vue.config.js中配置: 2、在后端要求做重定向 如在nginx中使用rewrite做重定向

    2024年02月04日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包