ES6 模块支持登陆浏览器:是时候重新考虑打包了吗?

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您的旅程的每个阶段提供云产品。立即开始使用 200 美元的免费积分!

模块,指的是 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。发送更小的文件的想法很棒,可以确保完美的缓存命中率,但最终,它始终是一种权衡,并且取决于多个因素。对于大型代码库,将代码分成多个块(一个供应商包和一个应用程序包)是有意义的,但发送数千个无法正确压缩的小文件不是正确的方法。

预处理构建步骤可能会持续存在。原生技术可以从中学到东西,但我们也可以利用两者的长处。

直接链接→