better tree-shaking... compile ts to ESM (before bundling)

[ChristopherChudzicki]

Pre-Flight checklist

• Testing
  • Changes have been manually tested I have not tested that sentry actually reads these source maps; I think we can wait till for QA servers for that.

What are the relevant tickets?

Related to #1033, #1034

What's this PR do?

This PR changes the way we compile TS before being bundled by webpack: In our tsconfig, we had module set to CommonJS, whereas it should be set to ES6 As the Webpack Typescript docs say,

Warning
ts-loader uses tsc, the TypeScript compiler, and relies on your tsconfig.json configuration. Make sure to avoid setting module to "CommonJS", or webpack won't be able to tree-shake your code.

How should this be tested

There should be no noticeable changes, other than that the output of yarn build:webpack should be a bit smaller.

You could...

1. Check the site still looks ok at on the netlify builds
2. If you want:

   • Run yarn build:wepback. It should succeed and the js file sizes (ls -lh base-theme/dist/js) should be a bit smaller than they are on main branch.

   • Run a site in production mode on this branch, e.g., by

     1. Build a site for production. Assuming your ocw-content-rc and ocw-hugo-projects directories adjacent to ocw-hugo-themes, yarn build abs/path/to/9.40-spring-2018 abs/path/to/ocw-hugo-projects/ocw-course-v2/config.yaml
     2. Serve the built course: npx serve path/to/9.40-spring-2018/dist.
     3. Open the url that serve displayed in your terminal and check that the soruce code is viewable:

     Again, there should be no noticeable changes.

Background Info

The "module" config setting tells Typescript what module syntax to use when compiling TS files into JS files. Specifying ES6 means use ES6 import/export. Note: This ES6 import syntax does not end up in the final bundles. Again, from Webpack docs](https://webpack.js.org/concepts/manifest/):

No matter which module syntax you have chosen, those import or require statements have now become webpack_require methods that point to module identifiers.

The advantage of compiling TS to JS is better tree-shaking (removal of unused code). It's not a huge difference at the moment:

                commonjs    es6
main.js	        323 kb	    313 kb																							
www.js	        580 kb	    516 kb      <-- biggest difference																				
course_v2.js	866 kb	    864 kb																							

but it's free, and I expect in the future it could matter more. (For example: I came across this issue while working on #1037, which I have decided to set aside. While working on #1037 , I found that because of changes in how Sentry organizes their code in v7, we Sentry v7's footprint on our bundle would be 54kb instead of 20kb without this config change.)

[github-actions]

Netlify Deployments:
www: https://ocw-hugo-themes-www-pr-1044--ocw-next.netlify.app/
Course v1: https://ocw-hugo-themes-course-pr-1044--ocw-next.netlify.app/
Course v2: https://ocw-hugo-themes-course-v2-pr-1044--ocw-next.netlify.app/

[github-actions]

Lighthouse results:

results for https://ocw-hugo-themes-www-pr-1044--ocw-next.netlify.app/:

Accessibility	Best Practices	Performance	Progressive Web App	SEO
100 💯	83 😄	59 😟	20 😱	79 🙂

results for https://ocw-hugo-themes-www-pr-1044--ocw-next.netlify.app/search/:

Accessibility	Best Practices	Performance	Progressive Web App	SEO
93 🎉	92 🎉	75 🙂	30 😰	93 🎉

results for https://ocw-hugo-themes-course-v2-pr-1044--ocw-next.netlify.app/:

Accessibility	Best Practices	Performance	Progressive Web App	SEO
80 😄	92 🎉	92 🎉	30 😰	76 🙂

[ChristopherChudzicki]

If you're interested and want to see this in action with our config (but with something more readable than our actual bundles), you can check out https://github.com/mitodl/ocw-hugo-themes/tree/cc/ts-esm-experiment. That branch defines three new files (just for testing):

// example_dog.js
export const dog = 'dog'
export const woof = (n: number) => 'woof'.repeat(n)

// example_cat.js
export const cat = 'cat'
export const meow = (n: number) => 'meow'.repeat(n)

// example_entry.js imports from cat and dog
// but does not use all of cat
import { cat } from "./example_cat"
import { dog, woof } from "./example_dog"

console.log(cat, "...?")

console.log(dog, woof(3))

Note that the meow function is unused. If you run the webpack build:

• if tsconfig module: commonjs, meow is included in the build output
• if tsconfig module: ES6, meow will be omitted

[pt2302]

Looks good to me!