Reduce JS Size With Constant Strings

Do Repeated string literals in the JavaSript codebase increase the final file size? Yes, they do. Does it matter? Not for the backend applications, but for frontend applications – and anything that contributes towards them – it does. For example, npm packages and directly loaded scripts, server-side rendered web applications, and SPAs such as Angular, React, and Vue.

The difference may not be huge, but we can save a few bytes from the files and some kilobytes from the final bundle by refactoring our codebase, saving the end users of our applications valuable network bandwidth.

In the two code examples below, I show their size in bytes in minified forms before and after refactoring the code.

I’ve used https://www.uglifyjs.net/ for code minification and http://bytesizematters.com/ to calculate the final code size.

Example 1

Say we have a JS file with several methods. String "admin" and "active" are repeated several times throughout the file as many of the methods use them.

const method1 = ({ role }) => {
  if (role === "admin") {
    // ...
  }
}

const method2 = ({ role }) => {
  if (role !== "admin") {
    return `Unauthorized. Role not admin.`
  }
}

const method3 = ({ role, status }) => {
  if (role !== "admin" && status === "active") {
    return `Contact admin.`;
  }
}

const method4 = ({ role, status }) => {
  if (role === "admin" || status === "active") {
    // ...
  }
}

const method5 = ({ role }) => {
  if (role === "admin") {
    // ...
  }
}

const method6 = ({ status }) => {
  if (status === "active") {
    // ...
  }
}

const method7 = ({ role, status }) => {
  if (role !== "admin" && status === "active") {    
    // ...
  }
}

The minified version of this code is 411 bytes.

Let’s refactor the code. Assign the repeated string literals into const variables at the top, and replace them throughout the file.

const ADMIN = "admin";
const ACTIVE = "active"; 

const method1 = ({ role }) => {
  if (role === ADMIN) {
    // ...
  }
}

const method2 = ({ role }) => {
  if (role !== ADMIN) {
    return `Unauthorized. Role not ${ADMIN}.`
  }
}

const method3 = ({ role, status }) => {
  if (role !== ADMIN && status === ACTIVE) {
    return `Contact ${ADMIN}.`;
  }
}

const method4 = ({ role, status }) => {
  if (role === ADMIN || status === ACTIVE) {
    // ...
  }
}

const method5 = ({ role }) => {
  if (role === ADMIN) {
    // ...
  }
}

const method6 = ({ status }) => {
  if (status === ACTIVE) {
    // ...
  }
}

const method7 = ({ role, status }) => {
  if (role !== ADMIN && status === ACTIVE) {    
    // ...
  }
}

Now the minified code is 378 bytes, we just saved 33 bytes!

Example 2

We have a method that returns a success message on opening a support ticket. The message has different wording for different priorities.

const getSuccessMessage = ({ priority }) => {
  if(priority === "p0"){
    return "Thank you for opening the ticket! Our support staff will contact you in few hours."
  }
  if(priority === "p1"){
    return "Thank you for opening the ticket! Our team will get back to you within 24 hours."
  }
  if(priority === "p2"){
    return "Thank you for opening the ticket! We typically respond to p2 requests in 2-3 business days."
  }
}

The minified code is 346 bytes.

A big part of the message string is being repeated "Thank you for opening the ticket!", which we can put into a variable. After refactoring:

const getSuccessMessage = ({ priority }) => {
  const thanksMsg = "Thank you for opening the ticket! ";
  if (priority === "p0") {
    return `${thanksMsg}Our support staff will contact you in few hours.`
  }
  if (priority === "p1") {
    return `${thanksMsg}Our team will get back to you within 24 hours.`
  }
  if (priority === "p2") {
    return `${thanksMsg}We typically respond to p2 requests in 2-3 business days.`
  }
}

The minified code size becomes 301 bytes, saving us 45 bytes.

refactoring javascript

Reduce JS Size With Constant Strings

Refactor for micro-optimization of frontend packages, scripts, and bundles.

Example 1

Example 2

See also