如何优化WebPack捆绑包 汇总结果示例由于为使用相同的精简组件的每个页面生成了单独的文件，因此很少重复代码 Webpack结果示例 webpack.config.js：

问题描述

我正在研究一个svelte项目，该项目有多个页面（实际上是5个不同的html文件） 我正在使用 SNowpack 进行测试，将 SNowpack 与 Webpack 进行捆绑，因为未捆绑的网站由于单独的{{ 1}}文件中的每个苗条组件。对于4mbps的网络，几秒钟内即可加载80个请求，但我仍然认为仅在索引页面上有80个请求是可怕的...

问题是我对 Webpack 的结果不满意。我以前使用 Rollup 进行捆绑（默认为svelte），并切换到SNowpack以便更快地重新加载。

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

请注意，这是示例，我的应用程序捆绑包大小约为750kb

.js

Webpack结果示例

Webpack为每个页面生成一个大包和类似指针的js 例如在index.js内

| 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 |

(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 | 文件是一个〜40kb的文件包，但是我过去通常为每页分别获取〜7-8kb的CSS。现在很不开心?

捆绑详情

我以前为多个输入/输出配置了汇总，但是我很高兴最终在每个页面上都拥有了理想大小的CSS和JS。

现在我使用CSS，而且我对webpack的了解不多，因此我无法根据需要修改配置。

所需结果

我需要为每个页面捆绑，就像我在 Rollup ， Webpack 捆绑中添加一个大js一样，大大降低了第一次加载的速度。我希望每个页面都有较小的包，代码重复并不重要，因为共享组件很小。 请注意，上面是示例，我的应用程序捆绑包大小约为750kb

解决方法

您可以通过定义不同的入口点来拆分成较小的包，因此webpack将知道在哪里拆分代码。实际上，它不仅会拆分，而且还会摇摇晃晃，从而丢弃所有未使用的代码。

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