Webpack 如何将 0.bundle 与 main 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

PDF.js有两个部分：用于显示(pdf.js(和用于解析(pdf.worker.js(。显示零件加载pdf.worker.js通过Web Worker 或通过<script>。(后者禁用worker，这可能会导致主线程上的解析运行并导致UI锁定/卡顿(。

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

Answer 2

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

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

这将强制将代码捆绑到一个大的main.bundle.js文件中。

真诚的你(自我(，

本人。