为什么使用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地址
- 确认需要使用CDN加载的资源，在package-lock.json文件中，找到对应的版本号。
- 在BootCDN网站找到对应的资源路径。找不到echarts-gl的CDN资源路径
如何引入CDN
- 在
package.json中删除即将通过 CDN 引入的组件，主要在 dependencies 和 devDependencies 中，删除 node_modules 后重新安装 - 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' ] } config.plugin('html').tap(args => { 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时候仍会将引用的资源一起打包，生成文件会大不少。所以我认为还是删了好
import Vant from 'vant'; Vue.use(Vant); 完成引用后打包报错
- 完成引用后，打包报错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，打开后可看到各文件占用大小
原文链接：https://blog.csdn.net/weixin_43848576/article/details/122662559?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165934461816782184659864%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165934461816782184659864&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-27-122662559-null-null.nonecase&utm_term=%E6%90%AD%E5%BB%BAcdn
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/5708
