@toc

背景

使用vue cli创建的项目，使用过程发现首页加速速度极慢，大约在18s左右。通过调试发送时间主要消耗在下载文件上，服务器的带宽本来就小，而下载一个vendors.js差不多2M多，占用了主要的时间。于是，使用了CDN加速方式，将依赖的组件从vendors.js中拆分出来，加快vendors.js文件的下载速度，同时通过CDN加载依赖资源也减少对服务器带宽的占用。优化后，首页加载速度在5s左右，但这个过程却遇到了依赖组件使用上的一些问题。

Element-UI
Vant

问题点

Element-UI

1、样式如何调整？

Element-UI默认的样式字体比较大，在使用Element-UI时，就选择了small样式，使用方式如下

Vue.use(Element, { size: 'small', zIndex: 3000 })

在选择使用CDN方案时，此行代码不需要再执行，就不清楚如何配置使用small样式了。后查阅资源发现可以通过以下方式解决此问题

Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };

2、popconfirm事件不响应

未使用CDN加速时，代码运行是正常的，点击事件可以正常响应；使用CDN加速后点击事件不再响应，且控制台没有错误信息输出。经源码分析发现事件不一致引起，CDN引入的源码中事件为confirm，而npm引入的源码事件为onConfirm，事件不一致。所以解决方法就很简单了，将onConfirm事件换成confirm即可。

npm引入popconfirm事件处理@onConfirm

<el-popconfirm v-if="scope.row.status=='1'" title="确定要修改吗？" @confirm="onConfirm(scope.row)">
    <el-button slot="reference" type="text">确定</el-button>
</el-popconfirm>

CDN引入popconfirm事件处理@confirm

<el-popconfirm v-if="scope.row.status=='1'" title="确定要修改吗？" @onConfirm="onConfirm(scope.row)">
    <el-button slot="reference" type="text">确定</el-button>
</el-popconfirm>

Vant

1、界面不能正常渲染

引入Vant最新版本后，发现UI不能正常渲染，感觉Vant.js并没有正常运行。后查阅官网发现Vant有两个版本，针对Vue2.0和Vue3.0的，而我引入的3.15版本是针对是Vue3.0，而项目中使用的还是Vue2.0，所以需要选择2.0版本的Vant。在切换到2.0版本的Vant后，页面正常渲染。

image.png

2、图片不能正常展示

图片加载使用的是van-image控件，并使用了lazy-load，而lazy-load在使用CDN时给注释掉了，所以不能正常加载。LazyLoad中从vant导出的，使用CDN时，需要使用vant.Lazyload的方法注入到vue

// Vue.use(Vant)
// Vue.use(Lazyload)
Vue.use(vant.Lazyload, { lazyComponent: true })

3、图片预览功能失效

预览功能在未使用CDN加速时，使用的是import {ImagePreview} from 'vant'方式导入的，直接调用ImagePreview方法进行图片预览。使用CDN加速后，不能再使用import进行导入，而使用直接使用vant.ImagePreview()的方式来调用此方法。

vant.ImagePreview({
    images: this.headImages,
    startPosition: index,
})

总结

总结起来CDN加速问题主要出现在插件添加以及使用时的导入上。

插件添加

使用CDN加速后，出现问题的组件均为依赖Vue才能运行的Vue插件。Vue添加插件有两种方式，一种是手动添加，另一种是自动添加，这两种添加的方式主要根据插件引入的方式选择使用。

1. 手动添加插件

手动添加插件，即手动调用Vue.use(xxxx)的形式来添加插件，如

Vue.use(Vant)
Vue.use(Lazyload)
Vue.use(Element, { size: 'small', zIndex: 3000 })

2. 自动添加插件

自动添加主要应用到使用<script>标签添加插件场景。插件在执行过程检测到有全局的Vue对象时就进行自动添加。所以，==如果项目使用script方式引入插件时，不用再调用Vue.use()进行插件的添加==

// Vue全局变量时，自动install
if(typeof window!=='undefined' && window.Vue){
    window.Vue.use(Router)
}

//Element-UI自动添加
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

组件导入

1、以<script>标签引用组件，所有的exports对象全部添加到了环境中，无需要再次使用import进行导入？？

参考

1、Vue插件你有了解过吗？

Vue项目使用CDN加速之坑