❶ 使用 unplugin-vue-components 按需引入组件（内附实现原理）
使用 unplugin-vue-components 按需引入组件，能够实现减小项目体积、提升性能的效果。相比于全局引入组件库的便利性，按需引入组件库在一定程度上减少了体积大小，但存在引入组件和样式的繁琐操作。为解决这一问题，babel-plugin-import 通过插件形式，简化了引入过程，使得 style 的引入变得更为便捷。然而，仍需手动引入组件，并依赖于 babel。
unplugin-vue-components 则提供了一种更简便的按需引入组件的方式，无需手动引入组件，使得开发者能够像全局引入组件那样进行开发。它通过内置支持主流 UI 组件库和解析器（resolvers），自动引入对应的组件及样式，极大地提高了开发效率。解析器可以是函数或对象，当遇到特定组件时，解析器会自动处理并引入组件及样式。
以 Antd Vue 和 Vite 为例，unplugin-vue-components 能够自动引入 Antd Vue 组件，无需手动导入组件与样式，使用体验与全局组件类似。实现这一功能的关键在于 Vue 编译过程中的代码修改。unplugin-vue-components 通过正则匹配 Vue 的全局组件，调用解析器进行组件引入，并替换原有的全局组件引用，实现了按需引入的效果。
实现原理上，unplugin-vue-components 并未对 Vue 文件的结构进行复杂的修改，而是在 Vue 编译后的代码上进行操作，通过正则匹配和函数调用实现了按需引入组件。这种方法仅适用于基于模板编译的代码，对于使用 JSX 的自动引入，unplugin-auto-import 能够与之协同工作。
unplugin-vue-components 还支持自动引入项目 components 目录下的组件，并允许用户自定义指定的自动按需引入规则。使用时只需安装该插件并配置相关选项即可。
总结起来，unplugin-vue-components 提供了一种高效、简便的组件引入方式，适用于 Vue 项目的开发。它不仅能够减小项目体积，提升加载速度，还能优化用户体验。对于开发者而言，使用该工具可以显着提升开发效率，并通过自定义配置实现更灵活的组件管理策略。
❷ 详解Webpack如何引入CDN链接来优化编译后的体积
背景
在 Vue 项目中，引入到工程中的所有 js 文件，编译时都会被打包进 vendor.js，也就导致了 vendor.js 文件体积变得相当臃肿，一定程度上影响着页面的渲染。为了减少编译后的体积，提高页面渲染速度，我们可以通过引入 CDN 链接把库分离，多线程异步 js 库，从而达到加速渲染的目的。那么我们如何做呢？
步骤
1.引入CDN链接
在项目的 index.html 中，常规方式引入 CDN 链接，此处以 vue 和 element-ui 为例：
<body>
<div id="app"></div>
<!-- CDN方式引入vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- CDN方式引入element-ui -->
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>
</body>
2.添加externals属性
Vue-cli 2
在项目的 build/webpack.base.conf.js 中，在下面合适位置添加 externals 相关语句，在 entry 后面加入即可：
mole.exports = {
context: path.resolve(__dirname, '../'),
entry: {
function: './src/main.js'
},
externals:{
'vue': 'Vue',
'element-ui': 'ElementUI'
}
...
}
Vue-cli 3
在项目根目录的 vue.config.js 中，将 configureWebpack 配置代码块添加进入即可：
mole.exports = {
configureWebpack:{
externals: {
'vue': 'Vue',
'element-ui': 'ElementUI'
}
}
}
注意：在上述代码中，'vue': 'Vue' 对应形式为 key : value，其中 key 为项目中引用的名称，而 value 是资源本身定义的名称（不可改），正常情况下我们可以参照 src/main.js 进行查看：
import Vue from 'vue'
import ElementUI from 'element-ui'
//打开src/main.js查阅以上两行代码，其前面作为value，后面作为key。
3.注释import及Vue.use(xxx)
在项目的 src/main.js 中，注释掉以下语句：
// import Vue from 'vue'
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
Vue.config.proctionTip = false
// Vue.use(ElementUI)
注：使用 eslint 规则的项目请不要注释 import 及 Vue.use，除非你不使用那烦人的 eslint。
完成以上步骤后就可以开始执行 npm run build，你会发现编译后的 vendor.js 从几百K降到几十K，也就意味着优化体积已经成效。另外，有好多网友先前为了减少体积就已经配置了 按需引入，如果引入 CDN 之后，记得把按需引入的配置去掉哦，因为引入 CDN 之后就不存在按需引入这种说法啦！