优雅地按需加载月半的脚本模块-ECharts

还记得在AngularJS，React，Vue出来之前，脚本模块化还不是一件很普遍的事情，按需加载脚本模块通常也不太容易。虽然那时候还在项目中研究过一阵子，但是转向React开发后，貌似又丢回去了。这次也是难得的机会，把这些遗忘的知识再捡一下，并且做好笔录。

本来没有特意要去做这件事情，但是最近在做项目中的一个图表功能模块，选择ECharts作为图表插件。功能确实实现了，但是还是难免被ECharts 1MB大小的文件尺寸给震惊了。尤其是在1Mb带宽的测试服务器上8s多的加载时长，估计换作任何人都是令人绝望的。所以想着提升一下性能是有必要的。

最开始，我还是考虑缩减ECharts的脚本尺寸，这通常是比较容易的做法。虽然我使用的脚本已经是mini版本，但是ECharts还是提供了比较友好的定制功能。所以尝试了一下选择了三个基本的图表类型和特性后，发现脚本依然有600多KB的尺寸。所以我想这条路到这里估计是结束了。

所以最后选择了按需动态加载脚本。

项目需求

需求其实很简单。首先我有一个图表数据分析的二级功能，这个功能不会在页面首次加载的时候直接展示，而是折叠在其他功能里，在交互时候才会展示。因此其实ECharts并不是一个必要的脚本代码。只有我们需要展示图表功能的时候才需要去展示。其次ECharts脚本文件尺寸太大，如果通过静态的

图表 1 ECharts脚本文件大小

解决思路

在解决这个问题之前，我大致有两种思路，一种是在document中动态插入

动态插入

标签

最先我尝试动态插入

通过jQuery getScript动态加载脚本文件

在尝试了动态插入

$.getScript("js/echarts.min.js", () => {
            if (window.echarts) {
                this.load = true;
                this.emit("changed", this.load);
            }
});

这种方式确实很简单。我指定了ECharts脚本url后，通过监听事件中我就可以检测ECharts有没有成功加载。使用getScript有一个好处就是简单方便，而且脚本会自动执行。但是我也发现一些不足之处。第一，脚本文件加载后会立马引入全局变量中，可能会造成全局污染。第二，getScript无法做到脚本缓存，所以如果刷新页面，那么getScript会二次加载脚本文件，因为getScript每次请求脚本文件的时候在url中都会追加一个时间戳。显然第二点对于ECharts这种全局使用的静态脚本文件而言不是很理想。

图表 2 getScript的不缓存

通过RequireJS优雅的加载

正因为在上面的方法中存在不理想的情况，所以我死马当活马医尝试了第三种方法。其实我也没有想到它会有用，并且解决了那一点不理想。

首先，我们需要在页面上使用

然后，我们需要配置RequireJS，并且让它按需加载我们的脚本。

window.require.config({
            paths: {
                "echarts": "js/echarts.min"
            }        
});         
window.require(['echarts'], (echarts) => {
            if (echarts) {
                window.echarts = echarts;
                this.load = true;
                this.emit("changed", this.load);
            }
});

当然，RequireJS在使用中也碰到一些问题。主要有两点：一是我在React项目中使用了RequireJS，RequireJS的入口模块和NodeJS中的require模块产生了冲突，所以使用window.require代替，从而让NodeJS避免认为require是内建的require。二是RequireJS加载脚本后并不会引入到全局变量中，这一步需要自己按需处理。

图表 3 RequireJS的按需加载

总结

当然，我知道有很多其他的按需加载的方式，甚至Webpack和NodeJS中就可以做到这一点。上面的方法也未必是最优的，但是对于目前我来说足够了。也许以后我可以学到更好的方法，可以和大家分享一下。