本文目录一览：
- 1、webpack使用HtmlWebpackPlugin进行cdn配置
- 2、优酷前端如何处理后端返回的切片视频流？
- 3、为什么需要使用及如何使用CDN
- 4、JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
- 5、有关CDN的问题
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的差不多，只不过需要做多一步。
注意此处的 externalModules ，后面用到，也就是比dev多的步骤。
加入和dev一样的两个配置，不过需要把onlyCss改为 true ，因为我们希望打包时不单单使用css。
webpack配置已经完成，在html-webpack-plugin中已经添加了相关参数，我们再在页面上可以直接使用，使用语法是 ejs ，和asp.net，jsp，php类似。
通过 % % 和 htmlWebpackPlugin.options 用js遍历 插入 link标签和script标签。
ps: 修改了webpack配置，需要重启项目才会生效
打包项目
可以看到打包体积大大减小了
页面上也正确引入了cdn资源。
最后奉上git地址：
比悲伤更悲伤的分割线
原来两年前已经有人做了一个类型的webpack-cdn-plugin
优酷前端如何处理后端返回的切片视频流？
!DOCTYPE html
html
head
meta charset="UTF-8"
meta name="viewport" content="width=device-width, initial-scale=1.0"
meta http-equiv="X-UA-Compatible" content="ie=edge"
link href="" rel="stylesheet"
style
.video-js .vjs-tech {
position: relative !important;
}
/style
/head
body
video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" data-setup='{}'
style='width: 100%;height: auto'
source id="source" type="application/x-mpegURL"
src=""
/source
/video
/body
script src=''/script
script src=""/script
script src=""/script
script
let myVideo = videojs(document.querySelector("video"), {
controls: true,
muted: true,
autoplay: true,
})
/script
请采纳
为什么需要使用及如何使用CDN
CDN的全称是Content Delivery Network，即分发网络。基本原理是采用各种缓存服务器，内将这些缓存服务器分布容到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求。
哪些业务需要办CDN许可证？
根据规定：企业从事为为视频网站、门户网站、个人网站、购物网站、企事业单位网站或数据提供网络加速服务的，均需要办理内容分发网络（CDN）许可证，办理操作可在阿里云了解。
CDN许可证应用范围有：
（一）
1、门户网站加速；
2、视频网站加速；
3、购物网站加速；
4、个人网站加速；
5、企事业单位网站加速。
（二）
CDN支持的业务类型有：
1、多媒体视音频点播/直播/大文件下载;
2、场景加速，支持渐进式点播、流媒体直播，提供高质量低时延的视听加速服务;
3、视频流媒体直播服务，媒资存储、切片转码、访问鉴权、内容分发加速一体化解决方案;
4、视音频渐进式点播服务，低缓冲时间，高流畅度播放体验，支持 MP4、FLV 视频格式;
5、支持资源链接鉴权，可自定义鉴权 KEY，保障您的媒体资源安全，免去盗链担忧。
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
本文实例讲述了JS实现的将html转为pdf功能。分享给大家供大家参考，具体如下：
!DOCTYPE
html
html
head
titlejsPDF插件/title
meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
script
src=""/script
script
src=""/script
script
src=""/script
/head
body
p
class="pdf-wrapper"
="to-pdf"HTML
content...h1中文/h1
中国,汉字,测试:合同
模版
中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国/br中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国....................br/
中国,汉字,测试:合同
模版
...................br/
计费
接口
....................br/
img
src=''/
/p
script
type="text/javascript"
var
=
new
jsPDF('p','pt','a4');
pdf.internal.scaleFactor
=
1;
var
options
=
{
pagesplit:
true
};
//$('.pdf-wrapper')
pdf.addHTML(document.body,options,function()
{
pdf.save('web1111.pdf');
});
/script
/body
/html
运行效果：
更多关于JavaScript相关内容可查看本站专题：《JavaScript扩展技巧总结》、《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:jsPDF导出pdf示例jsPDF生成pdf后在网页展示实例使用jspdf生成pdf报表phonegap教程使用jspdf库在应用中生成pdf文件(pdf生成方法)JS导出PDF插件的方法(支持中文、图片使用路径)js插件方式打开pdf文件(浏览器pdf插件分享)用Javascript检查Adobe
PDF插件是否安装的实现代码纯js实现html转pdf的简单实例(推荐)基于Phantomjs生成PDF的实现方法JavaScript+Java实现HTML页面转为PDF文件保存的方法JavaScript代码生成PDF文件的方法
有关CDN的问题
1、在线引用【CDN（内容分发网络）】
国外的CDN：
1.Google Hosted Libraries
src=""
2.Microsoft CDN
src=""
3.CDNJS
src=""
4.jQuery官网
src=""
5.jsDeliver
src=""
国内的CDN:
1.百度【本人一般引用这个】
src=""
2.七牛
src=""
3.新浪
src=""
4.又拍云
src=""
5.360
src=""
许多用户在访问其他站点时，已经从谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。
2、本地引用，这个需要自己到官网上去下载jq插件库，导入本地项目，直接相对地址引用
src = "js/jquery-1.11.0.min.js"这种方式
从这个列表上看应该是在国内也有CDN部署。其性能应该是不错的。
