一個自信的前端應該掌握的CDN操作

阿9發表於2018-07-31
前端

以前的前端是摳圖仔，現在這個世道的前端，是打包仔。普遍都是用webpack了吧，畢竟現在正是各種框架當道（不用我說，你們也知道我說的是啥框架）。打出來的包吧，不處理一下，真的是很大。當然這次分享要說的是跟前端相關CDN操作，不討論前端打包的問題，要了解前端打包相關的，可以瞭解一下webpack的相關外掛和自行谷歌。

話說我們現在用工具打包，正常操作都是將npm包打包成一個包，將你自己的程式碼如angular的檔案啦、react的檔案啦、vue的檔案啦等等這些打成一個包。自己程式碼的這個包還好，不會很大，不影響。但是npm這個包吧，真的不是一般的大。雖然說我們的瀏覽器有一套快取機制，但就算是快取，也是要有首次載入的，這就會中造成首次載入很慢。

說了這麼多到底該怎麼辦呢？解決辦法就是CDN。這當然是絕大多數開發都知道的解決方案，這是個標準答案。關鍵是怎麼個操作過程？

今天就以webpack打包出來的檔案為例，記錄一下CDN的操作過程。由於我沒有用過react腳手架或是vue的腳手架，那麼這個就不在我的考慮範圍，當然我也知道那是可以改的，但由於沒有實際操作過，萬一說錯了也不好。

一個自信的前端應該掌握的CDN操作

這個目錄結構相信很多人都是很熟悉的，而上面的build就是所有的打包檔案。而裡面的libs.js就是今天的主角，所有的npm包的打包檔案。我特意檢視了一下

一個自信的前端應該掌握的CDN操作

這個檔案的大小就有1.1MB！！人家一個框架都沒有這麼大！！

一直在說CDN，那麼到底是哪一個CDN呢？總不可能我們一個摳圖仔、打包仔自己搭建一個CDN吧，當然有時間還是可以試試的，但今天說一下我用的CDN

jsDelivr - A free, fast, and reliable Open Source CDN for npm and GitHub

說說我為什麼使用這個，因為如果你的檔案是在npm或者是GitHub上

Load any project hosted on npm:

https://cdn.jsdelivr.net/npm/package@version/file

Load any GitHub release or commit:

https://cdn.jsdelivr.net/gh/user/repo@version/file

就拿npm來說，它可以關聯npm上面的所有的包，而它本身不需要做什麼工作，就等我們把npm包發到npm上面就可以了。

其實很簡單，我的操作步驟是這樣的：

在專案的當前資料夾新建一個資料夾，如第一個圖上面的libs_npm就是我新建的資料夾，看名字就知道，這個資料夾我是要放libs.js的，剛才說的，這個檔案是一個有1.1MB大小的所有npm包的打包檔案，而且要把這個檔案本身也打包成npm包。

如何使用npm釋出自己的npm包

在npm釋出自己的包

npm打包的方法請看我給出的連結

在libs_npm這個資料夾裡新建一個index.js，然後裡面的內容能夠如下：

    index.js
    var a = require( './libs.js' );
    module.exports = a;
複製程式碼

是的，將build中的libs.js複製到libs_npm中。

那麼這個時候就可以npm publish了。釋出的前提是你已經有npm的賬號了，不然就會提醒你必須先登入才能釋出。有了賬號就npm login，登入好了就可以釋出了。

一個自信的前端應該掌握的CDN操作

就跟前面說的Load any project hosted on npm:

https://cdn.jsdelivr.net/npm/package@version/file

那麼我這裡就是

https://cdn.jsdelivr.net/npm/shebao-mobile-libs@1.0.1/libs.js

這個時候你的包檔案就生成了CDN連結了！

接下來要做的就是把webpack中的插入libs.js的操作去掉

// new AddAssetHtmlPlugin({
//     filepath: require.resolve('./build/libs.js'),
//     hash: true,
//     includeSourcemap: false,
// }),
複製程式碼

最後就是在index.html中引用那你生成的CDN：

<body>
    <div id="root"></div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/shebao-mobile-libs@1.0.1/libs.js"></script>
</body>
複製程式碼

綜上的CDN操作就講完了

說點題外話吧，為什麼我要說自信的前端呢，因為在我看來，程式設計師並沒有什麼高低貴賤之分，有的只是充滿熱情的程式設計師和不那麼熱情的程式設計師，我把那些充滿熱情的人稱之為自信的人！?想必你的愛人就是看上你這點吧

相關文章