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表数据排序 sort table data
Feb 18 Javascript
createElement与createDocumentFragment的点点区别小结
Dec 19 Javascript
JavaScript 创建运动框架的实现代码
May 08 Javascript
简介JavaScript中strike()方法的使用
Jun 08 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
AngularJS表单验证功能分析
May 26 Javascript
详解swiper在vue中的应用(以3.0为例)
Sep 20 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
Oct 28 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 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 数组入门教程小结
2009/05/20 PHP
php 3行代码的分页算法(求起始页和结束页)
2009/10/21 PHP
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
php目录操作实例代码
2014/02/21 PHP
PHP四种基本排序算法示例
2015/04/09 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
浅谈javascript的数据类型检测
2010/07/10 Javascript
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
js opener的使用详解
2014/01/11 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
Python编写检测数据库SA用户的方法
2014/07/11 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
python numpy存取文件的方式
2020/04/01 Python
pandas 空数据处理方法详解
2019/11/02 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
通俗讲解python 装饰器
2020/09/07 Python
python编写实现抽奖器
2020/09/10 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
大学运动会通讯稿
2014/01/28 职场文书
经济担保书范文
2014/04/02 职场文书
机械工程及自动化专业求职信
2014/09/03 职场文书
责任书范本大全
2015/05/11 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
致毕业季:你如何做好自己的职业生涯规划书?
2019/07/01 职场文书
分析Netty直接内存原理及应用
2021/06/14 Java/Android
JavaScript函数柯里化
2021/11/07 Javascript