如何优化 WebPack 包

Question

我正在开发一个 Svelte 项目，它有多个页面（实际上有 5 个不同的 html 文件） 我正在使用 Snowpack 进行测试，Snowpack 与 Webpack 进行捆绑，因为未捆绑的网站有太多（超过 80) 个请求，因为每个 svelte 组件都有单独的 .js 文件。对于 4mbps 网络，80 个请求在几秒钟内加载，但我仍然认为仅在索引页面上有 80 个请求是可怕的...

问题是我对 Webpack 的结果不满意。我之前使用 Rollup 进行捆绑（默认为 Svelte）并切换到 Snowpack 以加快重新加载速度。

汇总结果示例（由于为使用相同 svelte 组件的每个页面生成单独的文件，因此很少有重复代码）

请注意，这是示例，我的应用程序包大小约为 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 结果示例

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 文件是一个 ~40kb 的包，但我曾经为每个页面单独获得 ~7-8kb css。现在好不开心

捆绑详情

我之前为多个 input/outputs 配置了 Rollup，我很高兴最终为每个页面设置了理想大小 css 和 js。

现在用的是@snowpack/plugin-webpack，对webpack不是很了解，所以没法根据自己的需要修改config..

想要的结果

我需要为每个页面打包，就像我在 Rollup 中得到的那样，Webpack 与一个大 js 一起打包会减慢第一次加载戏剧性地。我希望每个页面都有更小的包，代码重复并不重要，因为共享组件很小。 请注意以上是示例，我的应用程序包大小约为 750kb

Answer 1

您可以通过定义不同的入口点拆分成更小的包，这样 webpack 就会知道在哪里拆分代码。其实不只是拆分，还做了一个tree-shake，把没用到的代码都扔掉

要定义入口点，您需要（如 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'),
  },
};