how to remove whitespaces in HTML source code in Demandware?

Question

I am working on demandware platform. I getting too much spaces in source code(HTML). I dont have any idea how can i optimize it, please help me.

Thanks in advance

Answer 1

We have limited control over the end result, however there is the iscontent tag, which has an attribute compact.

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

Note, this tag does not filter down to included templates. Each included template requires its own iscontent tag to compress whitespace. Demandware states that compact might break the layout of tags like <pre>, so use caution.

Answer 2

Depends what you mean by 'optimize'. If you simply want to reduce the download size then enabling Gzip compression on the web server is preferable as it collapses the data required for whitespace down to nearly zero and in addition compresses the rest of your markup. If you had another reason in mind then please elaborate. If for example you want the source code to be 'clean' for debugging/development purposes then you may achieve the same result using a source code cleaner on the client side (ie, a Firefox plugin or interface to HTMLTidy).

Answer 3

There seems to be issues with local includes in sourcecode leaving multiple blank lines. Modules.isml can be especially offensive. Setting compact to 'true' doesn't help.

I recently combined @sholsinger's answer with the Demandware/SFCC Build Suite, which uses grunt rather than gulp, to address this.

The basics look something like this:

Added grunt-contrib-htmlmin to task_loader.js and package.json and ran npm install.

Added htmlmin.js in grunt/config.

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',  
    }
}
}

Then added it to alises.yaml: 'htmlmin:minify'