Webpack 如何将 0.bundle 与主包组合 (PDFJS)

Question

我将默认的 PDFJS 库与 webpack 一起使用，并根据本教程做了一些工作： https://github.com/mozilla/pdf.js/tree/master/examples/webpack

我尝试使用 webpack 将所有内容捆绑到一个模块中，但甚至使用以下配置指定一个入口点...

entry: {
  'main': './src/main.ts',
  // 'pdf.worker': 'pdfjs-dist/build/pdf.worker.entry',
},
output: {
  path: path.join(__dirname, 'dist'),
  filename: '[name].bundle.js',
}
[...]

webpack 在我的 /dist 目录中创建了两个 js 文件

0.bundle.js
main.bundle.js

如果我从主代码中删除行 import { PDFJS } from 'pdfjs-dist/web/pdf_viewer.js'（这是我唯一且重要的依赖项），则不会再创建 0.bundle.js 文件，但当然我的代码 不再工作.

问题

是什么导致 webpack 将东西捆绑到两个模块中，即使我不想这样做，我该如何避免它？

注意：保持这种方式不是解决方案，因为这是我必须在只能授权一个入口文件的平台上解决的问题（不要问我为什么）。

提前致谢。

Answer 1

我发现当代码库太大时，webpack 会自动创建块。尽管您可能会牢记这一点以优化您的应用程序，但添加以下 webpack.config.js 文件是完全可行的，甚至是可以接受的。

plugins: [ new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }) ],

这将强制将代码打包到一个大 main.bundle.js 文件中。

此致（自己），

我自己。

Answer 2

PDF.js有两部分：显示（pdf.js）和解析（pdf.worker.js）。通过 Web Worker 或通过 <script> 显示部件负载 pdf.worker.js。（后者禁用 worker，这可能导致在主线程上解析运行并导致 UI locking/jank）。

在 Webpack 上下文中，pdf.js 包含在主包中，pdf.worker.js 被编译为工作包和附加包以替换脚本标签加载（参见 https://webpack.js.org/guides/code-splitting/）。通过删除后一个包，您可以杀死 pdf.worker.js 部分（负责解析）。通过将其添加到主包，您将增加主包的大小，从而增加页面初始加载时间（或冒主线程卡顿的风险）。

Webpack 如何将 0.bundle 与主包组合 (PDFJS)

Webpack how to combine 0.bundle with main bundle (PDFJS)

pdf.js

webpack