vue项目部署优化之cdn

前戏

vue项目中，有个非常大的文件vendor.js，为什么这么大？

引入到工程中的所有js、css文件，编译时都会被打包进vendor.js。浏览器必须加载完vendor.js，才能开始显示首屏，会导致首屏加载速度奇慢。

解决方法是，将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首开的目的。

正文

1.免费CDN推荐

免费cdn

个人观点：考虑到cdn库的资源丰富性，网速，已经是否能黄，最终选择了 -----今日头条的cdn库

2.资源引入

/public/index.html    项目的入口样式文件

引入样式文件

3.添加配置

/vue.config.js

导入配置，注册全局使用名

注意一点：

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

4.去掉原有import引用

src/main.js

   js文件

删除import引用的js文件

css文件

删除import引用的css文件

5.删除vue注册

去掉Vue.use(XXX)，如

// Vue.use(Router)

删除vue的注册代码

6.去掉npm依赖

package.json

这一步非常重要，否则打包install时 还是会 下载相关依赖包，依旧影响速度。

删除npm依赖

7.测试

重新npm run build，会看到 vendor.js体积有所下降了。

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

尾声

逐步优化中，未完待续！