着网络的影响在我们第一输入url请求资源时候网络阻塞加载时间长用户体验不好

仔细观察后就会发现代码压缩之后并没有多大大的都是项目自身静态资源第三方包

除去代码层面我们可以通过静态图片网络请求gzip压缩CDN第三方包引入方式浏览器缓存

并且会在package.json文件中分类好那些包在本地用那些包需要生产用会在打包时打进去

虽然这些包可能并没有那么大但在小也是占用内存资源在第一次加载时候需要加载的受网络影响

cdn就是这些第三方包对应好压缩文件存在服务器我们只需要通过网络请求就行了访问服务器资源

使用cdn之后我们就可以配置在打包时候不把这些包依赖打到资源里这样减少打包大小在服务器压缩传输更快同步访问cdn资源包以gzip或者br形式传输更快减轻服务器压力

但我们使用gzipcdn之后一般首屏加载时间就会减少80%左右不受网络影响前提下

在哪里获取cdn-第三方包地址

一些成熟框架就会自己提供cdn地址比如vue-element-ui。

Bootstrap

1.在开始之前我们先看一下有波动情况下element.js包要加载多长时间-3.37秒

2.我们怎么判断哪些包需要cdn方式引入

首先element-ui-和vue及相关的全家桶肯定是要通过cdn方式引入的

2.1我们在package.json文件/scripts里面配置一条命令

build:report:

2.2使用命令打包-在打包文件会有一个report.html文件-直接在浏览器打开就可以看见生产资源包占比大小

运行打包命令

配置生产环境标识需要cdn引入包配置拒绝把这些cdn引入的包打进资源

可以直接复制我的改你项目里的版本就可以了也可以直接使用我的测过没问题

注意cdn变量里左边值是package.json里面包名右边值是使用该包时候的名字

//生产环境标识

[https://unpkg.com/element-ui2.12.0/lib/theme-chalk/index.css],js:

[https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js,https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.9/vue-router.min.js,https://cdn.bootcdn.net/ajax/libs/vuex/3.6.2/vuex.min.js,https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js,https://unpkg.com/element-ui2.12.0/lib/index.js,https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.min.js,]

配置打包时使用cdn节点忽略第三方组件包

右边值在router.js中使用时是router直接写这个名字会报undefined//

应该写

右边值在main.js中使用名字是Element直接写会报错//

应该写ELEMENT-这个值是一个全局变量-跟main.js中引用名字并没有关系element-ui:

ELEMENT

args})//视为一个外部库而不将它打包进来config.externals(externals)}}

4.来到public静态文件的-index.html-引入这些资源-可以直接复制

css资源

inhtmlWebpackPlugin.options.cdnhtmlWebpackPlugin.options.cdn.css)

%linkhref%

htmlWebpackPlugin.options.cdn.css[i]

href%

htmlWebpackPlugin.options.cdn.css[i]

relstylesheet

inhtmlWebpackPlugin.options.cdnhtmlWebpackPlugin.options.cdn.js)

%script

htmlWebpackPlugin.options.cdn.js[i]

%/script%

5.1当我们配置失败会出现加载不出来控制台会报错-如果出现下面报错你应该高兴这些报错都是可以解决的就差一步

5.2如果配置成功-我们会发现没有报错首屏会很快加载出来f12检查时在vue.config.js配置地址会看到。

在js-css资源查看时都是很快地

5.3使用cdn包加载之后-js静态资源加载时间-压缩传输方式对比

们遇到的情况肯定是不一样的所以我们要理解它的原理万变不离其宗。

加油打工人