Allow tree shake using module : "es6"

[JackNgWeiMing]

Thank you author for making this template, it saved me a lot of time and helped me get started developing the extension.

I was trying to figure out why @tabler/icons-react is not tree-shaked. A solution I came across is to change tsconfig.json :

// content_script.tsx

// @ts-ignore
import { Icon123 } from "@tabler/icons-react";

chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
  if (msg.color) {
    console.log(Icon123);
    console.log("Receive color = " + msg.color);
    document.body.style.backgroundColor = msg.color;
    sendResponse("Change color to " + msg.color);
  } else {
    sendResponse("Color message is none.");
  }
});

// tsconfig.json
{
  // ...other configs
  "moduleResolution": "bundler",
  "module": "ES6",
}

It helped reducing the both build time and bundled size . Might be a good improvement to this template

For the setting "moduleResolution": "bundler" : typescript/webpack can not to resolve the node module properly after changing the to module setting. Adding "moduleResolution": "bundler" helped fix the issue. It does require to bump the typescript version to 5 and above.

Test repo: https://github.com/JackNgWeiMing/chrome-extension-typescript-starter-1/tree/test-tree-shake

Before

After