vue-pdf-app延迟加载

### 如何优化 `vue-pdf-app` 的延迟加载性能

#### 使用 Webpack 动态导入实现按需加载 PDF 组件

为了提高应用的初始加载速度并改善用户体验，在 Vue.js 应用程序中可以采用懒加载的方式引入第三方库，比如 pdf.js 或者其他用于显示 PDF 文档的相关插件。对于 `vue-pdf-app` 这样的组件来说，可以通过动态 import() 来实现其异步加载。

// 路由配置文件 router/index.js 中定义路径对应的组件时使用函数形式返回 Promise 对象来代替直接指定组件对象
{
  path: '/pdf-viewer',
  name: 'PdfViewer',
  component: () => import(/* webpackChunkName: "pdf-viewer" */ '@/components/PdfViewer.vue')
}

当用户导航到 `/pdf-viewer` 页面时才会触发该模块的实际下载过程[^1]。

#### 配置 Webpack 提取公共代码减少重复体积

如果多个地方都依赖于同一个版本的 pdf.js，则应该考虑将其作为 vendor chunk 单独打包出来以便共享缓存：

编辑项目的根目录下的 `vue.config.js` 文件（如果没有则创建），加入如下配置项以分离 vendors chunks:

module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        cacheGroups: {
          commons: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all'
          }
        }
      }
    }
  }
};

这会使得所有来自 node_modules 的包都被提取成单独的一个 js 文件[vendors.js], 减少每次请求不必要的数据传输量的同时也提高了浏览器端的缓存利用率[^2].

#### 加载前展示占位符或预览图

考虑到大型 PDF 文件可能需要较长时间才能完成渲染，可以在实际内容准备就绪之前先给出一些视觉反馈给访问者知道正在发生什么。例如，可以用简单的灰色矩形框模拟文档外观尺寸；或者是提前准备好一张缩略版封面图片放在那里等待替换为真实的第一页扫描图像。

<div v-if="loading">
  <!-- 显示 loading spinner -->
</div>
<img :src="thumbnailUrl" alt="PDF Preview Thumbnail"/>
<vue-pdf-app ref="pdfApp"></vue-pdf-app>

结合以上方法能够有效降低首屏渲染时间，并让用户感受到更流畅的操作体验。