How can I optimize WebPack bundle

I'm working on a Svelte project, which has multiple pages (5 different html files really) And I am using Snowpack for testing, Snowpack with Webpack for bundling because unbundled website have too many (over 80) requests due to separate .js file for each svelte component. for 4mbps net, 80 request loads within seconds, but still I think it is horrible to have 80 requests just on index page...

Problem is I'm not happy with the result from Webpack. I previously used Rollup for bundling (Svelte default) and switched to Snowpack for faster reloading.

Rollup result example (Very few code is duplicated due to generating separate file for each page that uses same svelte components)

Please note that this is example, my app bundle size is around 750kb

| Page       | Bundled JS                      | Size   |
|------------|---------------------------------|--------|
| index.html | index.js                        | ~40kb  |
| page1.html | page1.js                        | ~70kb  |
| page2.html | page2.js                        | ~100kb |
| page3.html | page3.js                        | ~50kb  |
| **TOTAL**  | One ideal sized JS for one page | ~260kb |

Webpack result example

Webpack generates one big bundle and pointer-like js for each page i.g. inside the index.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[4],[],[[112,1,0]]]);

| Page       | Bundled JS                     | Size   |
|------------|--------------------------------|--------|
|            | bundle.**some_hash**.js        | ~270kb |
| index.html | index.js                       | 1kb    |
| page1.html | page1.js                       | 1kb    |
| page2.html | page2.js                       | 1kb    |
| page3.html | page3.js                       | 1kb    |
| **TOTAL**  | One big messy js for each page | ~270kb |

CSS files are one ~40kb bundle, but I used to get seperate ~7-8kb css for each page. Now so unhappy 😭

Bundling Details

I previously configured Rollup for multiple input/outputs, I happily ended up having ideally sized css and js for each page.

Now I use @snowpack/plugin-webpack, and I do not have good understanding about webpack, so I cannot modify the config for my needs..

Desired results

I need to bundle for each page, like I got in Rollup, Webpack bundle with one big js slows down the first load dramatically. I want smaller bundle for each page, code dupe is not important because shared components are tiny. Please note that above is example, my app bundle size is around 750kb

You can split into smaller bundles by defining different entrypoints, so webpack will know where to split the code. In fact, it does not only splits, but also does a tree-shake, throwing away all the code not used.

To define the entrypoints, you'll need to (as stated in the docs):

webpack.config.js:

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js',
   another: './src/another-module.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};