Lessons learned from projects

What was learned over time for the projects.

Large JS Chunks in Walcron website

Issues we faced

Page speed reported initial load JS for Walcron was large.
Page load was slow when throttled with slow 3G.

Analysis did

Check on browser the file size loaded. Found one of the big chunk goes up-to 837kb.
Ran `npm run analyze`, which was configured in next.config.js. Shows the big chunk was due to typescript ~902kb to load.
The whole project was written in typescript, but strangely it should was imported and wasn' compiled! Then did a search and found a file importing the WHOLE typescript !
Check alternative to find how 'eval' can be replaced. Unlike lodash, transpile is included only in typescript. Apparently eval can be replaced, it's actually Function.Global_Object
const evaluatedResult = Function(“"use strict";return ${mathEval}”)() return evaluatedResult
Replaced code with Function and file size was fixed!

Testing with Object.defineProperty

Test suite that have Object.definedProperty override on certain behaviours cannot be redefined. If test case runs after it's used hence it cannot be erased.


 describe( "test", () => {
   it("should one", ()=>{console.log(navigator.share)}) // = undefined 
   it("should two", ()=> {Object.defineProperty(window.navigator, "share"...}) 
   it("should three", ()=>; {console.log(navigator.share)}) // = function (); 
 }

Jest Library Mock import must always be the first

Jest mocked import for library order is important and must always be the first to override the import of the original 3rd party library.


 import "../__mocked__/pusherMock"; //mock library must be the first.
 import X from "someComponentThatUsesPusher"
 --OR--
 jest.mock('pusher', () => class Pusher{});
 import Pusher from 'pusher'; //then only it takes effect.

Jest library with 3rd party library import under NEXT.JS is unsolvable

Error of `Cannot use import statement outside a module`, cannot be solved at the moment when 3rd party library are executed via mock. Only solution is to mock the whole library with jest.mock('whole library').

GIT commands

https://www.internalpointers.com/post/squash-commits-into-one-git


            git rebase --interactive HEAD~3

React Suspense

A new way to handle asynchronous response. But take notes on this:

For it to work with NextJS, it needs to load via client side. Hence a need to use dynamic/lazy import.
due to dynamic import, one will face a problem if directly routed of:A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.. To overcome it (sample in pageComponents/*/SnakeGame.tsx) it, simply wrap it in another Suspense tag
```
<Suspense><LazyLoadedComponent/></Suspense>
```