【问题标题】:Apostrophe-assets - reduce file size撇号资产 - 减少文件大小
【发布时间】:2021-04-01 13:42:23
【问题描述】:

我正在使用 ApostropheCMS 做一个项目,我对名为 apostrophe-assets 的模块有一些疑问。

  1. 我有一个相当大的 css 文件(> 1MB)。我注意到该文件的 30% 包含添加到 master-anon.css.map 文件中的注释。我想知道是否可以设置一些我想排除 .map.css 文件的选项?此文件由撇号生成。如果没有,谁能告诉我为什么撇号会生成这个文件以及为什么需要它?

  2. 我可以缩小我的 CSS 文件吗?我知道有一个选项 minify: true,但我只想缩小我的 css 文件,而不是所有资产(css + js)。

【问题讨论】:

  • 您是否有不想缩小所有资产的特殊原因?撇号资产正在创建的任何东西都需要运行您的身边,因此通常最好让撇号缩小和捆绑它们,而不是让您的网站加载大量单独的、未缩小的文件。

标签: apostrophe-cms


【解决方案1】:

Apostrophe-assets 用于捆绑和缩小 Apostrophe 模块(包括您自己的)在浏览器中运行 Apostrophe 所需的任何 JS/样式表资产。

您是正确的,您可以在 apostrophe-assets 的选项上使用 minify: true 标志来告诉 apostrophe 组合和缩小您使用 pushAsset 指定的任何脚本和样式表:

self.pushAsset('script', 'always', {when: 'always'})

撇号资产中此功能背后的目的是缩小所有资产并将它们捆绑到单独的文件中,以减少浏览器负载(单个文件而不是单独加载每个资产)。它对网站的加载速度有很大的影响。

您绝对不想阻止 apostrophe-assets 包含其文件,因为在浏览器中运行 Apostrophe 需要它构建到捆绑样式表和 JS 文件中的内容。但是,没有什么可以强迫您允许 Apostrophe 为您缩小文件。如果您不使用 pushAsset 将文件包含在资产包中,Apostrophe 根本不会触及您的文件。但是,没有另一种内置方法来处理缩小 - 您需要使用 webpack 或其他实用程序来缩小与撇号分开的个人样式表,并且您可能希望将其包含在您的 outerLayout.html 文件中头部。

不过,作为一般规则,让撇号资产通过 pushAsset 和 minify: true 处理您的 CSS 文件通常更容易和更好:当您准备好部署到生产环境时。在开发过程中让资产变大并关闭缩小的一般标准程序,因为那时资产大小几乎没有那么重要。此外,如果您指定 minify: true,则这些地图 cmets 不应包含在生成的捆绑 .css 文件中。

【讨论】:

  • 我们通常的做法是在开发的时候让它变大,然后在生产环境中使用minify: true。当然,您始终可以在本地打开缩小以在部署之前查看它的内容。
  • 谢谢@alexbea - 我会在我的回答中说得更清楚!
  • 这是一个很好的解释。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-04-23
  • 2013-06-25
  • 2011-01-10
  • 1970-01-01
  • 1970-01-01
  • 2019-06-14
相关资源
最近更新 更多