ES6动态导入会增大打包体积？PDF.js异步导入后新增Chunk疑问

嘿，我来帮你梳理下这个问题～ 你遇到的情况其实不是操作“有误”，而是对动态导入的加载时机和打包工具的处理逻辑理解有点偏差，下面给你拆解清楚：

核心问题：立即执行的异步导入并没有实现“按需加载” #

你把动态导入的代码放在了主入口的立即执行async函数里：

(async () => {
  const pdfjsWorker = await import('pdfjs-dist/build/pdf.worker.entry');
  const pdfjsLib = await import('pdfjs-dist/build/pdf');
  pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
  // Code using pdfjsLib here...
})();

这段代码会在页面初始化时就立刻触发PDF.js相关模块的下载，打包工具（比如Webpack）会把PDF.js的主库、worker拆分成独立chunk，但本质上和同步导入的区别只是“异步加载”，而不是“按需加载”——用户打开页面时还是会下载这600KB的内容，并没有减少初始加载体积。

为什么会生成三个Chunk？ #

这是打包工具对PDF.js内部依赖的正常拆分：

• pdfjs-dist/build/pdf 是主库代码
• pdfjs-dist/build/pdf.worker.entry 是独立的worker线程代码
• 第三个Chunk可能是PDF.js依赖的一些公共工具库或polyfill，被打包工具单独拆分出来了

正确的优化方向：把动态导入绑定到“实际触发事件”上 #

动态导入的核心价值是用到的时候再加载，比如把这段代码放到用户触发的事件里（比如点击“打开PDF”按钮），这样只有当用户需要查看PDF时，才会下载这些Chunk，示例代码如下：

// 假设页面有一个打开PDF的按钮
document.getElementById('open-pdf-btn').addEventListener('click', async () => {
  // 只有点击时才开始加载PDF.js相关模块
  const pdfjsWorker = await import('pdfjs-dist/build/pdf.worker.entry');
  const pdfjsLib = await import('pdfjs-dist/build/pdf');
  
  pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
  
  // 这里写具体的PDF处理逻辑，比如加载并渲染文档
  const pdfDoc = await pdfjsLib.getDocument('your-pdf-file.pdf').promise;
  const page = await pdfDoc.getPage(1);
  // ...后续渲染代码
});

额外的体积优化建议 #

• 开启代码压缩与Tree Shaking：确保你的打包工具（Webpack/Vite等）开启了生产环境压缩，并且Tree Shaking生效，剔除PDF.js中未被使用的代码。
• 使用CDN加载Worker：可以把Worker的来源指向CDN，避免打包进自己的Chunk，比如：

  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.worker.min.js';
  

  这样就不需要动态导入worker模块，减少一个Chunk的体积。
• 检查Chunk拆分配置：如果使用Webpack，可以调整splitChunks配置，合并一些小的公共依赖，不过按需加载场景下，合理的拆分反而有助于缓存。

内容的提问来源于stack exchange，提问作者gremo