Vue2 体积优化实践：用懒加载 Loader 按需引入 v-viewer

1/* viewerLoader.js */
2import Vue from 'vue';
3let viewerInstallPromise = null;
4/**
5 * 确保 v-viewer 插件已正确安装到 Vue 实例
6 */
7export function ensureViewerInstalled() {
8  // 1. 检查是否已经挂载了核心 API（代表已安装）
9  if (Vue.prototype.$viewerApi) return Promise.resolve();
10  // 2. 利用单例 Promise 解决并发安装问题
11  if (!viewerInstallPromise) {
12    viewerInstallPromise = Promise.all([
13      // 使用 webpackChunkName 将脚本和样式合并打包
14      import(/* webpackChunkName: "lib-viewer" */ 'v-viewer'),
15      import(/* webpackChunkName: "lib-viewer" */ 'viewerjs/dist/viewer.css')
16    ])
17      .then(([mod]) => {
18        const ViewerPlugin = mod.default || mod;
19        
20        // 执行插件安装
21        Vue.use(ViewerPlugin);
22        
23        console.log('Viewer plugin loaded and installed.');
24      })
25      .catch((err) => {
26        // 安装失败重置 Promise，允许用户下次重试
27        viewerInstallPromise = null;
28        throw err;
29      });
30  }
31  return viewerInstallPromise;
32}

1// Gallery.vue
2import { ensureViewerInstalled } from '@/utils/viewerLoader';
3export default {
4  methods: {
5    async handlePreview(images) {
6      try {
7        // 等待加载器完成使命
8        await ensureViewerInstalled();
9        
10        // 此时插件已安装，可以安全调用原型方法
11        this.$viewerApi({
12          options: {
13            toolbar: true,
14            navbar: false,
15          },
16          images: images
17        });
18      } catch (error) {
19        this.$message.error('资源加载失败，请检查网络');
20      }
21    }
22  }
23}