BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

利用Webpack插件进行前端code-splitting

| 作者 sunderls 关注 0 他的粉丝 发布于 2018年1月4日. 估计阅读时间: 10 分钟 | ArchSummit北京2018 共同探讨机器学习、信息安全、微服务治理的关键点

写在前面

大家好,我是LINE漫画的JavaScript开发工程师@sunderls。

这是LINE Advent Calendar 2017的第22日的文章。今天我介绍一个webpack loader - grow-loader。 之前在LINE漫画:通过Page Stack实现流畅的页面切换这篇文章中介绍过,LINE应用内部的漫画APP使用的是web技术。

为了提供接近于原生APP的体验,我们进行了很多尝试。今天介绍下我们是如何实现code-splitting的。

为什么要做code-splitting

LINE漫画之前一直将JS打包为一个bundle文件,随着应用变得越来越复杂,页面越来越多,bundle文件变得越来越大。考虑到未来可能还会更复杂,打包到一个文件这种方式变得很不合适。所以就开始了分割。

一般的实现

最开始我们也尝试了react-loadable之类的HOC(Higher Order Component)方法,不过遇到了一些问题:

1. 页面切换动画效果的即时性消失

原因很清楚。用户的操作之后才开始加载下一个页面,所以这一段加载时间会让人感觉延迟。对于LINE漫画而言这是致命的。

2. preload可以尽心一定程度的改善,但是长页面的话preload也无能为力

用户的点击操作发生之前,提前加载(preload)可能跳转到的页面的话,可以避免用户能感觉到的加载时间。但是,LINE漫画应用中页面非常多,每一个页面都去添加preloa代码非常麻烦难以管理,而且提前加载一些用户根本没有点击的页面也是某种低效率的体现。

另外如果页面比较长的话,DOM生成时间比较明显,提前加载也不能解决这个问题。

3. 可以采用统一的加载图标(Loading Indicator)来保证即时性,不过LINE漫画应用不好利用

LINE漫画几乎每个页面都有各自的Placeholder Component,所以使用统一的加载图标将是某种用户体验上的倒退。Placeholder Component的实现上采用的是模拟数据,而不是HOC的方式所以也不能很简单的分割。

4. 自定义componnet hook没法很简单的支持

为了实现用户点击的瞬时反馈,LINE漫画采用了Page Stack的页面组织方式,提供了componentHide的自定义hook。如果用HOC的方式进行代码分割的话,为了保证这些hook,Router等很多部分都需要修改。尝试了过后发现改动太大就放弃了。

总而言之,LINE漫画非常非常重视体验上的流畅。

LINE漫画的解决办法

分析了以上问题,我们可以得到如下结论:

  1. 每个页面的placeholder如果能够保留在main bundle中的话,流畅性不会下降
  2. 每个页面的placeholder以外的部分能够分隔开的话,较长的页面也会因为两次render,初回显示也会变得更快
  3. 手动进行文件分割感觉不太可行,那就用一个loader自动分割好了。

于是乎grow-loader诞生了。

grow-loader简介

通过grow-loader,只需要在需要分割的方法上添加decorator @grow即可。

以下是例:

class SampleClass {

    @grow
    methodToGrow() {
        // ...
    }

    @grow
    methodToGrowAndBind = () => {
        // ...
    }

    methodToBeBundled(){

    }
}

使用了grow-loader的话,以上的class会被如下处理:

  1. @grow标记的两个方法(methodToGrowmethodToGrowAndBind)会被分割到另外一个文件
  2. 新方法grow()会被添加到class中。调用该方法后,分割出去的两个方法会被dynamic import回来。

以下是使用例:

const sample = new SampleClass();
console.assert(a.methodToGrow === undefined);
console.assert(a.methodToGrowAndBind === undefined);

sample.grow().then(() => {
    sample.methodToGrow();
    sample.methodToGrowAndBind();
});

React中的使用方法

以上例子作为基础,React Component环境下的代码分割也可以简单的实现。

比如,有如下组件

export default class LongPage extends React.Component {

    methodToGrow() {
        // ..
    }

    methodToGrowAndBind = () => {
        // ..
    }

    methodToBeBundled(){
        // ...
    }

    render(){
        return <div>
            this is a very long page
        </div>
    }
}

首先,做一个公用的base组件:

class GrowablePage extends React.Component {
    // componentDidMountの時点でロードを始める。
    componentDidMount() {
        if (this.grow) {
            this.grow().then(() => {
                this.hasGrown = true;
                this.forceUpdate();
            });
        }
    }
}

然后将render()进行适当的分割,然后在适合动态加载的方法上用@grow标记,比如这样:

export default class LongPage extends GrowablePage {

    @grow
    methodToGrow() {
        // ...
    }

    @grow
    methodToGrowAndBind = () => {
        // ...
    }

    methodToBeBundled(){
        // ...
    }

    @grow
    renderMore() {
        return <div>
            this is below the first view
        </div>
    }

    render(){
        return <div>
            this is basic part
            { this.hasGrown ? this.renderMore() : null}
        </div>
    }
}

grow-loader使用后的效果

grow-loader只是进行了代码变化而已,实际能够让bundle size减少多少取决于使用方法。从上面的粒子上可以看出,render()的内容被分割的越多,@grow()使用的越多,分割效率就会越高。

LINE漫画使用grow-loader后,entry bundle文件size下降了15%。这没有一般的HOC分割效果效果,但是由于页面的两次渲染,我们的首页的mount时间(constructor()componentDidMount()的时间下降了40%,加上使用方法上的简单和灵活,我们觉得可以接受。

写在最后

grow-loader已经在GitHub上公开,有兴趣的同学还请尝试一下,如果有bug或者更好的建议,可以直接创建issue告诉我们。


感谢徐川对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ@丁晓昀),微信(微信号:InfoQChina)关注我们。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT