如何优化WebPack包

Question

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

问题是我对Webpack的结果不满意。我以前使用过Rollup进行捆绑(Svelte )，并为了更快地重新加载而切换到了积雪包。

汇总结果示例(由于为每个使用相同svelte组件的页面生成单独的文件，所以很少重复代码)

请注意，这是一个例子，我的应用程序包大小大约为750 is 。

| 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为每页 i.g生成一个大的包和指针状的js。在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 8kb的包，但是我过去常常为每个页面分别获得7-8KB的css。现在太不开心了

捆绑细节

我以前为多个输入/输出配置了Rollup，我很高兴地为每个页面配置了理想大小的css和js。

现在我使用@snowpack/plugin-webpack，我对webpack没有很好的理解，所以我不能根据我的需要修改配置。

期望的结果

我需要为每一页捆绑，就像我在Rollup，Webpack包与一个大js大大减缓了第一次加载。我想要每个页面更小的包，代码欺骗并不重要，因为共享组件很小。请注意，上面的例子是，我的应用程序包大小大约为750 is 。

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