Difference between revisions of "pas2js minifier"

From Lazarus wiki
Jump to navigationJump to search
(Started tipps and tricks for reducing js code size)
 
Line 16: Line 16:
  
 
As an example here is how to use uglifyjs with pas2js:
 
As an example here is how to use uglifyjs with pas2js:
 +
 +
==Windows==
 +
 +
* Download and install "node" form https://nodejs.org/en/download/
 +
* Start the "Node.js command prompt". This starts a console, which is setup with an environment for ''Node.js'' and ''npm''.
 +
* In the prompt type
 +
npm install uglify-js -g
 +
and press <enter>
 +
This will download and install uglifyjs as a command line app. Test it by typing
 +
uglifyjs -h
 +
This should give the list of uglifyjs options.
 +
* After install restart applications like Lazarus so they get the new PATH, which is needed by uglifyjs to work.
 +
* Find out the path of uglifyjs.cmd, for example by typing ''where uglifyjs''
 +
* With pas2js 1.1: In Lazarus add to the custom compiler options '''"-JpcmdC:\path\of\uglifyjs.cmd"'''. Note that ''-Jpcmd'' is case sensitive.
 +
* With pas2js 1.0: Set the ''Execute After'' command: ''C:\path\of\uglifyjs.cmd -oproject1.js project1.js''. Replace ''project1.js'' with the name of your js file.
 +
 +
==Linux/MacOS==
 +
 +
*Install npm
 +
*Open a terminal and do:
 +
sudo npm install uglify-js -g
 +
This will download and install uglifyjs as a command line app. Test it by typing
 +
uglifyjs -h
 +
This should give the list of uglifyjs options.
 +
* With pas2js 1.1: In Lazarus add to the custom compiler options '''"-Jpcmduglifyjs"'''.
 +
* With pas2js 1.0: Set the ''Execute After'' command: ''uglifyjs -oproject1.js project1.js''. Replace ''project1.js'' with the name of your js file.

Revision as of 17:49, 19 November 2018

Overview

This page explains ways to reduce and/or compress the pas2js generated JavaScript.

Omit unneeded code

  • Use pas2js option -Jc to generate one JavaScript program. This allows the compiler to use Whole Program Optimization (wpo) to determine all unused identifiers.
  • Use -O1 to omit unused identifiers. If a record/class is used, every unused member/method is omitted.
  • By default published properties/methods are kept and will generate type information (RTTI). If you don't need that you can ...
    • use {$modeswitch omitrtti} (since pas2js 1.1), which treats class section 'published' as 'public' and typeinfo() does not work on symbols declared with this switch.
    • use -OoRemoveNotUsedPublished to omit all published properties not referenced at compile time.

Third party minifier

There are several free minifiers for JavaScript. A minifier removes unneeded characters and replaces some code without changing its functionality.

As an example here is how to use uglifyjs with pas2js:

Windows

  • Download and install "node" form https://nodejs.org/en/download/
  • Start the "Node.js command prompt". This starts a console, which is setup with an environment for Node.js and npm.
  • In the prompt type
npm install uglify-js -g

and press <enter> This will download and install uglifyjs as a command line app. Test it by typing

uglifyjs -h

This should give the list of uglifyjs options.

  • After install restart applications like Lazarus so they get the new PATH, which is needed by uglifyjs to work.
  • Find out the path of uglifyjs.cmd, for example by typing where uglifyjs
  • With pas2js 1.1: In Lazarus add to the custom compiler options "-JpcmdC:\path\of\uglifyjs.cmd". Note that -Jpcmd is case sensitive.
  • With pas2js 1.0: Set the Execute After command: C:\path\of\uglifyjs.cmd -oproject1.js project1.js. Replace project1.js with the name of your js file.

Linux/MacOS

  • Install npm
  • Open a terminal and do:
sudo npm install uglify-js -g

This will download and install uglifyjs as a command line app. Test it by typing

uglifyjs -h

This should give the list of uglifyjs options.

  • With pas2js 1.1: In Lazarus add to the custom compiler options "-Jpcmduglifyjs".
  • With pas2js 1.0: Set the Execute After command: uglifyjs -oproject1.js project1.js. Replace project1.js with the name of your js file.