精选文章 Vue项目CDN优化

Vue项目CDN优化

作者:Rjj_Lucky 时间: 2020-08-04 03:48:20
Rjj_Lucky 2020-08-04 03:48:20

当我们项目完成后,build后发现文件会比较大,部署到服务器上首页加载还比较慢,这都是打包资源太多的问题,照成文件比较大,加载比较慢,这个时候我们就可以使用CDN资源优化项目了

Vue项目CDN优化1build后会打印出日志,会发现这个js文件很大,我当时的是1.6m。

废话不多说,优化如下

1.在vue.config.js 添加如下配置

// chainWebpack: config => {
  //   //发布模式
  //   config.when(process.env.NODE_ENV === 'production', config => {
  //     //entry找到默认的打包入口,调用clear则是删除默认的打包入口,add添加新的打包入口
  //     config.entry('app').clear().add('./src/main-prod.js')
  //     config.set('externals', {
  //       // vue: 'Vue',
  //       axios: 'axios',
  //       'vue-router': 'VueRouter',
  //       // 'element-ui': 'ELEMENT',
  //       'echarts': 'echarts',
  //     })
  //   })
  //   //开发模式
  //   config.when(process.env.NODE_ENV === 'development', config => {
  //     config.entry('app').clear().add('./src/main-dev.js')
  //   })
  // },
  configureWebpack: {
    externals: {
      'vue': 'Vue',  //前面是我们引入的名字,后面是包名
      'axios': 'axios',
      'element-ui': 'ELEMENT',
      'echarts': 'echarts',
    }
  }

我当时是配置了开发模式和发布模式,使用cdn资源是想放在发布后,后来还是删了!!

2.在public目录下的index.html中引入CDN资源


      




//注意: script不要放在head里面,引入的顺序根据依赖,别把vue放在依赖他的下面这样也会报错的
      
       
  
  

CDN资源:https://www.bootcdn.cn/ 

需要就去上面找 

 

 3.npm run build 

上面这些配置完成后,就可以执行npm run build了 可以清楚的看到js的大小从1.6m到200k,效果还是非常明显的。

Vue项目CDN优化2

 

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:openstack虚拟机迁移到ovirt环境脚本实现

下一篇:nv21转Bitmap

您可能感兴趣

  • Vue render函数

    前几天想学学Vue中怎么编写可复用的组件,提到要对Vue的render函数有所了解。可仔细一想,对于Vue的render函数自己只是看了官方的一些介绍,并未深入一点去了解这方面的知识。为了更好的学习后续的知识,又折回来了解Vue中的render函数,这一切主要都是为了后续能更好的学习Vue的知识。 回忆Vue的一些基本概念 今天我们学习的目的是了解和学习Vue的render函数。如果想要更好...

  • 关于前端学习路线的一些建议

    前言 对于刚开始学习前端的伙伴俩说,问得最多的问题就是 ——前端技术现在如此繁杂,我到底应该如何学习。这个话题太大了,几句话回答不好;也由于这个问题确实困扰了很多前端开发人员,所以我也就着手系统的输出这篇文章。 虽然这篇文章花了很长时间,肯定也有其局限性;希望各位不吝指出。 入题 我们俨然能感受到前端岗位现在已经发展成了最重要的研发岗位之一,所以对我们提出的要求也就越来越高。所以我们需要学的...

  • Netflix 微服务架构设计解析

    1 概述 数年来,Netflix 一直是全球体验最好的在线订阅制视频流媒体服务,其流量占全球互联网带宽容量的 15%以上。 在过去的2019 年,Netflix 已经有 1.67 亿名订阅用户,平均每个季度新增 500 万订户,服务覆盖全球 200 多个国家 / 地区。 Netflix 用户每天在 4000 多部电影和 47000 集电视剧上花费超过 1.65 亿小时的时间。从工程角度看,这...

  • vue知识点总结

    # 1.ES6新增? *1、变量的改变* *let:代码块内有效;不能重复声明;不存在变量提升* *const:只读变量,声明之后不允许改变。意味着,一旦声明必须初始化,否则会报错。;* *2、模版字符串(``)* *3、函数* **1、箭头函数 (sender) => { } 箭头函数最直观的三个特点。 不需要function关键字 可以省略return关键字 继承当前上下文的this关键...

  • Web前端开发的思考与经验----五年工作经验

    最近几年对于web前端的传闻很多,比如人才稀缺,简单易学,待遇丰厚,整体势头发展良好等等。遇到过一个不太熟搞后台开发的同事跑来问我学习前端需要掌握哪些内容,也听说过一个搞IOS开发准备自学前端半个月然后要去找前端工作,也曾看到过有人对前端市场人才的稀缺这样吹捧过: 现在,几乎整个互联网行业都缺前端工程师,不仅在刚起步的创业公司,对上市公司乃至巨头这个问题也一样存在。没错,优秀的前端工程师简直...

  • 关于 webpack 的几个知识点

    最近几天备战秋招复习 webpack 的时候,发现一篇总结的比较好的博文,摘取几个相关的问题转载过来,同时根据自己的观点进行了部分调整,希望能够帮助有需要的人。原文链接:关于webpack的面试题总结 随着现代前端开发的复杂度和规模越来越庞大,已经不能抛开工程化来独立开发了,比如 sass 和 less 的代码浏览器是不支持的, 但如果摒弃了这些开发框架,那么开发的效率将大幅下降。在众多前端...

  • 字节跳动面经整理

    1. 操作系统: 进程和线程介绍; 进程或线程死锁介绍; 多进程,多线程的并发执行带来的问题-死锁 死锁是指多个进程(线程)在执行过程中,由于竞争资源或者彼此通信而造成的一种阻塞的现象(互相挂起等待),若无外力他们都将无法推进下去。 银行家算法 了解活锁吗?(没听过) 操作系统中的堆和栈; 栈(操作系统):由编译器自动分配释放,存放函数的参数值,局部变量的值等。其操作方式类似于数据结构中栈,...

  • 全栈面试题总结-十四道大厂

    防抖,顾名思义,防止抖动,以免把一次事件误认为多次,敲键盘就是一个每天都会接触到的防抖操作。 想要了解一个概念,必先了解概念所应用的场景。在 JS 这个世界中,有哪些防抖的场景呢 登录、发短信等按钮避免用户点击太快,以致于发送了多次请求,需要防抖 调整浏览器窗口大小时,resize 次数过于频繁,造成计算过多,此时需要一次到位,就用到了防抖 文本编辑器实时保存,当无任何更改操作一秒后进行保存...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。