• 热门专题

如何使用Vue对CDN进行加速的教程详解

作者:whl  发布日期:2018-12-29 08:48:00
Tag标签:Vue教程详解  CDN如何加速  
  •   相信大家对于vue应该都不陌生了,vue的用处还是挺多的,下面小编就以如何使用vue来对CDN进行加速为例把具体的操作步骤和大家一起分享一下,感兴趣的朋友不妨跟着小编一起继续往下看。

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

    项目上线

      Vue优化加速

      项目有抢购的性质content download 时间非常的长加载慢的很,至此开始前端优化之旅

      项目根目录运行

      Npm install webpack-bundle-analyzer –save-dev

      在build/webpack.dev.conf.js中引入

    build/webpack.dev.conf.js

      运行后显示可以看到几个大的js 下面是已经优化过后的截图

      像vue ,vue-router,vuex,axios,mint-ui,crypto-js

    优化过后的截图

      1.使用CDN资源

      其作用是:当我们加载页面时,需要将我们所需要的一些依赖加载到当前会话中然后再开始执行,如果我们首屏,模块比较多是,需要等待的时间会比较长,而且。浏览器内存最多执行四十个进程,需要等到加载完前面的才能执行后面的代码,如果我们采用cdn的方式来引入一些第三方资源,就可以缓解我们服务器的压力,原理是将我们的压力分给其他服务器点。

      使用cdn在index.html中引入

    cdn在index.html中引入

      修改build/webpack.base.conf.js文件,externals外部扩展,通过这种方式引入依赖库,不需要webpack处理。

    引入依赖库

      网上查了资料有的引入有的还是会引入有的没有引入,拿mint-ui举例,查到的资料在main.js有下面的引入,但是注释掉之后还是可以正常使用mint-ui的组件,import VueRouter from ‘vue-router’ 也是可以注释掉使用的,感觉是因为window全局有了VueRouter,但是有个问题就是eslint会报警告,所以就没有注释掉。如果理解有误希望大家能指出我的错误

    mint-ui举例

      Main.js

    Main.js

      Router/index.js

    Router/index.js

      Store/index.js

    store/index.js

      CryptoJS用来加密,在使用的地方直接引入。Axios同理

      Import CryptoJS from ‘crypto-js’

      …..

      优化之前

    优化之前

      优化之后

    优化之后

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

      上面这些内容就是今天和大家分享的关于如何使用vue来对CDN进行加速操作的具体教程了,是不是很简单呢?vue的相关知识还有很多,小编这里就不一一进行讲解了,大家可以关注本站其他发文。

延伸阅读:

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规