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

Can you share your screen preview or URL – Tarun Dec 10 '12 at 05:31 — Tarun, Dec 10 '12 at 05:31

score 12 · Answer 1 · edited May 05 '20 at 15:06

12

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.

edited May 05 '20 at 15:06

Foo Bar

328
3
20

answered Dec 05 '12 at 21:32

Ed Gonzalez

1,882
13
18

1

I don't think it compresses much and I'm rather certain it does not combine lines, leaving \n characters intact in the code. – Ed Gonzalez Dec 05 '12 at 21:34
it doenst remove white space it just combine lines, by mean indentation given in code. – webCoder Dec 09 '12 at 15:22
Note that as these parameters are default values, you could even use 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. – Zlatin Zlatev Sep 27 '13 at 08: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 – Slimshadddyyy Oct 30 '15 at 06:29

score 4 · Answer 2 · answered Dec 10 '12 at 05:14

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

score 2 · Answer 3 · edited Nov 06 '20 at 17:31

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'

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. — Kevin Truin, Jan 06 '21 at 16:04

score 0 · Answer 4 · answered Jun 09 '14 at 18:06

0

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)

answered Jun 09 '14 at 18:06

Michael GIllman

86
2

2

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. – Jon L. Apr 28 '15 at 22:43

score 0 · Answer 5 · answered Mar 31 '17 at 17:32

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"
]

score -1 · Answer 6 · answered Dec 03 '12 at 15:52

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?

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. — sholsinger, Jun 27 '13 at 19:54

how to remove whitespaces in HTML source code in Demandware?

6 Answers6