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 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
告诉大家什么是JSON
Jun 10 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
基于jQuery实现淡入淡出效果轮播图
Jul 31 Javascript
JavaScript中对象的不同创建方法
Aug 12 Javascript
Vue.js组件tree实现无限级树形菜单
Dec 02 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
Aug 07 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下的权限算法的实现
2007/04/28 PHP
PHP无刷新上传文件实现代码
2011/09/19 PHP
PHP中SESSION使用中的一点经验总结
2012/03/30 PHP
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
PHP goto语句简介和使用实例
2014/03/11 PHP
php通过ajax实现双击table修改内容
2014/04/28 PHP
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
php关键字仅替换一次的实现函数
2015/10/29 PHP
php加密解密字符串示例
2016/10/13 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
jQuery基于当前元素进行下一步的遍历
2014/05/20 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
2016/05/18 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
老生常谈onBlur事件与onfocus事件(js)
2016/07/09 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
[25:45]2018DOTA2亚洲邀请赛4.5SOLO赛 Sylar vs Paparazi
2018/04/06 DOTA
python3模块smtplib实现发送邮件功能
2018/05/22 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
python3实现弹弹球小游戏
2019/11/25 Python
python如何实现复制目录到指定目录
2020/02/13 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
2020/08/31 Python
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
《哪吒闹海》教学反思
2014/02/28 职场文书
合作意向书模板
2014/03/31 职场文书
教师读书活动总结
2014/05/07 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
Django框架中视图的用法
2022/06/10 Python