1.��ԴcdnԴ��
2.开源终端工具可查询 IP 信息 ...
3.如何使用webpack进行cdn配置呢？
4.七牛云 ╳ 掘金推出开源库前端加速 CDN 服务 Staticfile.org
��ԴcdnԴ��
mavon-editor是开源开源一款开源的优秀的页面富文本编辑器，在很多vue项目中都有使用。开源开源本文也是开源开源记录一次在使用mavon-editor的过程中，针对资源加载的开源开源问题再三思索（因为是内网项目）而得出的最终的解决方案，同时也是开源开源为有同样困扰的小伙伴提供更多的选择。
首先，开源开源线下赛 web 源码这个问题出现在v2.4.2及以后的开源开源版本中，因为要优化插件的开源开源打包体积大小，因此，开源开源插件中默认不包含以下的开源开源几个依赖文件：
highlight.js（代码高亮）
github-markdown-css（流行的markdown样式）
katex(V2.4.7)（markdown语法拓展）
当我们的项目中使用mavon-editor的时候，这三个资源默认是开源开源从CDN引进来的，这就导致很多内网项目中，开源开源产生了诡异的开源开源问题，比如代码不能高亮了，开源开源选择好的开源开源样式不能生效了等等。
针对此问题，官方也给出了相应的解决方案，点击查看
基本就是手动添加一些externalLink，感兴趣的伙伴自己看一下就好，我就不多赘述了。
经过我的测试呢，发现了几个问题
第一个问题是：官方提供的解决办法不能引入highlightjs/styles/github.min.css，所以导致markdown中的代码片段不能添加高亮的样式。
代码不高亮，彩虹5源码看起来很难受，因此，我们可以直接使用css的@importurl()方法来引入缺失的css文件。
第二个问题是：官方说我们需要安装copy-webpack-plugin这个插件并且在webpack的配置文件中添加一些配置，如下：
module.exports={ plugins:[newCopyWebpackPlugin([{ from:'node_modules/mavon-editor/dist/highlightjs',to:path.resolve(__dirname,'../dist/highlightjs'),//插件将会把文件导出于/dist/highlightjs之下},{ from:'node_modules/mavon-editor/dist/markdown',to:path.resolve(__dirname,'../dist/markdown'),//插件将会把文件导出于/dist/markdown之下},{ from:'node_modules/mavon-editor/dist/katex',//插件将会把文件导出to:path.resolve(__dirname,'../dist/katex')}]),],}目的是把三个依赖文件抽离出来，放到vue项目打包后生成的dist目录下。
这就很麻烦了，因为大部分项目是vue-cli生成的，添加webpack配置我觉得很繁琐，另外每次打包要重新抽离依赖文件也让我难以接受。
有没有什么办法可以抄个近路呢？当然有了～
因为vue-cli中打包的时候，/public下的内容会直接放到打包后的/dist目录下，因此，我们直接从浏览器的source下把代码复制到项目的/public就可以，然后使用的时候直接使用绝对地址，这不就一劳永逸了吗
我们来验证一下这个思路的可行性。
其中我的public下的目录结构是这样的：
public├──index.html├──cdn-lib├──highlight├──highlight.min.js├──styles├──github.min.css├──markdownCss├──github.markdown.css├──github.markdown.min.css├──KaTex├──katex.min.js├──katex.min.css然后我们在控制台运行npmrunbuild执行完以后就发现dist下面会生成同样的目录因为在部署的时候，dist是前端项目的根目录，即，index.html所在的目录那么我们在代码里可以直接使用以\开头的绝对路径
代码如下：
<template><mavon-editor:value="value":subfield="false":defaultOpen="'preview'":ishljs="true":externalLink="externalLink"/></template>exportdefault{ data(){ return{ value:'一段markdown文本',externalLink={ markdown_css:function(){ //这是markdowncss文件路径return'/cdn-lib/markdownCss/github-markdown.min.css'},hljs_js:function(){ //这是hljs文件路径return'/cdn-lib/highlight/highlight.min.js'},katex_css:function(){ //这是katex配色方案路径路径return'/cdn-lib/KaTex/katex.min.css'},katex_js:function(){ //这是katex.js路径return'/cdn-lib/KaTex/katex.min.js'}}}}}<style>//这里引入缺失的css@importurl(/cdn-lib/highlight/styles/github.min.css);</style>当然了，这是个不是办法的办法，就好在是个体力活，动手就行了，搜狗网站源码不用动脑子。写完以后测试一下，嗯～关机下班，一天的工资到手了～
作者：晴天同学
开源终端工具可查询 IP 信息 ...
在 Linux 的网络调试工具大家族中，dig、nslookup和traceroute是不可或缺的一员。今天，我们将焦点转向一款名为 nali 的开源终端工具，它不仅能查询 IP 地理信息，还能揭示 CDN 服务提供商的幕后秘密。
nali，意为“哪里”，最初以 C 语言开发，但受限于功能和平台支持。后来，开发者选择 GoLang 重写，增加了对 IPv6 的兼容性和Geoip2 数据库，使其功能更加全面。
安装 nali 可分为源码编译和预编译包方式。对于源码安装，你需要 Go 1. 及以上版本。而预编译包则可直接从项目 Release 页面下载对应系统和硬件的版本，解压后运行即可，无刷源码如在 CentOS 中，就是下载并安装相应的安装包。
使用 nali 时，你可以轻松查询单个或多个 IP 的地理位置，通过管道符进行连贯查询。配合 dig 和 nslookup，nali能帮助你识别 CDN 服务提供商，只需注意 CNAME 域名的解析。此外，nali 还支持定期更新数据库，以及自定义 IP 数据库，只需设置 NALI_DB_IP4 或 NALI_DB_IP6 环境变量。
值得注意的是，Windows 和 Linux 用户都可以使用 nali，但在 Windows 上可能需要手动下载和配置第三方 IP 数据库。通过这些实用技巧，nali 成为了一种强大的网络查询工具，无论你是 Linux 专家还是新手，都能在终端中高效地获取所需的信息。
如何使用webpack进行cdn配置呢？
webpack使用HtmlWebpackPlugin进行cdn配置。在上一篇文章中，我们介绍了cdn的实现原理。现在，弹来弹去源码让我们来认识一下如何在形式化开发中使用cdn功能。要使用cdn功能，我们需要cdn服务提供商。我们可以自己搭建，也可以使用一些知名的服务商。幸运的是，市场上有许多免费的cdn服务提供商，例如:其中，BootCDN是Bootstrap中文网支持和维护的前端开源项目免费CDN服务，项目资源与cdnjs仓库同步。界面比较美观，支持搜索功能，可以在线测试cdn是否正常，下面以Bootcdn为例。
在以前的项目开发中，我们经常使用webpack来构建项目，它有两个主要功能，即
webpack中cdn的使用是在静态资源打包生成的时候完成的。主要原理是使用html-webpack-plugin动态插入cdn链接。
这里就不介绍webpack的使用了，以vue-cli2.x生成的默认项目为例。
Html-webpack-plugin是webpack的一个插件，可以动态创建和编辑Html内容。在html中使用esj语法可以读取配置中的参数，简化了html文件的构造。
这次我们主要用它来动态插入cdn链接，比如链接标签，脚本标签。
在线项目地址
vue-cli2.x
使用webpack类型创建一个名为webpack-cdn-demo的vue项目。如果安装的vue-cli是3.x版，命令会有所不同。请参见vue-cli3了解详细信息。
安装依赖性
启动一个项目
下面简单介绍一下目录结构。
build文件夹中的webpack.prod.conf.js是我们的主文件，我们在其中动态设置不需要打包的模块，并构建适当的链接。
在webpack项目中，引入的第三方资源将被统一打包到vender文件中。我们可以通过webpack的externals属性设置包排除这个模块。详情请参见外部扩展。
在前面的步骤中，我们创建了包括vue和vue-router的项目。正式开发中，会有element-ui等ui库。为了演示方便，我们安装了element-ui和axios两个模块，并在构建时实现了这个模块以cdn的形式引入。
安装时注意记住-S，它的作用是安装后在package.json项目文件中插入记录，后续操作需要读取已安装的模块。
对于cdn，我们可以自己搭建，也可以使用专业的cdn服务商。在这里，我们使用免费的cdnbootcdn。选择免费的cdn有很多好处，但毕竟有一个隐患，就是服务可能会崩溃。
依次搜索前面的模块，结果如下
根据规则，cdn资源路径规则如下
其他cdn服务商也一样。
其实使用cdn就是在webpack热启动打包的时候动态插入脚本和样式链接。为了维护方便，我们在build/utils.js文件中增加了几个方法，以后可以在webpack.dev.conf.js和webpack.prod.conf.js上使用。
如果没有build/utils.js，可以添加到其他文件中，只要后续步骤可以操作即可。
命名模块名，与package.json相同
范围模块范围命名
Jsjs地址
Csscss地址
这里要特别注意scope，这是webpack配置的外部参数下的信息。比如vue的作用域名称是Vue，vue-router的作用域名称是VueRouter，element-ui的作用域名称是element。同样，jq的作用域名称是JQuery。具体方法是先引入这个资源，然后在控制台中依次输入近似值，一一匹配(目前还没有找到更好的方法)。
我们可以在webpack热启动时使用cdn进行本地调试。
在build/webpack.dev.conf.js中，已经默认引入了utils.js，可以直接调用相关方法。如果是自定义文件，记得介绍一下。
我们可以给它添加一些自定义属性，方便在index.html调用。，现修改如下:
cdnConfig和onlyCss自定义属性可以通过htmlWebpackPlugin.options以html格式读取..
更多html-webpack-plugin配置。官网，这里暂时不需要更多。
打包的时候我们用的是cdn，配置和之前的dev差不多，但是需要多做一步。
注意这里的externalModules，后面会用到，也就是比dev多几个步骤。
添加与dev相同的两个配置，但只需要将Css改为true，因为我们在打包时要使用比css更多的内容。
webpack配置已经完成，相关参数已经添加到html-webpack-plugin中，可以直接在页面上使用。语法是ejs，类似于ASP.NET、jsp和php。
及格
webpack配置已经修改，项目需要重启才能生效。
打包项目
可见包装体积大大减少。
Cdn资源在页面上也有正确的介绍。
最后，git地址:ame的方式接入，将域名cname到cdn，再回源到服务器，设置需要加速的文件类型，例如jscsspng等等
七牛云 ╳ 掘金推出开源库前端加速 CDN 服务 Staticfile.org
七牛云携手掘金推出全新开源库前端加速CDN服务 Staticfile.org，为开发者提供高质量稳定的CDN服务。该服务同步海外CDNJS源站，同时接受国内开源贡献者提交有价值库。最重要的是，服务支持海外最优加速解析，确保国内、国外用户都能使用全球统一的最优加速域名。
掘金作为技术人才内容社区，与七牛云合作，旨在提供易用、高效且全面的前端开源库CDN加速服务。产品仍在不断迭代优化，期待社区用户的支持与反馈。掘金与七牛云共同努力，致力于提升用户体验，帮助前端开发者。
欢迎开发者试用并提供宝贵意见，积极参与开源项目。可以通过以下****联系七牛云和掘金团队：martketing@qiniu.com 和 hi@xitu.io。此外，可关注并收藏开源库：github.com/staticfile/s...
