Vue项目使用CDN优化首屏加载

时间: 2018-12-05阅读: 253标签: vue

前言

作为一个网站应用,加载速度是非常重要的。加载速度,一个是程序的合理安排,如以组件按需加载,一个是js、css等资源的异步加载。在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首开的体验。

解决方法是,将引用的外部js、css文件剥离开来,不编译到vendor.js中,而是用资源的形式引用,这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来,达到加速首开的目的。外部的库文件,可以使用CDN资源,或者别的服务器资源等。下面,以引入vue、vuex、vue-router为例,说明处理流程。


一、资源引入

在index.html中,添加CDN资源,例如bootstrap上的资源:

<body>
    <div id="app"></div>

    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
  </body>


二、添加配置

在bulid/webpack.base.conf.js文件中,增加externals,将引用的外部模块导入,如下:

module.exports = {
  entry: {
    app: './src/main.js'
  },
  externals:{
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex':'Vuex'
  }

注意一点:格式为 'aaa' : 'bbb', 其中,aaa表示要引入的资源的名字,bbb表示该模块提供给外部引用的名字,由对应的库自定。例如,vue为Vue,vue-router为VueRouter.


三、去掉原有的引用

去掉import,如:

// import Vue from 'vue'
// import Router from 'vue-router'

去掉Vue.use(XXX),如:

// Vue.use(Router)


测试

重新npm run build,会看到 vendor.js体积有所下降了。我自已的个人主页中,将所有的外部模块,使用CDN引入之后,vendor.js从1M,降为30k左右。

通过开发者模式的Network工具,可以看到vue.js、vuex.js、vendor.js等文件会分别由一个线程进行加载。且因为使用了CDN,减轻了带宽压力。


关于Vue.use()使用详解

相信很多人在用Vue使用别人的组件时,会用到 Vue.use() 。例如:Vue.use(VueRouter)、Vue.use(MintUI)。但是用 axios时,就不需要用 Vue.use(axios),就能直接使用。那这是为什么呐?

Vue 3.0 对 Web 开发意味着什么?

Vue的创建者Evan You向我们展示了Vue 3.0 —— 这是不断上升的Javascript框架的最新版本。这些优化使Vue更高效,更模块化且更易于使用。我将讨论这些变化以及我认为的他们将在Vue 3.0发布后对现有开发产生的影响。

Vue 中的作用域插槽

什么时候使用作用域插槽呢?当子组件循环或某一部分的dom结构应该由外部传递进来的时候,我们要用作用域插槽,使用作用域插槽,子组件可以向父组件的作用域插槽里传递数据,父组件如果想接收这个数据,必须在外层使用template模版占位符,同时通过slot-scope对应的属性名字,来接收你传递过来的数据

vue中的js引入图片,必须require进来

需求:如何components里面的index.vue怎样能把assets里面的图片拿出来。 1.在img标签里面直接写上路径,2.利用数组保存再循环输出

vue-router响应路由参数的变化

当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用

Vue.js中 watch 的高级用法

上面的代码的效果是,当我们输入firstName后,wacth监听每次修改变化的新值,然后计算输出fullName。app.$watch调用后会返回一个值,就是unWatch方法,你要注销 watch 只要调用unWatch方法就可以了

vue2.0/3.0在main.js引入scss文件报错

在vue2.0的main.js中引入scss文件报错原因是:在build文件夹下的webpack.base.conf.js的rules里面添加配置,vue3.0写入.scss文件在mian.js中 import ‘./styles/index.scss‘后出现下图报错解决方法:在vue.config.js文件中添加以下代码

在vue项目中使用canvas-nest.js,报parameter 1 is not of type Element

canvas-nest.js是一款轻量的网页特效。在vue项目中,使用时配置,引入canvas-nest.js后,直接在created中 new CanvasNest(element, config)。遇到parameter 1 is not of type Element这样类型的报错,需要检查dom是否渲染完毕。

Vue项目打包常见问题整理

Vue 项目在开发时运行正常,打包发布后却出现各种报错,这里整理一下遇到的问题,以备忘。js 路径问题、img 路径问题、favicon.ico 问题、IE9+ 兼容性问题、禁止生成 .map 文件

Vue2中render:h => h(App)的理解

render函数是渲染一个视图,然后提供给el挂载,如果没有render那页面什么都不会出来,Vue 在调用 render 方法时,会传入一个 createElement 函数作为参数,也就是这里的 h 的实参是 createElement 函数

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯