bencoveney / ts-react-boilerplate

Boilerplate project configuration using TypeScript, Webpack, React and including linting.
https://bencoveney.github.io/ts-react-boilerplate/
MIT License
2 stars 0 forks source link

Improve install speed and size #18

Closed bencoveney closed 6 years ago

bencoveney commented 6 years ago

package.json is getting fairly large - can we trim anything out?

> npm install
...
added 1195 packages from 808 contributors in 157.752s

> npm test
...
webpack --config webpack.prod.ts --mode production
...
Time: 32929ms

Webpack dev server performance is still fairly good 👍

bencoveney commented 6 years ago

Could try npm dedupe and npm shrinkwrap.

https://webpack.js.org/guides/build-performance/

Combining npm scripts

bencoveney commented 6 years ago

https://github.com/siddharthkp/cost-of-modules

bencoveney commented 6 years ago
> cost-of-modules --include-dev --less

┌───────────────────────────┬───────────────┬─────────┐
│ name                      │ children      │ size    │
├───────────────────────────┼───────────────┼─────────┤
│ css-loader                │ 202           │ 100.84M │
├───────────────────────────┼───────────────┼─────────┤
│ webpack-cli               │ 554           │ 65.70M  │
├───────────────────────────┼───────────────┼─────────┤
│ favicons-webpack-plugin   │ 225           │ 52.77M  │
├───────────────────────────┼───────────────┼─────────┤
│ typescript                │ 0             │ 34.24M  │
├───────────────────────────┼───────────────┼─────────┤
│ babel-core                │ 76            │ 20.53M  │
├───────────────────────────┼───────────────┼─────────┤
│ webpack-dev-server        │ 494           │ 18.59M  │
├───────────────────────────┼───────────────┼─────────┤
│ webpack                   │ 225           │ 13.00M  │
├───────────────────────────┼───────────────┼─────────┤
│ babel-preset-env          │ 140           │ 11.43M  │
├───────────────────────────┼───────────────┼─────────┤
│ awesome-typescript-loader │ 215           │ 11.36M  │
├───────────────────────────┼───────────────┼─────────┤
│ html-webpack-plugin       │ 55            │ 7.42M   │
├───────────────────────────┼───────────────┼─────────┤
│ + 34 modules              │               │         │
├───────────────────────────┼───────────────┼─────────┤
│ 44 modules                │ 1002 children │ 166.32M │
└───────────────────────────┴───────────────┴─────────┘
bencoveney commented 6 years ago

https://www.npmjs.com/package/webpack-bundle-analyzer

https://medium.com/comparethemarket/how-to-reduce-your-bundle-size-by-automatically-getting-your-dependencies-from-a-cdn-96b25d1e228

bencoveney commented 6 years ago

Some improvements have been made in d40cde7d398894b740e96d411ae003c94f2967a8

See #19 and #20 for follow up issues.