0

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

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

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

请注意，这是示例，我的应用程序包大小约为 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，例如 在 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。现在好不开心

捆绑详情

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

现在我使用@snowpack/plugin-webpack，并且我对 webpack 不太了解，所以我无法根据需要修改配置..

期望的结果

我需要为每个页面捆绑，就像我在Rollup中一样，带有一个大 js 的Webpack捆绑会显着减慢第一次加载。我希望每个页面的包更小，代码重复并不重要，因为共享组件很小。 请注意，以上是示例，我的应用程序包大小约为 750kb

4

1 回答 1

0

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

要定义入口点，您需要（如文档中所述）：

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'),
  },
};
于 2020-11-07T17:25:53.210 回答