包含cdnjsnet的詞條

本文目錄一覽：

• 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

pdf

=

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部署。其性能應該是不錯的。