阅读 3622

webpack多页面项目开发按需编译

使用 webpack 进行打包已经成为了不少项目的首要选择,在处理单页面的时候,一切都很ok,我们团队的成员只对一个页面负责,那么每次编译这个页面也就是必然的事情了。但是,如果团队正在开发的是多页面项目,那么如果只修改一个页面的话,就编译所有的页面,这就显得不是很合理了。

我们在优化项目的时候,有一种手段是按需加载。他讲的是什么呢?就是说比如一个长列表,只加载可视区的数据,这样能够更快的处理数据。那这种思路,我们也是可以借鉴的,只加载需要的页面。恰好 webpack 提供了一个 before 钩子,通过这个钩子,我们可以知道 webpack 目前正在处理哪个页面,从而实现按需加载。

大概的流程是:先通过 webpack 的 entry 入口拿到所有的真实页面入口,然后再将这些入口地址缓存起来,然后根据项目的页面创建一个暂时的入口地址,并将文件置空。这样子,webpack 的 entry 里面的页面地址实际上是一个个的空文件,什么也加载不到,如下:

这个时候,我们在webpack 的 before 钩子中去监听所要加载的页面,并将真实的地址写入到之前我们创建的那个空文件夹去,如下图所示:

写入之后,空文件里面的内容变成了如下:

到此按需编译就完成了。

结果对比:

按需前:

按需后:

其他干货文章

如何实现react中类似的事件合成

文章分类
前端
文章标签