如何在 Scala.js React.js 应用程序中处理大型 js 文件？答案

【问题标题】：How to handle large js files in a Scala.js React.js application?如何在 Scala.js React.js 应用程序中处理大型 js 文件？
【发布时间】：2015-08-04 03:24:47
【问题描述】：

我们如何在包含大量 js 代码和依赖项的大型 Scala.js React applications 中处理 app-jsdeps.js 和 app-opt.js ？

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

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

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

【问题讨论】：

标签： scala.js scalajs-react

【解决方案1】：

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

Async Mixin

Async Mixin Example

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 也不例外 ;)

【讨论】：

【解决方案2】：

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

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

【讨论】：