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 相关文章推荐
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 Javascript
JavaScript经典效果集锦
Jul 06 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
Sep 17 Javascript
JavaScript中的作用域链和闭包
Jun 30 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
js innerHTML 改变div内容的方法
Aug 03 Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
详解如何在Vue里建立长按指令
Aug 20 Javascript
React SSR样式及SEO的实践
Oct 22 Javascript
详解Webpack4多页应用打包方案
Jul 16 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项目打包方法
2008/02/18 PHP
PHP循环结构实例讲解
2014/02/10 PHP
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
PHP中mysql_field_type()函数用法
2014/11/24 PHP
详解PHP+AJAX无刷新分页实现方法
2015/11/03 PHP
PHP的mysqli_rollback()函数讲解
2019/01/23 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
layui插件表单验证提交触发提交的例子
2019/09/09 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
2019/10/28 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
介绍Python中内置的itertools模块
2015/04/29 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
Python/Django后端使用PIL Image生成头像缩略图
2019/04/30 Python
python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案
2020/02/18 Python
python自动化办公操作PPT的实现
2021/02/05 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
Paper Cape官网:美国婴儿和儿童服装品牌
2019/11/02 全球购物
园艺师求职信
2014/03/10 职场文书
项目采购员岗位职责
2014/04/15 职场文书
物业保安岗位职责
2014/07/02 职场文书
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
三潭印月的导游词
2015/02/12 职场文书
大队委员竞选稿
2015/11/20 职场文书
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL