极客时间对于推广渠道会有返利优惠,比如山月在极客时间买了一门课,再把课程分享给好友购买,这时极客时间会向山月返利20元左右。
而我现在做了一个返利平台,你可以在上边通过山月的链接购买课程,此时极客时间会向我返利。为了共同学习,而你可以添加我的微信 (shanyue94),我将把极客时间给我的返利发一个红包全部返给你

# ESM 大势所趋

ESM 的普及,而带来的打包工具的革命以及适用于 ESM 下一代 CDN 的发展,业务项目在生产环境开始使用原生的 ESM 代替以前的 Bundle 方案,从而导致开发体验及网站速度的大幅提升。

核心代码就是下边这一行: 使用 HTTP Import 的方式代替以前的 Bare Import + Bundle

<script type="module">
  import lodash from 'https://cdn.skypack.dev/lodash';
</script>

ESM 的发展,从基建到应用的各个开发者都会参与其中:

  1. 面向业务的开发者: 更改为 Native ESM 的最终打包方式,而非以前单一复杂的大 Bundle。网站速度变得更快 90%
  2. 面向工程化的开发者: 专注于 ESM 的打包,如 Vite、ESBuild、Snowpack 等及相关插件的开发(如集成CDN),以及 CJS 向 ES 的过渡工作等。这使得构建效率可以提升10倍
  3. 面向组件、库的开发者: 更多地支持 ES 作为前后通通用的打包方式,代替了以前的 UMD
  4. 面向云服务的开发者: 开发新的 CDN 服务,支持最通用的 cjs-esm 及一些新特性如私有库的支持,子域名、http2/http3、审计日志做更好的收费等
  5. 面向企业: 更快的网络访问速度,更便宜的 CDN (大部分资源会有公共 CDN)

# 面向业务

以前打包主要是两部分: common 打所有第三方包,app.js 打应用代码的包,路径带上 Hash 值,加一个永久缓存。

  • common.xxxxxx.js
  • app.xxxxxx.js

但是有可能产生一个问题: 一行代码造成整个应用的长久缓存失效。

为了对缓存进行更加细致的控制,也会小心细致的分包。如一些大包 echartsmathjax 分出去。一些不在视觉内需要点点点才能看到的包也通过 React.lazylodable-component 等也给分出去。但也需要繁琐的手动配置。

ESM 加入后:

  1. 所有第三方模块都从 CDN 中获取,且模块都会被永久缓存,而根据调查,第三方模块的体积占整个应用的 90%。为啥子可以永久缓存,因为对于 npm 的每一个 package 都会有版本号控制,版本号不变内容就不会变。现在一些支持 ESM 的 CDN 已经实现了这个功能。
$ curl --head -vvv https://jspm.dev/ms@2.1.3
cache-control: public, max-age=31536000, s-maxage=604800, immutable
  1. CDN 使网络速度更快。以前没有 CDN 吗?以前也有,但是频率就不是一个量级了,当使用了 ESM 的 React CDN 后,React 会被各地各网站都跨网站缓存,更能充分利用到 CDN 的优势。而以前一个大的 Bundle,更有可能未命中缓存及回源

# 面向 Package 开发

TODO

(看的人多的话补充)

# 关于 ESM 的学习

以下两篇文章可以更好地理解 ESM

另外我做了一个网站,用以找到更合适的轮子以及直接在控制台访问模块: <npm.devtool.tech>。其中就使用了 ESM 去加载这些第三方库。

比如,当我查看 lodashdate-fns 的文档时,需要去实验这些函数时,npm.runkit 显得不如控制台那么方便。

关于山月

我的项目:
我的微信:shanyue94,欢迎交流
Last Updated: 5/19/2021, 11:49:20 AM