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 相关文章推荐
深入理解JavaScript定时机制
Oct 29 Javascript
js读取配置文件自写
Feb 11 Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
Javascript实现Web颜色值转换
Feb 05 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 Javascript
JavaScript引用类型和基本类型详解
Jan 06 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
基于js实现checkbox批量选中操作
Nov 22 Javascript
self.attachevent is not a function的解决方法
Apr 04 Javascript
vue实现app页面切换动画效果实例
May 23 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 Javascript
el-form 多层级表单的实现示例
Sep 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
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
咖啡知识大全
2021/03/03 新手入门
实用函数4
2007/11/08 PHP
解析php如何将日志写进syslog
2013/06/28 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
简明json介绍
2008/09/28 Javascript
JavaScript 继承的实现
2009/07/09 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
python使用htmllib分析网页内容的方法
2015/05/08 Python
python中format()函数的简单使用教程
2018/03/14 Python
Python eval函数介绍及用法
2020/11/09 Python
售后专员岗位职责
2013/12/08 职场文书
秘书英文求职信
2014/04/16 职场文书
电气工程及其自动化专业求职信
2014/06/23 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
代理词怎么写
2015/05/25 职场文书
会议主持词开场白
2015/05/28 职场文书
子女赡养老人协议书
2016/03/23 职场文书
导游词之唐山景点
2019/12/18 职场文书
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS
Python实战之疫苗研发情况可视化
2021/05/18 Python
MongoDB数据库之添删改查
2022/04/26 MongoDB