vue 优化CDN加速的方法示例

更新时间：2018年09月19日 15:57:09 作者：乖摸摸头

这篇文章主要介绍了vue 优化CDN加速的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

代码敲完，项目上线，然后就要与优化相遇。

vue优化加速

项目有抢购的性质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优化加速

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优化加速

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优化加速

优化之后

vue优化加速

另外就是花点钱提高了下带宽o(╯□╰)o

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

详解Vue的sync修饰符
.sync修饰符算是Vue的所有修饰符中较难理解的一个，本篇文章就带你走近.sync的世界，深入理解后会发现，其实也就那么回事。修饰符和指令息息相关，下面从指令 ->修饰符->.sync修饰符由浅入深地来讲解 .sync的含义及用法。
2021-05-05
vue3组件式弹窗打开的3种方式小结
这篇文章主要给大家介绍了关于vue3组件式弹窗打开的3种方式,弹窗组件是常见的交互组件,它能够弹出一些提示信息、提醒用户进行操作等等,需要的朋友可以参考下
2023-07-07
用vue设计一个日历表
这篇文章主要介绍了如何用vue设计一个日历表，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下
2020-12-12
vue动态代理无须重启项目解决方案详解
这篇文章主要为大家介绍了vue动态代理无须重启项目解决方案详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
vue移动端设置全屏背景的项目实践
本vue移动端项目设置全屏背景,关键是要找对文件,然后添加background属性即可,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
2023-08-08
vue .js绑定checkbox并获取、改变选中状态的实例
今天小编就为大家分享一篇vue .js绑定checkbox并获取、改变选中状态的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
vue2源码解析之全局API实例详解
全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,下面这篇文章主要给大家介绍了关于vue2源码解析之全局API的相关资料,需要的朋友可以参考下
2022-11-11
分享Vue组件传值的几种常用方式(一)
这篇文章主要给大家分享的是Vue组件传值的几种常用方式，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下
2022-09-09
在vue项目中引入highcharts图表的方法
今天小编就为大家分享一篇关于在vue项目中引入highcharts图表的方法，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-01-01
nuxt.js框架使用小结
本文主要介绍了nuxt.js框架使用小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-08-08