Как оптимизировать комплект WebPack

Question

Я работаю над проектом Svelte, который имеет несколько страниц (на самом деле 5 разных html файлов). И я использую Snowpack для тестирования, Snowpack с Webpack для объединения, потому что у несвязанного веб-сайта слишком много (более 80) запросов из-за отдельных .jsфайл для каждого изящного компонента. для сети 4 Мбит / с 80 запросов загружаются за секунды, но все же я считаю ужасным иметь 80 запросов только на странице индекса...

Проблема в том, что я не доволен результатом Webpack. Раньше я использовал Rollup для сборки (по умолчанию Svelte) и переключился на Snowpack для более быстрой перезагрузки.

Пример результата свертки (очень мало кода дублируется из-за создания отдельного файла для каждой страницы, использующей одни и те же компактные компоненты)

Обратите внимание, что это пример, размер моего пакета приложений составляет около 750 КБ.

| 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

Webpack генерирует один большой пучок и указатель, как JS для каждой страницыi.g. внутри 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файлы представляют собой один пакет размером ~40 КБ, но я использовал отдельные CSS-файлы размером ~7-8 КБ для каждой страницы. Теперь так несчастен

Детали комплектации

Я ранее настроил Rollup для нескольких входов / выходов, и я, к счастью, получил CSS и js идеального размера для каждой страницы.

Сейчас использую @snowpack/plugin-webpack, и я плохо разбираюсь в webpack, поэтому я не могу изменить конфигурацию для своих нужд.

Желаемые результаты

Мне нужно объединить для каждой страницы, как я получил в Rollup, связка Webpack с одним большим js резко замедляет первую загрузку. Мне нужен меньший пакет для каждой страницы, дублирование кода не важно, потому что общие компоненты крошечные.Обратите внимание, что это пример, размер моего пакета приложений составляет около 750 КБ.

Answer 1

Вы можете разделить на более мелкие пакеты, определив разные точки входа, чтобы webpack знал, где разделить код. Фактически, он не только разделяется, но и сотрясает дерево, отбрасывая весь неиспользуемый код.

Чтобы определить точки входа, вам необходимо (как указано в документации):

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'),
  },
};