Webpack动态导入Backbone，实现继承Backbone.View的视图类

看起来你已经走在正确的路上了——动态导入拆分Backbone chunk确实能有效减小主包体积！不过你现在遇到的核心问题是：类继承需要同步获取父类，但动态导入是异步的，直接在then回调里定义MyView的话，这个类只能在回调内部使用，外部没法方便地调用。我给你几个实用的解决方案：

方案一：封装可复用的Backbone获取函数+异步返回视图类 #

这种方式会缓存Backbone实例，避免重复加载chunk，同时让你能在需要的时候异步获取视图类：

// 缓存Backbone实例，确保只加载一次
let backboneCache = null;

// 封装获取Backbone的异步函数
async function getBackbone() {
  if (!backboneCache) {
    // Webpack会把Backbone打包到名为"backbone"的独立chunk里
    const BackboneModule = await import(/* webpackChunkName: "backbone" */ 'backbone');
    // 兼容CommonJS/ES模块导出（Backbone是CommonJS模块，Webpack会映射到default）
    backboneCache = BackboneModule.default || BackboneModule;
  }
  return backboneCache;
}

// 异步返回MyView类
async function getMyViewClass() {
  const Backbone = await getBackbone();
  
  class MyView extends Backbone.View {
    // 你的视图逻辑
    initialize(options) {
      super.initialize(options);
      this.render();
    }

    render() {
      this.$el.html('<h1>Hello from Lazy-loaded MyView!</h1>');
      return this;
    }
  }

  return MyView;
}

调用方式 #

当你需要使用这个视图时，异步获取类并实例化：

// 在需要渲染视图的地方
getMyViewClass().then(MyView => {
  const myView = new MyView({ el: '#app-container' });
});

方案二：直接导出异步创建视图实例的函数 #

如果你的场景不需要单独复用视图类，而是直接创建实例，可以把逻辑封装得更简洁：

// MyView.js
let backboneCache = null;

async function getBackbone() {
  if (!backboneCache) {
    const BackboneModule = await import(/* webpackChunkName: "backbone" */ 'backbone');
    backboneCache = BackboneModule.default || BackboneModule;
  }
  return backboneCache;
}

// 直接导出创建视图实例的异步函数
export default async function createMyView(options) {
  const Backbone = await getBackbone();
  
  return new class extends Backbone.View {
    initialize(opts) {
      super.initialize(opts);
      this.render();
    }

    render() {
      this.$el.html('<h1>Hello from Async MyView!</h1>');
      return this;
    }
  }(options);
}

调用方式 #

在其他模块中导入并使用：

import createMyView from './MyView.js';

// 当需要视图时
createMyView({ el: '#app' }).then(myViewInstance => {
  // 对视图实例进行后续操作
});

关键注意事项 #

• 缓存Backbone：一定要缓存Backbone实例，否则每次调用都会重新加载"backbone" chunk，失去代码拆分的意义。
• 模块导出兼容：Backbone是CommonJS模块，Webpack处理后会将其module.exports映射到ES模块的default属性，所以用BackboneModule.default || BackboneModule可以兼容不同的打包场景。
• 异步逻辑的处理：因为视图的创建是异步的，你需要确保在DOM准备好或者合适的时机调用这些异步函数，避免出现元素未找到的问题。

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