@mands/hbs-html-minifier

hbs-html-minifier

Desciption

This is a Webpack plugin for Handlebars and HTML file minification. express-minify-html plugin is adding about 100ms overhead to run-time and affected site speed.

hbs-html-minifier is substitusion for express-minify-html. After Webpack build, hbs-html-minifier removes white spaces for hbs files and transfer to new directory. It minifies files during the build, so there is no impact on run-time.

Getting Started

Installation

• Add "@mands/hbs-html-minifier": "<version>" as a dependency to the package.json.
• Run npm install

Configuring

Import in your webpack.config.js file.

<!-- import on the top of the file -->
const HandleberMinifyPlugin = require('@mands/hbs-html-minifier');

Add imported plugin to plugins: as following.

plugins: [
  new HandleberMinifyPlugin([
    {
      page: 'l'  // foldername for each page (ex. fesk-plp => 'l', fesk-home-page => 'hp' etc.)
    }
  ])
]

This plugin transfers minified .hbs files to new directory, so changing server.js.

1. Setting new views.

   • server.set('views', './l/hbs/src/server/views/pages'); // This example is setting for 'fesk-plp'

2. Setting new partialDir for partials and npm_modules.

    // This is an example for fesk-plp
    partialsDir: [
        'l/hbs/src/server/views/partials',
        'l/hbs/src/server/views/partials/layouts',
        'l/hbs/src/server/views/partials/pagination',
        {
            dir: 'l/hbs/mns-core-ui-header/templates/header/partials',
            namespace: 'templates/header/partials'
        },
        {
            dir: 'l/hbs/mns-fe-patterns',
            namespace: 'mns-fe-patterns'
        }
    ]