How to enhance your web app performance? And More!

Hey guys. How does your week going? As usual, there are lots of problem we face in week. Problems make us grow and learn more. And I am here to share what I have learnt this during my work. Learn together bit by bit!

---

Why does my style does not applied even though it is correctly set?

It is one of the most irritating problem I guess because it is so small and trivial. Yet it literally spent me (and the other) 2 days and still not figuring it out.

Here is the answer. Code Splitting

The framework we use in the project is Preact and Preact Router and webkit browser. And here is what the doc says:

"Route" components are automatically code-splitted at build time to create smaller bundles and avoid loading more code than is needed by each page. This works by intercepting imports for route components with an async loader, which returns a lightweight wrapper component that handles code splitting seamlessly.

Under investigation, we found that the style is applied after we turn off and on the style in the dev tool. So the style is there, but not correctly rendered.

To solve this we simply moved it out the routes folder and avoid the default code splitting done by Preact.

Here is another similar problem that may interest you:

https://stackoverflow.com/questions/3485365/how-can-i-force-webkit-to-redraw-repaint-to-propagate-style-changes

---

Why vscode isn’t suggesting the correct intellisense?

The problem occur when I am using CRS with typescript and cypress for testing, instead of jest, which ships together with CRS. Under the hood, cypress uses chai, but in the test file, eslint keep linting the jest syntax instead of syntax, which is annoying.

The fix is to have different tsconfig file.

// tsconfig.json
// exclude the test (unit test), spec (integration test)
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "types": ["cypress"]
  },
  "include": ["src", "node_modules/cypress"],
  "exclude": ["**/*.test.tsx"]
}


// tsconfig.cypress.json
// include only test related file
{
  "extends": "tsconfig.json",
  "compilerOptions": {
    "isolatedModules": false,
    "strict": true,
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress"],
    "noEmit": false,
    "baseUrl": "./node_modules"
  },
  "include": [
    "./node_modules/cypress",
    "src/**/*.spec.ts",
    "src/**/*.spec.tsx",
    "src/**/*.test.tsx"
  ]
}

---

How to make a the your web app lightening fast?

Here are two great articles on this topic.

The Ultimate Guide to Fixing JavaScript Performance Problems in Browser DevTools

Apply instant loading with the PRPL pattern

In addition, I created a checklist on how to enhance the website's performance. Click here to find it!

---

If you want to know what real issues I faced in work. Subscribe to the newsletter here!