JavaScript 现状

我最近在 State Of The Web 节目上聊了聊JavaScript 现状。没错，我就是只会一招……😃

在客户端，当您为无法轻易看到的东西付费时，了解JavaScript 的成本如何影响您的网站变得非常重要。

我该如何解决这些问题？

• 从Lighthouse 开始
• 检查你的网站在一些真实手机上的表现。WebPageTest 上有很多类似的设置。如果你的团队负担得起，本地设备实验室也很有用 📱
• 如果 JavaScript 影响了你的指标，那么可能是时候分析一下原因了。我经常使用source-map-explorer、webpack-bundle-analyzer和bundlephobia来寻找精简 bundles 的机会。
• 我使用 DevTools 代码覆盖率突出显示捆绑减肥机会。
• 尝试利用代码拆分模式。供应商包很大？初始页面加载时可能只需要其中几个依赖项。应用包很大？真的需要立即使用所有这些逻辑吗？像 React 这样的库在开箱即用的代码拆分支持方面正在变得越来越好（参见React.lazy()）。
• 考虑使用babel-preset-env为现代浏览器和旧版浏览器生成不同的包。module /nomodule 模式允许你以向后兼容的方式提供这些包。
• 利用压缩技术。我一直建议团队尝试使用Brotli进行静态资源压缩。在我自己的应用里，我发现 JS 的打包体积减少了 20-30%。如果你使用 Node.js，shrink-ray或shrink-ray-current是可靠的 Brotli 中间件，而且我发现它们运行可靠。