1

我们如何处理大量的 js 代码和依赖项app-jsdeps.js？app-opt.jsScala.js React applications

我已经使用@ochrons spa-tutorial示例使用@japgolly scalajs-react构建了我的第一个Web 应用程序，但即使在优化它之后，文件的大小和文件的大小也将在页面加载之前下载。app-jsdeps.js (only 10 external JS deps)app-opt.js900kb8 seconds

在这种情况下我们通常会怎么做？

  • 我们是否将应用程序拆分为服务器上的多个 html 页面，每个页面都有自己的文件app-jsdeps.js和app-opt.js文件，这意味着每个页面都有新的 React-router ？
  • 或者我们是否将app-jsdeps.jsand拆分app-opt.js为多个文件，以便同时下载而不是一大块？
4

2 回答 2

1

您可以异步加载每页所需的 jsdeps，我目前正在 scalajs-react-components 演示应用程序中执行此操作

异步混合

异步混合示例

app-opt.js 文件大约 900kb

在 gZip 之后，它会在 ~ 350-370kb 左右。只是为了澄清一下 scala.js 核心（当前版本）向输出文件添加了大约 150kb -200kb（在 gZip 之前用于大中型项目），在你的情况下，大小很大，因为 spa-tutorial 依赖于 scalajs-react 和 scalacss (这两个库在内部依赖于 scalaz,shapeless.., ofc 它们的存在是为了为您提供更多的安全性！） - https://github.com/japgolly/scalacss/issues/17，在这个基本大小之后，即使您添加越来越多您的项目的功能，大小没有太大变化。

话虽如此，如果您启用长期缓存，则无需担心上述任何事情。用户第一次访问您的页面时会有轻微的延迟，进一步的访问几乎是即时的。这是一个使用 webpack 的示例：http ://webpack.github.io/docs/long-term-caching.html

顺便说一句，我们必须为任何 Web 项目处理所有这些问题，sclaa.js 也不例外；）

于 2015-08-02T16:51:05.523 回答
1

另外，请记住，对于生产版本，您通常应该使用缩小的 JS 依赖项，并使用 -jsdeps.min.js 而不是 -jsdeps.js，如此处所述。如果你的 JavaScript 依赖项是用一个好的压缩器构建的，那么即使没有 gzip，它也会有很大帮助。

正如@invariant 所指出的，只要客户端正在缓存 jsdeps，影响仅限于页面上的第一次点击，之后事情会变得更快......

于 2015-08-03T19:24:47.577 回答