前言：
当我们对项目进行打包时，打包后我们可能会发现打的包非常大，我们可以使用路由懒加载的方式，若包仍过大，我们可以采用CDN性能优化的方式，这里主要讲CDN性能优化。
CDN优化第三方包
vue打包时会默认将第三方包的所有css、js文件打包到vendor.js中，所以我们需要将部分大的文件剥离开，使用CDN资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来。
1.在index.html中引入CDN提供的js文件
快速查找CDN网址：https://www.bootcdn.cn/
因为这个项目中引用了骨架屏，所以我是在写骨架屏的html中引用的CDN，（相当于在index.html中引用）
2.全局注释掉相应的所有引用
3.在/build/webpack.base.js中添加配置externals对象
key：要引入的资源名称 value：模块提供给外部引用的名称
在externals对象中添加的表示不会在node_modules中再加载
（element-ui（key）表示 import ElementUi from “element-ui”
ElementUi（value））
再次打包会发现打的包会小很多，若不知道什么文件占据体积过大使用CDN资源，可以利用矩阵图查看
利用插件查看项目的打包情况及体积大小（矩阵图）
1.下载插件
npm intall webpack-bundle-analyzer --save-dev
2.在webpack.prod.js中配置
（开发环境可以不注释，但在生产环境中需注释掉）
3.在package.json中添加配置
4.开始构建
npm run analyz
（构建完成会自动在浏览器打开矩阵图）
网友评论