LWC: File size restriction on js file

Question

Today when deploying our code base we've run into the following error:

lwc/orderGrid/orderGrid.js-meta.xml -- Error: Failed to save Lightning Component Resource 
[lwc/orderGrid/orderGrid.js] of Lightning Component Bundle [orderGrid]. 
Error: Value too long for field: Source maximum length is:131072

Looking at the size of file in question it is really bigger than 131,072 bytes. But we cannot find in documentation anything regarding limit for js file as a part of lwc component.

Can anyone point us in the right direction? Is it a real restriction or just some SF bug?

Answer 1

I don't know where this is documented, but it is true that each file may not exceed 131072 characters of data; this is a limitation that a lot of people have experienced, here and elsewhere on the Internet (e.g. this git repo makes mention of it).

This is presumably because the maximum length of the database row the source is stored in is 131072 characters long. You will need to split your component into multiple, smaller components to get under this maximum limit. The design principles of LWC is that you have many smaller components that make up the large components, so this limitation makes sense from that design philosophy.

This is a per-file limit, as demonstrated in this question where the metadata file was too large. No one component should be trying to do "too much", as composition is the intended design philosophy.

Answer 2

Winter '25 Update (v62.0)

We can now have js files up to 1 MB (1,000,000 bytes).

A Lightning web component JavaScript file now has a maximum file size of 1 MB (1,000,000 bytes). Previously, the file size limit was 128 KB (131,072 bytes).

Release Notes

Doco

Answer 3

This misleading error happens if you have an SFDX project inside of another SFDX project and attempt to deploy an LWC. This can happen if you try to make a new project while working on an LWC. The default directory is the LWC itself, so the project ends up nested.

I figured this out when I helped someone who was stuck on Trailhead with this problem. They had a habit of making a new SFDX project whenever something went wrong. I noticed that their project directory structure looked like C:/Users/Personal/Desktop/My Project/force-app/main/default/lwc/My Project2/force-app/main/default/lwc ... and so on for many iterations. I suggested moving the codebase to its own folder by navigating back to the Desktop when making the new project. The LWC deployment succeeded with that new SFDX project even though the code and metadata in the package was unchanged.

Answer 4

1. You have to remove all blank spaces because if you have many characters of spaces (" ") the file size might be larger and the browser will have to load a larger file, which takes more time.

2. You will use the ternary operator on behalf of the if/else statement.

3. You will make another js to initialize variable and import from another js.

4. You have to move some function in another js, so we can make it light in terms of character count.