Loads compressed JavaScript files to the page, whenever possible directly from the cache memory.

Description

Using the tag improves theme performance, especially if e.g. multiple JavaScript libraries are used.

By default, the {MinifyJS} tag also prints the scripts printed by the {SupportScripts} tag.

See also the {MinifyCSS} tag with which you can add compressed CSS files to the page.

Syntax

{MinifyJS(
    files: string,
    mode: string,
    support_scripts: boolean
)}

Scope

Required scope: globaali

Tags with global scope can be used on any template and in any tag.

Loading minified theme scripts

{MinifyJS(
    files:'js/jquery.171.min.js|js/mcf.main.js|js/mcf.checkout.js',
    mode: 'development'
)}

While still developing the theme, keep the value of the {MinifyJS} tag's mode attribute set to 'development' so that scripts won't be loaded from the cache but directly from the server at each page load. In this way, all changes will become visible in the theme immediately.

Once the theme has been developed and the website is about to be published, you may want to change the value of the {MinifyJS} tag's mode attribute to 'production' to improve the theme's performance by loading compressed scripts, whenever possible directly from the cache memory.

{MinifyJS(
    files:'js/jquery.171.min.js|js/mcf.main.js|js/mcf.checkout.js',
    mode: 'production'
)}

Attribuutit

files:

Defines which files should be loaded by the tag.

The attribute's values are pipe separated file locations in relation to the theme's root directory.

E.g. files:'js/jquery.171.min.js|js/mcf.main.js|js/mcf.checkout.js'

mode:

Defines a state for the tag based on which files are loaded either as packed or unpacked.

Allowed values:

  • 'production': In production, files are loaded compressed from the cache.
  • 'development': In development, files are loaded anew at every page load, so that potential changes become visible immediately.
support_scripts:

Sets the tag to print also all JavaScript files printed by the {SupportScripts} tag. In such case, there is no need to add the {SupportScripts} tag to the theme separately.

Allowed values:true/false. The default value is true. The scripts are printed if the value is set to true.

after/before:

By using the after and before attributes you can define content that is output either after or before the tag's output.

Allowed values:The HTML and Interface markup

E.g.

  • before: '<p>Tämä merkkaus näkyy ennen tagin omaa sisältöä.</p>'
  • after: '<p>Tämä taas näkyy tagin oman sisällön jälkeen.</p>'

If the tag does not produce any content, neither the content of the after and before attributes will be output.

escape:

Adds an escape character before quotation marks in the output.

The attribute makes it easier to process the tag-produced content when using JavaScript.

Allowed values:true/false. The default value is false.

or:

Defines alternative content that is displayed if the tag itself does not produce any content.

Allowed values:The HTML and Interface markup

E.g. or:'Sisältöä ei löytynyt.'