‘壹’ vue3+element-plus配置cdn
最近在做一个项目，项目配置版本如下：
下面分享一下，如上配置的 vue3 项目，如何配置 cdn 加速
介绍下常见的免费 cdn 网站
BootCDN 和 Staticfile CDN 简单明了的搜索方式就不说了，这里讲一下 UNPKG 搜索 cdn 资源的方式。
cdn 文件路径格式： https://unpkg.com/:package@:version/:file
路径解析如下图：
直接使用资源名后面加 / ，可以查看文件夹目录，比如： https://unpkg.com/browse/[email protected]/ ，复制进浏览器地址栏，可看见如下目录：
按如下配置，操作方式基本一样，文件的 cdn 版本自行替换。
vue.config.js
index.html
在 head 标签里加上如下：
在 body 标签里加上如下：
main.ts
确实配了 cdn 后打包文件小了很多，不过如果 cdn 挂了，你的项目也就挂了。
如果看了觉得有帮助的，我是@ 鹏多多11997110103 ，欢迎 点赞 关注 评论；
END
往期文章
个人主页
‘贰’ Vue CDN引入依赖包
本文将以ant-design-vue为实验对象，因为CDN引入ant-design-vue前提需要CDN引入Vue，所以项目保持CDN引入Vue
build后文件
查看资源加载及性能
build后文件，对比npm, chunk-vendors.js小了这么多
查看js资源加载和性能
CDN的buildjs包小了，但需要加载引入的js
单从加载时间上来看，还是有一定的优势
CDN引入ant-design-vue后，不能通过/deep/需改样式
需要使用外部.less样式覆盖
‘叁’ VuePress-Vue驱动的静态网站生成器入门教程
VuePress 由两部分组成：第一部分是一个极简静态网站生成器 (opens new window)，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。
每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。
事实上，一个 VuePress 网站是一个由 Vue、Vue Router和 webpack驱动的单页应用。如果你以前使用过 Vue 的话，当你在开发一个自定义主题的时候，你会感受到非常熟悉的开发体验，你甚至可以使用 Vue DevTools 去调试你的自定义主题。
在构建时，我们会为应用创建一个服务端渲染（SSR）的版本，然后通过虚拟访问每一条路径来渲染对应的HTML。这种做法的灵感来源于 Nuxt (opens new window)的 nuxt generate 命令，以及其他的一些项目，比如 Gatsby
1、创建并进入一个新目录
2、使用你喜欢的包管理器进行初始化
3、将 VuePress 安装为本地依赖
我们已经不再推荐全局安装 VuePress
4、创建你的第一篇文档
5、在 package.json 中添加一些 scripts
这一步骤是可选的，但我们推荐你完成它。在下文中，我们会默认这些 scripts 已经被添加。
6、在本地启动服务器
VuePress 会在 http://localhost:8080 (opens new window)启动一个热重载的开发服务器。
现在，你应该已经有了一个简单可用的 VuePress 文档。接下来，了解一下推荐的 目录结构 和 VuePress 中的 基本配置。
VuePress 遵循 “约定优于配置” 的原则，推荐的目录结构如下：
如果没有任何配置，这个网站将会是非常局限的，用户也无法在你的网站上自由导航。为了更好地自定义你的网站，让我们首先在你的文档目录下创建一个 .vuepress 目录，所有 VuePress 相关的文件都将会被放在这里。你的项目结构可能是这样：
一个 VuePress 网站必要的配置文件是 .vuepress/config.js，它应该导出一个 JavaScript 对象：
对于上述的配置，如果你运行起 dev server，你应该能看到一个页面，它包含一个页头，里面包含一个标题和一个搜索框。VuePress 内置了基于 headers 的搜索 —— 它会自动为所有页面的标题、h2 和 h3 构建起一个简单的搜索索引。
你也可以使用 YAML (.vuepress/config.yml) 或是 TOML (.vuepress/config.toml) 格式的配置文件。
一个 VuePress 主题应该负责整个网站的布局和交互细节。在 VuePress 中，目前自带了一个默认的主题（正是你现在所看到的），它是为技术文档而设计的。同时，默认主题提供了一些选项，让你可以去自定义导航栏（navbar）、 侧边栏（sidebar）和 首页（homepage） 等，
由于 VuePress 是一个标准的 Vue 应用，你可以通过创建一个 .vuepress/enhanceApp.js 文件来做一些应用级别的配置，当该文件存在的时候，会被导入到应用内部。enhanceApp.js 应该 export default 一个钩子函数，并接受一个包含了一些应用级别属性的对象作为参数。你可以使用这个钩子来安装一些附加的 Vue 插件、注册全局组件，或者增加额外的路由钩子等：
觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧
‘肆’ Vue如何在组件内部使用CDN
引入jQuery
通过npm安装依赖引入
1、安装
```
npm install jquery -S
```1234
2、修改webpack配置文件
build/webpack.base.conf.js
...var webpack = require("webpack") // 1. 确保引入 webpack，后面会用到
mole.exports = { ...
resolve: {
extensions: ['.js', '.vue', '.json'],
moles: [
resolve('src'),
resolve('node_moles')
],
alias: { 'vue$': 'vue/dist/vue.common.js', 'src': resolve('src'), 'assets': resolve('src/assets'), 'components': resolve('src/components'),
// 2. 定义别名和插件位置 'jquery': 'jquery'
}
},
plugins: [
// 3. 配置全局使用 jquery
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery", "window.jQuery": "jquery"
})
]
}
手动载入
手动下载jquery 放在static 目录下，如：static/js/jquery.min.js
和npm不同的只是在第二步定义别名和插件位置：
alias: { 'vue$': 'vue/dist/vue.common.js', 'src': resolve('src'), 'assets': resolve('src/assets'), 'components': resolve('src/components'), // 2. 定义别名和插件位置
"jquery": path.resolve(__dirname, '../static/js/jquery.min.js')
}12345678
引入jquery第三方插件
可以通过npm安装的插件
这种引入第三方插件的方法和上一节种引入echarts的方法是一样的
手动引入
‘伍’ Vue项目优化-通过externals加载外部CDN资源
继续记录学习过程。
在查看打包报告时，通过VueCli的可视化UI面板运行build查看报告，发现还是有文件体积较大，这样的大文件可能会造成长时间请求，等待时间过长。
b.删除相应的improt,我这里只删除 main-prod.js 中的类似的内容
c.在public目录下的index.html文件头部，添加CDN资源引用:
当然还有这些
做完这些，重新build,发现大文件小了很多，效果立竿见影，但是发现依赖项中elemnt-ui也是一个大文件，虽然我们在开发的过程中，Element-ui的内容是按需引入，尽可能减少了打包的体积，但是那些被需要的组件，任然占据了很大的体积，此时，我们也需要通过CDN的形式来加载，这样能够进一步减小打包后的体积。过程还是原来的配方，再走一遍流程：a.在 main-prod.js中，注释掉element-ui按需加载的内容；
b.在index.html的头部区域中，通过CDN加载element-ui的js和css样式
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" /> <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
重新执行build,查看结果：
‘陆’ webpack使用HtmlWebpackPlugin进行cdn配置
在前面的 文章 中我们介绍了cdn的实现原理，现在我们来实现如何在正式开发中使用cdn功能。要使用cdn功能，就需要cdn服务商，我们可以自己搭建，也可以使用一些比较知名的服务商，庆幸的是市面上有不少的免费cdn服务商，如：
其中BootCDN 是 Bootstrap 中文网 支持并维护的前端开源项目免费 CDN 服务，项目资源同步于 cdnjs 仓库。界面相对比较好看，且支持搜索功能，可以在线测试cdn是否正常，所以下面以 Bootcdn 为例说明。
在前段项目开发中，我们经常使用webpack进行项目搭建， 主要作用有两个，分别是
在webpack中使用cdn是在打包生成静态资源的时候做处理，主要原理是使用 html-webpack-plugin 动态插入cdn链接。
关于webpack的使用这里不做过多的介绍，将以vue--cli 2.x生成的默认项目为例做介绍
html-webpack-plugin 是webpack的一个插件，可以动态的创建和编辑html内容，在html中使用 esj语法 可以读取到配置中的参数，简化了html文件的构建。
我们这次主要是使用它来动态插入cdn链接，如link标签和script标签。
在线项目地址
vue-cli 2.x
创建名为 webpack-cdn-demo ，类型为webpack的 vue 项目，如果安装的vue-cli是3.x版本，命令不太一样，详细可看 vue-cli 3 。
安装依赖
启动项目
下面简单介绍一下目录结构
其中build文件夹中的 webpack.prod.conf.js 是我们主要注意的文件,我们在该文件中动态设置不需要被打包的模块并构建出合适的链接。
在webpack项目中，所引入的第三方资源会被统一打包进vender文件中，我们通过webpack的 externals 属性可以设置打包时排除该模块，详情说明见 外部扩展(externals) 。
在前面的步骤中，我们创建的项目包括vue、vue-router，在正式开发在还会有ui库，如element-ui，为了方便演示，我们再安装element-ui和axios两个模块，并实现在构建是把这是个模块以cdn的形式引入。
注意安装时记得 -S ，它的作用是安装完后在 package.json 项目文件中插入记录，后续操作需要读取已安装模块
对于cdn，我们可以自己搭建，也可以使用专业的cdn服务商，这里使用免费的cdn bootcdn 。选用免费cdn有很多好处，但毕竟有隐患，那就是服务有可能会奔溃。
依次搜索出前面模块，结果如下
按照规律，得出cdn资源路径规则为
其他cdn服务商同理
使用cdn其实也就是在webpack热启动和打包项目的时候动态插入script和style链接 ，为了方便维护，我们通过在 build/utils.js 文件上添加几个方法，将来在 webpack.dev.conf.js 和 webpack.prod.conf.js 上可以使用。
如果没有build/utils.js，可以在其他文件上添加，只要在后续步骤中能操作到就行
name 模块名称，与package.json同名
scope 模块作用域命名
js js地址
css css地址
这里特别注意scope，它是webpack配置的external参数下的信息，比如vue的作用域命名是Vue，vue-router的作用域命名是VueRouter，element-ui的作用域命名是ELEMENT，同理，jq的作用域命名是JQuery， 具体做法是先引入该资源，然后在控制台依次输入近似的值，一个个匹配 (目前没找到更好的做法)。
在webpack热启动本地调试的时候，我们可以使用cdn。
在 build/webpack.dev.conf.js 中，默认已经引入了 utils.js ，所以可以直接调用相关方法，如果是自定义的文件，记得引入。
我们可以往里面添加点自定义属性，方便在index.html中调用。 ，修改如下：
其中 cdnConfig 和 onlyCss 自定义属性，在html上通过 htmlWebpackPlugin.options 可以读取到。
更多html-webpack-plugin配置情况官网，这里暂时不需要更多。
在打包的时候，我们使用cdn，配置和前面dev的差不多，只不过需要做多一步。
注意此处的 externalMoles ，后面用到，也就是比dev多的步骤。
加入和dev一样的两个配置，不过需要把onlyCss改为 true ，因为我们希望打包时不单单使用css。
webpack配置已经完成，在html-webpack-plugin中已经添加了相关参数，我们再在页面上可以直接使用，使用语法是 ejs ，和asp.net，jsp，php类似。
通过 <% %> 和 htmlWebpackPlugin.options 用js遍历 插入 link标签和script标签。
ps: 修改了webpack配置，需要重启项目才会生效
打包项目
可以看到打包体积大大减小了
页面上也正确引入了cdn资源。
最后奉上git地址： https://gitee.com/zhkumsg/webpack-cdn-demo
比悲伤更悲伤的分割线
原来两年前已经有人做了一个类型的webpack-cdn-plugin
‘柒’ vu静态资源打包放到cdn
1、vue.config.js中
mole.exports = {
// 基本路径
publicPath: cdn地址,
// 输出文件目录
outputDir: "dist",
}
2、router/index.js中
const router = new VueRouter({
// base: process.env.BASE_URL,//去除base防止window.open()打开的页面中被拼接base导致404
routes: constantRoutes,
});