问题：在首开体验中，会觉得特别慢
分析：原因很多，其中一个原因是首开时需要加载很多的js和css文件，这是因为在Vue项目中，引入到工程中的所有js、css文件，我们编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。
解决方法：将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来(既外部的库文件，可以使用cdn资源，或者别的服务器资源等)，达到加速首开的目的。
下面，以引入vue、vuex、vue-router为例，说明处理流程
在index.html中，添加CDN资源
<body> <div id="app"></div> <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.1.5/vue.global.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.10/vue-router.global.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vuex/4.0.2/vuex.global.min.js"></script> </body> vue3配置
我们使用的是vue3
在vue.config.js定义chainWebpack.externals
module.exports = { chainWebpack: config => { config.externals({ 'vue': 'Vue', 'vue-router': 'VueRouter', 'vuex':'Vuex' }) }, } vue2配置
如果我们使用的是vue2的话
在bulid/webpack.base.conf.js文件中，增加externals，将引用的外部模块导入，如下
module.exports = { entry: { app: './src/main.js' }, externals:{ 'vue': 'Vue', 'vue-router': 'VueRouter', 'vuex':'Vuex' } 去掉import，如：
去掉Vue.use(XXX)，如：
关于vue3.0以上的cdn分类就很细了
Vue的各种版本介绍：
- cjs（两个版本都是完整版，包含编译器）
vue.cjs.js
vue.cjs.prod.js（开发版，代码进行了压缩）
- global（这四个版本都可以在浏览器中直接通过scripts标签导入，导入之后会增加一个全局的Vue对象）
vue.global.js（完整版，包含编译器和运行时）
vue.global.prod.js（完整版，包含编译器和运行时，这是开发版本，代码进行了压缩）
vue.runtime.global.js
vue.runtime.global.prod.js
- browser（四个版本都包含esm，浏览器的原生模块化方式，可以直接通过
vue.esm-browser.js
vue.esm-browser.prod.js
vue.runtime.esm-browser.js
vue.runtime.esm-browser.prod.js- bundler（这两个版本没有打包所有的代码，只会打包使用的代码，需要配合打包工具来使用，会让Vue体积更小）
vue.esm-bundler.js
bue.runtime.esm-bundler.js拓展2:element-ui 不生效
当我们使用cdn引入element的时候，发现不生效
原因1: 原使用.babelrc按需引入
只需要去除按需引入即可{ "presets": [ [ "@babel/preset-env", { "modules": false } ] ] }原因2:将vue也用CDN引入的方式，因为element-ui依赖vue，因此vue只能通过import引入
相关文章:
原文链接：https://blog.csdn.net/weixin_43236062/article/details/121671152?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165918321816782388050817%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165918321816782388050817&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-27-121671152-null-null.nonecase&utm_term=cdn
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/344
