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 相关文章推荐
onpropertypchange
Jul 01 Javascript
才发现的超链接js导致网页中GIF动画停止的解决方法
Nov 02 Javascript
JavaScript 核心参考教程 内置对象
Oct 13 Javascript
Jquery实战_读书笔记2 选择器
Jan 22 Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
Mar 31 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
超漂亮的jQuery图片轮播特效
Nov 24 Javascript
node.js中fs.stat与fs.fstat的区别详解
Jun 01 Javascript
Vue.extend构造器的详解
Jul 17 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 Javascript
详解Vue template 如何支持多个根结点
Feb 10 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显示指定目录下子目录的方法
2015/03/20 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
IE 缓存策略的BUG的解决方法
2007/07/21 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
2013/03/26 Javascript
document.write的几点使用心得
2014/05/14 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
NodeJs 文件系统操作模块fs使用方法详解
2018/11/26 NodeJs
js实现蒙版效果
2020/01/11 Javascript
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
python使用正则筛选信用卡
2019/01/27 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
考博专家推荐信
2014/05/10 职场文书
煤矿安全协议书
2014/08/20 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
教师求职信怎么写
2015/03/20 职场文书
文化大革命观后感
2015/06/17 职场文书
员工担保书范本
2015/09/22 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python