为什么使用CDN
-
当引入的组件越来越多时,运用 webpack 打包后的 app.js 文件容易变得过大,对首屏加载很不友好。
-
使用CDN的第三方资源的JS代码,将不再打包到本地服务的JS包中。减小本地JS包体积,提高加载速度。-给网页加载提速
-
Vue项目打包的时候,默认会把所有代码合并生产新文件,其中包括各种库导致打包出来很大。如果使用cdn的话,会更利于程序的加载速度。
-
在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首开的体验。
-
将引用的外部js、css文件剥离开来,不编译到vendor.js中,而是用资源的形式引用,这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来,达到加速首开的目的
解决问题
- 打包时间太长、打包后代码体积太大,请求慢
- 服务器网络不稳带宽不高,使用cdn可以回避服务器带宽问题
缺点
- 请求变多,第一次没做缓存的时候,有的包会下载特别慢
- 万一CDN资源路径有变动或者崩溃,项目没缓存的就崩溃了,建议自行搭建CDN库。
标题哪些需要使用CDN
- 在项目根目录下运行
npm run build --report
- 打包完成后,会打开一个页面,展示各个依赖包的大小,查看哪些第三方依赖包的体积大,就干掉它,从CDN上获取。
获取CDN地址
https://www.jsdelivr.com/
https://www.bootcdn.cn/
- 确认需要使用CDN加载的资源,在package-lock.json文件中,找到对应的版本号。
- 在BootCDN网站找到对应的资源路径。找不到echarts-gl的CDN资源路径
如何引入CDN
- 在
package.json
中删除即将通过 CDN 引入的组件,主要在 dependencies 和 devDependencies 中,删除 node_modules 后重新安装 - vue.config.js配置
// vue.config.js
module.exports = {
configureWebpack: {
externals: {
'vue': 'Vue',
'axios': 'axios',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'moment': 'moment',
'@antv/g2': 'G2',
'@antv/data-set': 'DataSet',
'ant-design-vue': 'antd',
'AMap': 'AMap',
"element-ui": "ELEMENT", //有人说需要配置大写
}
},
chainWebpack: config => {
const cdn = {
css: [
'//wise-job.oss-cn-zhangjiakou.aliyuncs.com/webjs/libs/vant/index.css',
'//wise-job.oss-cn-zhangjiakou.aliyuncs.com/webjs/libs/element-ui/element-ui-index.css'
],
js: [
'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js',
'https://cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js',
'https://cdn.jsdelivr.net/npm/vue-router@3.1.2/dist/vue-router.min.js',
'https://cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js',
'https://cdn.jsdelivr.net/npm/moment@2.24.0/moment.min.js',
'https://cdn.jsdelivr.net/npm/moment@2.24.0/locale/zh-cn.js',
'https://cdn.jsdelivr.net/npm/@antv/g2@3.5.7/dist/g2.min.js',
'https://cdn.jsdelivr.net/npm/@antv/data-set@0.10.2/dist/data-set.min.js',
'https://cdn.jsdelivr.net/npm/ant-design-vue@1.3.16/dist/antd-with-locales.min.js'
]
}
// 如果使用多页面打包,使用 vue inspect --plugins 查看 html 是否在结果数组中
config.plugin('html').tap(args => {
// html中添加cdn
args[0].cdn = cdn
return args
})
}
}
externals 配置选项的作用:
我们想引用一个库,但是又不想让webpack打包,并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用,那就可以通过配置externals。
踩坑配置注意点:element-ui要大写为ELEMENT
- public/index.html
在标签中添加以下代码使用:
<!-- 使用CDN的CSS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
<% } %>
<!-- 使用CDN的JS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
等价于直接引入标签
<html>
<head>
<link href="https://cdn.bootcss.com/element-ui/2.4.4/theme-chalk/index.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://cdn.bootcss.com/vue/2.5.16/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>
<script src="https://cdn.bootcss.com/three.js/100/three.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.1.0/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.4.4/index.js"></script>
<script src="https://cdn.bootcss.com/babel-polyfill/6.26.0/polyfill.min.js"></script>
</body>
</html>
- 注释掉main.js中的引入
- main.js 中可能有引入相关组件的 css 文件,当使用了 css 文件的 CDN 时,无需在 main.js 中继续引用。
如果不删除原先的import,项目还是会从node_modules中引入资源。
也就是说不删的话,npm run build时候仍会将引用的资源一起打包,生成文件会大不少。所以我认为还是删了好
// main.js
import Vant from 'vant';
// import 'vant/lib/index.css'; // 使用了该 css 文件的 CDN 时,无需在 main.js 中引用
Vue.use(Vant);
// import 'element-ui/lib/theme-chalk/index.css'
// import Element from 'element-ui'
// Vue.use(Element, { size: 'small' })
完成引用后打包报错
- 完成引用后,打包报错Vue未定义,但是启动运行正常。
- 因为其实定义了全局变量,但是eslint并不识别全局变量,所以需要在.eslintrc.js配置文件中添加
- 声明一下这些是全局变量,再次打包即可。
globals: {
'Vue': true,
'VueRouter': true,
'Vuex': true,
'THREE': true,
'echarts': true,
'axios': true,
'_babelPolyfill': true
}
使用预获取(有待考证)
- 只需在链接属性上增加 rel=“prefetch”,rel=“dns-prefetch”,或者 rel=“preload” 标记。
- preload: 代码会被优先加载,并且会占用http并发数,从而也导致页面加载时间变长,特别是首屏时间会变长
- prefetch: 的代码被安排在后面加载,这样才达到了优化效果。
<script rel="preload" src="https://cdn.bootcss.com/three.js/100/three.min.js"></script>
<script rel="prefetch" src="https://cdn.bootcss.com/echarts/4.1.0/echarts.min.js"></script>
- 以为被preload修饰的three会优先加载,而被prefetch修饰的echarts会延后加载。
- 本地也好,服务器也好,配置了完全没有变化,严格按照顺序加载的……
vue-cli 4使用report分析vendor.js
Vue Cli(@/vue/cli)自带的webpack包体积优化工具,它可以查看各个模块的size大小,方便优化。只需要在build后面加上 --report 参数即可。
1、 我们把命令配置到package.json里
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"report": "vue-cli-service build --report" //加入该行
},
2、执行npm run report 打包并生成report。
注意:网上很多说要先安装webpack-bundle-analyzer包,其实不需要安装。
3、运行 npm run report 后,会在 build 的同时,在dist目录会生成一个report.html,打开后可看到各文件占用大小