Question

如何在TYPO3中异步加载压缩（缩小的）文件？

正常方式：

includeJSFooterlibs {
  jquery = fileadmin/JS/jquery.min.js
  jquery {
    async = 1
  }
}

然后我压缩所有文件。如何在异步Modus中加载Compressed-FILE？

config {
    minifyJS = 1
    minifyCSS = 1
    compressJs = 1
    compressCss = 1
    concatenateJs = 1
    concatenateCss = 1
    concatenateJsAndCss = 1
}

我需要一种方法，加载异步“压缩”文件。 TYPO3生成了新闻档案。

由于

Answer 1

正如评论中所述，我也很确定你不能这样做。此外，如果它工作，你不会想要异步加载所有的js。（如果你的js合并在一个文件中就是这种情况）。

但是你可以这样做：

config {
  concatenateJs = 1
  concatenateCss = 1

  compressJs = 1
  compressCss = 1
}

includeJSFooterlibs {
  jquery = fileadmin/JS/jquery.min.js
  jquery {
    async = 1
    disableCompression = 1
  }
  file00 = fileadmin/JS/foo.js
  file01 = fileadmin/JS/bar.js
}

对所有资产使用压缩和连接，然后有选择地为jquery include禁用它。

我希望这个解决方案适合你。

Answer 2

串联（而不是压缩）会禁用异步。
对页脚中加载的脚本使用异步可能没有多大意义。使用includeJSFooterlibs将脚本放在页脚-页面底部（在分析和加载页面之后加载）。（请参见"Efficiently load JavaScript with defer and async"和"Async Attribute and Scripts At The Bottom"）
此外，异步可能会更改顺序，因此如果要加载多个脚本，请小心。
如果您正在使用TYPO3 9，则可能还需要查看defer
最后但并非最不重要的一点：您正在从fileadmin加载jquery，可能想了解创建sitepackage扩展名以维护布局内容的可能性。

也要澄清

串联：将所有源文件合并为1个文件
minify：删除不相关的字符（例如空格）。 jquery.min已缩小，未压缩
compress：使用一些压缩算法（例如GZIP）

文档当前解释config.compressCss表示缩小和压缩，而compressJs表示仅压缩。我发现这有点令人困惑，但是如果您压缩文件，那么基本上也可以获得压缩。

回到您的问题：

config {
  compressJs
  concatenateJs
}
page.includeJsLibs {
  jquery = EXT:mysitepackage/Resources/Public/JavaScript/jquery.min.js
  jquery.async = 1
  jquery.excludeFromConcatenation = 1
}

如果对所有文件都执行此操作，显然可以首先忽略config.concatenateJs。但是如上所述，可能不是您想要的，并确保您的脚本将以正确的顺序加载。

（为了简化起见，这里省略了CSS内容。）

TYPO3 TypoScript参考：

此外，我将通过删除minifyJS，minifyCSS和concatenateJsAndCss简化问题。

concatenateJsAndCss是deprecated in TYPO3 9.4
minifyJS和minifyCSS已被删除。

在任何情况下，您都不需要几个执行相同操作的选项（concatenateJsAndCss 和 concatenateJs，concatenateCss）。

Answer 3

您可以做的是在模板中加载压缩文件。这是我为压缩的CSS文件执行此操作的DefaultTemplate.html摘录：

<link rel="stylesheet" type="text/css" href="/typo3temp/assets/compressed/merged-3f4572cd49b959626fc38730095acbb0-23be5be3f22e030757a0bb134c3718a5.css?1514538093" media="all">

因为Google Pagespeed Insights会因速度优化而产生错误。通过这个小手动技巧，我在Typo3 v8.7.9项目上获得了98/99： https://lightningsoul.de https://renoi.de https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Flightningsoul.de%2F

当然，在更新CSS / JS时手动执行此操作可能会有些麻烦，但这是最简单的方法。在你的情况下，该行看起来像这样：

<script src="/typo3temp/assets/compressed/merged-ffdbb82fe741d3f165401ef485235b9f-995014bd04096b10820bbc2df443a90b.js?1514463856" async></script>

希望这会有所帮助。哦，请记住清除缓存时文件不会更新，但你可以轻松地附加一个变量？万一你需要那个。

我建议使用像grunt这样的东西来生成文件而不是Typo3。这样您就不必手动切换Typoscript，生成新文件并在每次更改时将其附加到模板。

如何在TYPO3中异步加载压缩文件？

3 个答案: