vue优化之CND优化

问题: vue 打包(npm run build)之后, vendor.js文件过大, 导致首页加载速度非常慢, 影响体验效果, 原因是第三方库(vue , vue-router , element-ui , axios )都打包在vendor.js 文件中

解决方法

使用 CND 优化
CND 优化是指把第三方库(vue , vue-router , element-ui , axios )通过外链的形式引入到项目目中, 减少打包时 vendor.js 文件的体积, 以加快页面访问速度

使用方法

在项目根目录中找到 index.html , 把需要用到的资源用过 CDN 的方式引入该文件中, 如图:
推荐几个相对稳定的外链地址 bootcdn , staticfile, jsdelivr

如果担心cdn引入的外链出现问题, 可以使用两个不同的外链地址, 毕竟同事出现问题的几率还是比较小的

注: vue-router 引入两次页面会报错

原因: vue-router 加载两次时, 页面会有报错, 意思是vue-router 不能注册两次, 虽然正常使用, 但是页面报错还是需要解决一下
解决办法: 方法1: vue-router 安装到本地, 方法二: vue-router只加载一次

若是担心cdn 不稳定, 则可以使用,静态资源加载的方法(即当cdn加载失败的时候, 加载静态资源)

if (typeof Vue == 'undefined') {document.write(unescape("%3Cscript src='/static/js/vue/2.5.16/vue.min.js'%3E%3C/script%3E"))
}
if (typeof VueRouter == 'undefined') {document.write(unescape("%3Cscript src='/static/js/vue-router/3.0.1/vue-router.min.js'%3E%3C/script%3E"))
}
if (typeof Vuex == 'undefined') {document.write(unescape("%3Cscript src='/static/js/vuex/3.0.1/vuex.min.js'%3E%3C/script%3E"))
}
if (typeof axios == 'undefined') {document.write(unescape("%3Cscript src='/static/js/axios/0.18.1/axios.min.js'%3E%3C/script%3E"))
}

在 build/webpack.base.conf.js 文件中进行配置
externals: {
‘vue’: ‘Vue’,
‘vue-router’: ‘VueRouter’,
‘element-ui’: ‘ELEMENT’,
‘axios’: ‘axios’
},
去掉引入的文件
去掉import 引入
去掉Vue.use(XXX)

使用 cdn外链后, npm run build 打包能明显的感觉到 vendor.js 变小很多, 页面相应速度也会变快

vue优化之CND优化相关推荐

【VUE项目实战】64、CND优化ElementUI以及首页内容定制
接上篇<63.指定打包入口及加载外部CDN资源> 上一篇我们为开发模式与发布模式制定不同的打包入口,然后为项目加载外部CDN资源.本篇我们来学习通过CND优化ElementUI的打包,以及 ...
Vue项目的性能优化
目录前言一.代码层面的优化 1. **v-if 和 v-show 区分使用场景** 2. **computed 和 watch 区分使用场景** 3. **v-for 遍历必须为 item 添加 ...
Vue首屏性能优化组件
Vue首屏性能优化组件简单实现一个Vue首屏性能优化组件,现代化浏览器提供了很多新接口,在不考虑IE兼容性的情况下,这些接口可以很大程度上减少编写代码的工作量以及做一些性能优化方面的事情,当然为了考 ...
Vue中常见的性能优化，项目优化/单页面性能优化,Vue中六大优化方案
1.编码优化 1. 下里将所有的数据都放在data中,data中的教据都会增加getter和setter,会收集对应的watcher 2. vue在v-for时给每项元素绑定事件需要用事件代理 3. ...
有关前端性能优化的方案—Vue 代码层面性能优化+Webpack 层面的优化+基础的 Web 技术优化+非框架代码优化
文章目录: 一.代码层面的优化 1.1.v-if 和 v-show 区分使用场景 1.2.computed 和 watch 区分使用场景 1.3.v-for 遍历必须为 item 添加 key,且避免 ...
Vue.js 应用性能优化，给你专业的分析+解决方案
目录介绍为什么我们需要 Vue JS 性能优化? Vue 性能不佳背后的主要原因如何检查您的 VueJS 应用的大小? 如何优化 Vue js 应用程序的性能? 1. 在 Vue js 中懒加载 ...
10个技巧！实现Vue.js极致性能优化（建议收藏）
导语 | Vue是一套用于构建用户界面的渐进式的JavaScript框架.它具有体积小,更高的运行效率,双向数据绑定,生态丰富.学习成本低等优点,所以Vue也被广泛用在移动端跨平台框架上.接下来,我将 ...
前端每周清单第 34 期：Vue 现状盘点与 3.0 展望，React 代码迁移与优化，图片优化详论
新闻热点国内国外,前端最新动态 Microsoft 宣发面向 iOS 与 Android 平台的 Microsoft Edge:为了保证 Windows 用户各平台使用体验的一致性,Microsof ...
前端每周清单第 34 期：Vue 现状盘点与 3.0 展望，React 代码迁移与优化，图片优化详论... 1
前端每周清单第 34 期:Vue 现状盘点与 3.0 展望,React 代码迁移与优化,图片优化详论作者:王下邀月熊编辑:徐川前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解 ...

vue优化之CND优化

使用方法

vue优化之CND优化相关推荐

最新文章

热门文章