Meteor 1.5 beta 动态加载小试

最近看了下 Meteor 新出的 Beta.13 版本，最重要的一个新功能就是动态加载 (dynamic imports)。

什么是动态加载呢？简单来说就是在客户端需要一部分代码时才从服务端加载它们。对应的静态加载就是不管客户端暂时需不需要，只要是在代码库里的都一股脑加载到前端去。

大家如果用过 Meteor 就知道，在生产环境 Meteor 把 js 和 css 各自打包成一个巨大的文件发布，然后在客户端做渲染。这样就造成 Meteor app 的首屏加载很慢。这种模式是很有问题的，特别是在移动端上。这个动态加载就是为了解决这个问题，在前端还不需要某些代码时，就不加载。例如先加载首屏相关的代码，在其他路由、页面的代码等用户需要时再去加载。其实 Webpack 等工具早就可以实现这样的功能了。

例子代码解释

代码 Github 地址

核心代码如下：

Template.hello.events({
  'click button'(event, instance) {
    instance.counter.set(instance.counter.get() + 1);

    import("bcryptjs").then( bcryptjs => {
      const saltRounds = 10;
      const salt = bcryptjs.genSaltSync(saltRounds);
      const plaintextPassword = '123456';
      const hash = bcryptjs.hashSync(plaintextPassword, salt);
      console.log("hashed password：", hash);
    });

    import("react").then( React => {
      import moment from 'moment'
      console.log("Today is ", moment().format('YYYY-MM-DD'));

      console.log("React object: ", React);
    });
  },
});

在上面代码中，只有在用户点击了按钮之后，bcryptjs 和 react 才被加载到前端页面。大家可以自己运行一下例子试试。注意，Meteor 是通过 websocket 把后续代码传到前端的，所以要在 Chrome devtools 的 Network 选择 WS，然后点击左侧的 websocket，再查看 Frames，就可以看到如下的信息。

点击按钮前

上图就只是一些简单的信息加载。然后点击一下例子页面上的 click me 按钮，可以看到类似下图

点击按钮后

可以看到 Frames 里倒数第一和第三的数据非常大，他们就是动态加载的 bcryptjs 和 react。这样就完成了模块的按需加载。它是由 Meteor 的 dynamic-import package 完成这部分功能的。

注意

1. 通过 meteor add 添加的 package 很多还不能进行动态加载。因为包的加载方式得使用其他兼容的方式。大部分代码得修改。

2. 要通过 import().then 方式加载的包才是动态的，老的方式都会和以前一样在 Meteor 启动时就会加载。可以参考我的例子里加载的 moment 这个包，虽然是在一个 ``````import().then``` 里，但是还是被打包在了 modules.js 里，所以是一开始就被加载到浏览器。所以我的例子里只有 bcryptjs 和 react 是动态加载的。

3. 本地 export 的包记得放到 Meteor 应用的 imports 目录下，因为不在 imports 目录的模块都是 eager 加载的，就是会被 Meteor bundle 在一起发布。

4. 经过网友 Hanz 提醒，目前 Meteor 1.5 beta 版 production 模式的 dynamic imports 是加载到 Application -> Storage -> IndexedDB。大家可以使用 meteor run --production 试试看。

更多信息参考 Meteor pr 8327