一个自信的前端应该掌握的CDN操作

最新推荐文章于 2024-04-26 07:45:00 发布

weixin_34360651

最新推荐文章于 2024-04-26 07:45:00 发布

阅读量267

点赞数

文章标签：前端 webpack javascript ViewUI

原文链接：https://juejin.im/post/5b5fe0e2f265da0f6a036b28

版权

以前的前端是抠图仔，现在这个世道的前端，是打包仔。普遍都是用webpack了吧，毕竟现在正是各种框架当道（不用我说，你们也知道我说的是啥框架）。打出来的包吧，不处理一下，真的是很大。当然这次分享要说的是跟前端相关CDN操作，不讨论前端打包的问题，要了解前端打包相关的，可以了解一下webpack的相关插件和自行谷歌。

话说我们现在用工具打包，正常操作都是将npm包打包成一个包，将你自己的代码如angular的文件啦、react的文件啦、vue的文件啦等等这些打成一个包。自己代码的这个包还好，不会很大，不影响。但是npm这个包吧，真的不是一般的大。虽然说我们的浏览器有一套缓存机制，但就算是缓存，也是要有首次加载的，这就会中造成首次加载很慢。

说了这么多到底该怎么办呢？解决办法就是CDN。这当然是绝大多数开发都知道的解决方案，这是个标准答案。关键是怎么个操作过程？

今天就以webpack打包出来的文件为例，记录一下CDN的操作过程。由于我没有用过react脚手架或是vue的脚手架，那么这个就不在我的考虑范围，当然我也知道那是可以改的，但由于没有实际操作过，万一说错了也不好。

这个目录结构相信很多人都是很熟悉的，而上面的build就是所有的打包文件。而里面的libs.js就是今天的主角，所有的npm包的打包文件。我特意查看了一下

这个文件的大小就有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，登录好了就可以发布了。

就跟前面说的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操作就讲完了

说点题外话吧，为什么我要说自信的前端呢，因为在我看来，程序员并没有什么高低贵贱之分，有的只是充满热情的程序员和不那么热情的程序员，我把那些充满热情的人称之为自信的人！?想必你的爱人就是看上你这点吧

weixin_34360651

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一个自信的前端应该掌握的CDN操作

以前的前端是抠图仔，现在这个世道的前端，是打包仔。普遍都是用webpack了吧，毕竟现在正是各种框架当道（不用我说，你们也知道我说的是啥框架）。打出来的包吧，不处理一下，真的是很大。当然这次分享要说的是跟前端相关CDN操作，不讨论前端打包的问题，要了解前端打包相关的，可以了解一下webpack的相关插件和自行谷歌。话说我们现在用工具打包，正常操作都是将npm包打包成一个包，将你自己的代码如a...
复制链接

扫一扫