模块,指的是 JavaScript 中这种语法
import { myCounter, someOtherThing } from 'utilities';
我们通常使用 Webpack 来打包,但现在 Safari 技术预览版、Firefox Nightly(带标记)和 Edge 都支持。
它旨在支持渐进增强,因为您可以安全地链接到捆绑版本和非捆绑版本,而无需浏览器下载两者。
Stefan Judis 展示了
<!-- in case ES6 modules are supported -->
<script src="app/index.js" type="module"></script>
<!-- in case ES6 modules aren't supported -->
<script src="dist/bundle.js" defer nomodule></script>
不打包意味着更简单的构建过程,这是很棒的,但放弃了 Webpack 等工具可以做的所有其他酷炫的事情,比如“树摇”。此外,所有这些导入都是单独的 HTTP 请求,这在 HTTP/2 中可能不是什么大问题,但仍然不是很好
Khan Academy 很久以前就发现了同样的问题,当时他们在尝试 HTTP/2。发送更小的文件的想法很棒,可以确保完美的缓存命中率,但最终,它始终是一种权衡,并且取决于多个因素。对于大型代码库,将代码分成多个块(一个供应商包和一个应用程序包)是有意义的,但发送数千个无法正确压缩的小文件不是正确的方法。
预处理构建步骤可能会持续存在。原生技术可以从中学到东西,但我们也可以利用两者的长处。