Question

我正在开发Demandware平台。我在源代码（HTML）中获得了太多空格。我不知道如何优化它，请帮助我。

提前致谢

Answer 1

我们对最终结果的控制有限，但是 iscontent 标记具有紧凑属性。

<iscontent type="text/html" compact="true" />

请注意，它不会过滤到包含的模板。每个包含的模板都需要自己的 iscontent 标记来压缩空格。 Demandware声称compact可能会破坏标签的布局，因此请谨慎使用。

Answer 2

取决于您的意思＆＃39;优化＆＃39;。如果您只是想减小下载大小，那么最好在Web服务器上启用Gzip压缩，因为它会将空格所需的数据折叠到接近零，并且还会压缩其余的标记。如果您有其他原因，请详细说明。例如，如果您希望源代码清洁＆＃39;为了调试/开发目的，您可以使用客户端的源代码清理器（即Firefox插件或HTMLTidy接口）获得相同的结果。

Answer 3

源代码中的本地包含似乎存在问题，留下多个空白行。 Modules.isml可能特别令人反感。将compact设置为“ true”没有帮助。

我最近将@sholsinger的答案与Demandware / SFCC Build Suite结合使用，该套件使用grunt而不是gulp解决此问题。

基本知识如下：

将grunt-contrib-htmlmin添加到task_loader.js和package.json并运行npm install。

在grunt / config中添加了htmlmin.js。

module.exports = {
minify: {
    options: {
        removeComments: true,
        collapseWhitespace: true
    },
    files: {
        '<%= dw_properties.folders.code %>app_core/cartridge/templates/default/util/modules.isml': '<%= dw_properties.folders.code %>app_core/cartridge/templates/default/util/modules.isml',  
    }
}
}

然后将其添加到alises.yaml： 'htmlmin：minify'

Answer 4

如果您使用Demandware的Build Suite，您可以在构建过程中连接它。

您可以在此处找到有关Build Suite的信息：https://bitbucket.org/demandware/build-suite（私人仓库）

Answer 5

Moku已成功使用html-minifier包压缩模板文件以删除sheplers.com上的空白区域。我们将它添加到基于Site Genesis构建脚本的gulp进程中。（大约在2015年末）由于我们使用gulp，我们使用了gulp包装器包gulp-htmlmin。 gulp任务看起来像：

gulp.task('isml', function() {
    var htmlminOptions = {
    collapseWhitespace: true,
    includeAutoGeneratedTags: false
    };

    paths.isml.forEach(function(p) {
        gulp.src(path.join(rootPath, p), { base: './' })
            .pipe(htmlmin(htmlminOptions))
            .pipe(gulp.dest('./'));
    });
});

package.json的{{1}}路径指令如下所示。请注意，您可以将任何生成过多空格的ISML文件添加到此列表中，但我们发现大多数有问题的空白都是由这一个文件单独生成的。

isml

Answer 6

我假设您正在使用他们的Demandware Commerce或其他服务。由于他们为他们的电子商务网站提供了所有后端代码，因此非常不太可能让他们能够淡化他们的'空白'。如果您在自己的主页上查看源代码，您还会看到大量额外的“空白”。这只是其内容管理系统的一个产品。

您是否只是担心页面的额外开销（文件大小），还是有其他问题？

如何在Demandware中删除HTML源代码中的空格？

6 个答案: