我正在使用 Twitter Bootstrap 编写一个简单的应用程序。在我的主要 HTML 文件中,我有以下几行:
<link rel="stylesheet/less" href="/static/less/style.less">
<script src="/static/js/libs/less-1.3.0.min.js"></script>
所以每次我刷新页面时,都会生成整个 css。 每次大约需要 15 秒,因此等待页面加载非常痛苦。
我尝试使用 SimpLESS 从 less 文件中生成 css,但生成失败。 我会努力让它发挥作用,但我也想知道我是否没有做错什么......
我不喜欢每次都生成 css,即使我不更改 less 文件也是如此。有没有办法以某种方式减少对 css 的缓存? 或者也许还有其他替代解决方案来解决这个问题?
最佳答案
我建议删除部分 .less 文件,看看是否有任何特定内容导致性能不佳。它不应该那么慢。我的猜测是特定的混入或函数导致了这个问题。
我还建议分析 JavaScript(Chrome 有一个很好的 JS 分析器),看看是否出现任何明显的东西,比如一个缓慢且重复调用的 LESS 相关函数。
这是我的整体 LESS 策略,将来可能对您有所帮助。我使用的是 Visual Studio 和 ASP.Net,但您可以在各种环境中执行此操作。
最重要的是,LESS 没有 JavaScript。一切都在服务器端完成。
在开发中,我通过 dotLess 请求我的 .less 文件HTTP 处理程序,处理它们并处理缓存。时不时地,缓存会出现故障,我必须重新启动本地 Web 服务器,但这不是什么大问题。这使我能够对我的 less 进行实时更改,并通过刷新页面来查看它们。它也很快。
示例:<link rel="stylesheet" href="foo.less" />
- 对于生产,我使用构建操作将我的 .less 文件编译成单个 CSS 文件,并直接在页面中引用该 CSS 文件。这消除了一切动态因素。
示例:<link rel="stylesheet" href="final.css" />
关于css - 推特 Bootstrap : less compilation taking a long time,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12228745/