vue 优化CDN加速的方法示例


Posted in Javascript onSeptember 19, 2018

代码敲完,项目上线,然后就要与优化相遇。

vue 优化CDN加速的方法示例

项目有抢购的性质content download 时间非常的长加载慢的很,至此开始前端优化之旅

项目根目录运行

npm install webpack-bundle-analyzer --save-dev

在build/webpack.dev.conf.js中引入

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 plugins: [
 new BundleAnalyzerPlugin()
 ]

运行后显示可以看到几个大的js 下面是已经优化过后的截图

像vue ,vue-router,vuex,axios,mint-ui,crypto-js

vue 优化CDN加速的方法示例

1.使用CDN资源

其作用是:当我们加载页面时,需要将我们所需要的一些依赖加载到当前会话中然后再开始执行,如果我们首屏,模块比较多是,需要等待的时间会比较长,而且。浏览器内存最多执行四十个进程,需要等到加载完前面的才能执行后面的代码,如果我们采用cdn的方式来引入一些第三方资源,就可以缓解我们服务器的压力,原理是将我们的压力分给其他服务器点。

使用cdn在index.html中引入

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <script src="//cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
 <script src="//cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
 <script src="//cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
 <script src="//cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
 <script src="https://cdn.bootcss.com/mint-ui/2.2.13/index.js"></script>
 <script src="https://cdn.bootcss.com/crypto-js/3.1.9/crypto-js.min.js"></script>
 <title></title>
</head>
<body>
 <div id="app"></div>
 <!-- built files will be auto injected -->
</body>
</html>

修改build/webpack.base.conf.js文件,externals外部扩展,通过这种方式引入依赖库,不需要webpack处理。

module.exports = {
 ...
 externals: {
 'vue': 'Vue', // 左侧vue是我们自己引入时候要用的,右侧是开发依赖库的主人定义的不能修改
 'vue-router': 'VueRouter',
 'vuex': 'Vuex',
 'axios': 'axios',
 'mint-ui': 'MINT',
 'crypto-js': 'CryptoJS'
 }
 ...
}

console.log(window) 打印出下图

网上查了资料有的引入有的还是会引入有的没有引入,拿mint-ui举例,查到的资料在main.js有下面的引入,但是注释掉之后还是可以正常使用mint-ui的组件,import VueRouter from 'vue-router' 也是可以注释掉使用的,感觉是因为window全局有了VueRouter,但是有个问题就是eslint会报警告,所以就没有注释掉。如果理解有误希望大家能指出我的错误

import MINT from 'mint-ui'
Vue.use(MINT)

vue 优化CDN加速的方法示例

main.js

import Vue from 'vue' // 没有注释掉是因为main.js其他地方用到了Vue,如果没有用到可以注释掉
import App from './App'
import router from './router'
import store from './store'

router/index.js

// import Vue from 'vue' // 注释掉
// Vue.use(VueRouter) // 注释掉
import VueRouter from 'vue-router' // 文件中引入的时候用我们自己定义的vue-router
const appRouter = {
....
}
export default new VueRouter(appRouter)

store/index.js

// import Vue from 'vue' // 注释掉
// Vue.use(Vuex) // 注释掉
import Vuex from 'vuex'
const store = new Vuex.Store({
 ....
})
export default store

CryptoJS用来加密,在使用的地方直接引入。axios同理

import CryptoJS from 'crypto-js'
.....

优化之前

vue 优化CDN加速的方法示例

优化之后

vue 优化CDN加速的方法示例

另外就是花点钱提高了下带宽o(?□?)o

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现收缩菜单效果实例代码
Oct 30 Javascript
JavaScript中for..in循环陷阱介绍
Nov 12 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 Javascript
javascript变量声明实例分析
Apr 25 Javascript
javascript伸缩型菜单实现代码
Nov 16 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
JS隐藏号码中间4位代码实例
Apr 09 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 Javascript
利用js实现简易红绿灯
Oct 15 Javascript
Vue前后端不同端口的实现方法
Sep 19 #Javascript
vue-cli 3.x 修改dist路径的方法
Sep 19 #Javascript
浅谈React之状态(State)
Sep 19 #Javascript
jQuery使用each遍历循环的方法
Sep 19 #jQuery
vue新vue-cli3环境配置和模拟json数据的实例
Sep 19 #Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
Sep 19 #Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 #Javascript
You might like
PHP自动生成后台导航网址的最佳方法
2013/08/27 PHP
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
js 设置缓存及获取设置的缓存
2014/05/08 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
2016/07/09 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
JS设计模式之责任链模式实例详解
2018/02/03 Python
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
Python注释、分支结构、循环结构、伪“选择结构”用法实例分析
2020/01/09 Python
Python configparser模块操作代码实例
2020/06/08 Python
python模拟点击在ios中实现的实例讲解
2020/11/26 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
请用用Java代码写一个堆栈
2012/01/26 面试题
个人找工作的自我评价
2013/10/17 职场文书
开办化妆品公司创业计划书
2013/12/26 职场文书
高中学生干部学习的自我评价
2014/02/21 职场文书
高中生职业规划范文
2014/03/09 职场文书
目标责任书范本
2014/04/16 职场文书
学习雷锋活动总结
2014/04/29 职场文书
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
患者身份识别制度
2015/08/06 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书
python小程序之飘落的银杏
2021/04/17 Python
python源码剖析之PyObject详解
2021/05/18 Python