how to remove whitespaces in HTML source code in Demandware?

Asked 28/11, 2012 at 6:27 Answered 6/11, 2020 at 17:26

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

Rident answered 28/11, 2012 at 6:27 Comment(1)

Can you share your screen preview or URL – Cinquefoil 10/12, 2012 at 5:31

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.

Noblesse answered 5/12, 2012 at 21:32 Comment(4)

I don't think it compresses much and I'm rather certain it does not combine lines, leaving \n characters intact in the code. – Noblesse 5/12, 2012 at 21:34

it doenst remove white space it just combine lines, by mean indentation given in code. – Rident 9/12, 2012 at 15:22

Note that as these parameters are default values, you could even use <iscontent/> to achieve the same results. Looks a bit odd for ISML code, still it works. Also for now there is no option to remove/strip-off blank lines. It is not much of an issue related to data transfer, as on production instances the communication is gzipped. – Eydie 27/9, 2013 at 8:52

@EdGonzalez, could you let me know if demandware provides some kind of sample code to go through features and look and feel ? or any demo login that helps – Headforemost 30/10, 2015 at 6:29

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).

Kassel answered 10/12, 2012 at 5:14 Comment(0)

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'

Wong answered 6/11, 2020 at 17:26 Comment(1)

That said you should also try the Auto-Minify options within the Business Manager under Sites > Embedded CDN Settings > Zones. They are under the Speed tab. – Wong 6/1, 2021 at 16:4

If you use Demandware's Build Suite, you can have it concatenate whitespace during the build process.

You can find information about the Build Suite here: https://bitbucket.org/demandware/build-suite (private repo)

Fado answered 9/6, 2014 at 18:6 Comment(1)

The build suite only offers ability to minify js/css, and concatenate JS or CSS into a combined file. No options that I can find to minimize/compact/compress whitespace in HTML. – Carboni 28/4, 2015 at 22:43

Moku has successfully used the html-minifier package to compress template files to remove white space on sheplers.com. We added it to the gulp process that is based on Site Genesis's build scripts. (circa late 2015) Since we're using gulp we used the gulp wrapper package gulp-htmlmin. The gulp task looks like:

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('./'));
    });
});

The package.json paths directive for isml looks like the following. Note that you can add any ISML files that generate excessive whitespace to this list but we found that the majority of the offending whitespace was generated by this one file alone.

"isml" : [
  "app_storefront_core/cartridge/templates/default/util/modules.isml"
]

Crandale answered 31/3, 2017 at 17:32 Comment(0)

-1

I am assuming that you are using their Demandware Commerce or another one of their Services. Since they provide all the back end code for their eCommerce sites, it is extremely unlikely that you will be able to tone down their 'whitespace'. If you view the source on their own home page you will also see tons of extra 'whitespace'. This is just a product of their content management system.

Are you just worried about the extra overhead (file size) of the pages or do you have another concern?

Casi answered 3/12, 2012 at 15:52 Comment(1)

Their main site uses their platform and as @Ed Gonzalez mentioned the ability to 'compact' white space only means spaces and tabs not extra line breaks. – Crandale 27/6, 2013 at 19:54

Recommended topics

Hot tags