一种基于原生ES模块构建前端代码的方法与流程

一种基于原生es模块构建前端代码的方法
技术领域
1.本发明涉及计算机技术领域，特别涉及一种基于原生es模块构建前端代码的方法。


背景技术：

2.在浏览器支持es模块之前，需要使用前端构建(打包)工具对源代码模块进行处理，生成一个或多个bundle(打包模块)。因为javascript没有提供原生机制让开发者以模块化的方式进行开发；现在主流的构建(打包)工具，如webpack、rollup、parcel等，大大提升了前端开发体验。
3.然而，随着我们开始构建越来越大的应用程序，需要处理的javascript代码量也呈几何级增长。包含数千个模块的大型项目很常见。我们开始遇到性能瓶颈——使用javascript开发的工具通常需要很长时间，甚至几分钟才能启动开发服务器。即使使用hmr(hot module replacement)，修改文件的效果也需要几秒钟。它反映在浏览器中。在这样的循环中，缓慢的反馈会极大地影响开发者的开发效率。如图4所示。


技术实现要素：

4.本发明要解决的技术问题是克服现有技术的缺陷，提供一种基于原生es模块构建前端代码的方法，浏览器开始原生支持es模块，且越来越多javascript工具使用编译型语言编写；本方法旨在利用生态系统中的新特性解决上述问题。
5.本发明提供了如下的技术方案：
6.本发明提供一种基于原生es模块构建前端代码的方法，包括以下步骤：
7.(1)将应用中的模块区分为依赖和源码两类，改进了开发服务器启动时间；
8.大多数依赖项是纯javascript，在开发过程中不会改变；一些较大的依赖项(例如具有数百个模块的组件库)处理起来也很昂贵；依赖项通常有多种模块化格式(例如esm或commonjs)；
9.(2)使用预构建依赖；预构建依赖可以比以javascript编写的打包器预构建依赖快10-100倍；
10.源代码通常包含一些不是直接javascript的文件，需要转换(如jsx、css或vue/svelte组件)，并且经常被编辑；同时，并不是所有的源码都需要同时加载(比如基于路由拆分的模块)；
11.使用原生esm方式提供源代码，实际上可以让浏览器接管打包程序的部分工作：只需要在浏览器请求源代码时进行转换，按需提供源代码；根据情况动态导入代码，即实际只在当前屏幕上使用时才会处理；
12.随着应用量的增长，整个包的重建效率会变得很低，更新速度会直线下降；
13.一些打包器开发服务器将构建内容存储在内存中，这样当文件改变时他们只需要去激活模块图的一部分，但仍然需要重建和重新加载页面；这代价高昂并且重载页面消除
了应用程序的当前状态，因此打包器支持动态模块热重载(hmr)：允许模块“热替换”自身而不影响页面的其余部分；这大大提升了开发体验——但在实践中发现，即使采用hmr模式，其热更新速度也会随着应用规模的增长而显着下降；
14.在本方法中，hmr是在原生esm上执行的，只需替换已经修改过的模块，使得无论应用大小如何，hmr始终能保持快速更新；
15.(3)同时，利用浏览器的缓存来加速整个页面的重新加载；
16.在整个应用程序开发期间，相关模块几乎没有变化；http头cache-control:max-age＝2626560，所以一旦缓存，就不需要再次请求；
17.源码模块的请求则根据http请求来进行协商缓存。
18.与现有技术相比，本发明的有益效果如下：
19.本发明改进了开发服务器启动时间的方法；以原生esm方式提供源码；开发服务器源码快速更新的方法；利用浏览器缓存来加速页面的重新加载；预构建依赖。
附图说明
20.附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明的实施例一起用于解释本发明，并不构成对本发明的限制。在附图中：
21.图1是本发明的开发服务器构建流程图；
22.图2是本发明的基于bundle的开发服务器(dev server)示意图；
23.图3是本发明的基于原生es模块的开发服务器(dev server)示意图；
24.图4是本发明的webpack构建示意图。
具体实施方式
25.以下结合附图对本发明的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本发明，并不用于限定本发明。其中附图中相同的标号全部指的是相同的部件。
26.实施例1
27.如图1-4，本发明提供一种基于原生es模块构建前端代码的方法，包括以下步骤：
28.(1)将应用中的模块区分为依赖和源码两类，改进了开发服务器启动时间；
29.依赖大多为在开发时不会变动的纯javascript；一些较大的依赖(例如有上百个模块的组件库)处理的代价也很高；依赖也通常会存在多种模块化格式(例如esm或者commonjs)；
30.(2)使用预构建依赖；预构建可以比以javascript编写的打包器预构建依赖快10-100倍；
31.源码通常包含一些并非直接是javascript的文件，需要转换(例如jsx，css或者vue/svelte组件)，时常会被编辑；同时，并不是所有的源码都需要同时被加载(例如基于路由拆分的代码模块)；
32.采用原生esm方式提供源码，实际上是让浏览器接管了打包程序的部分工作：只需要在浏览器请求源码时进行转换并按需提供源码；根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理；见图1；
33.随着应用体积增长，重建整个包的效率变得很低，更新速度也会直线下降；
34.一些打包器的开发服务器将构建内容存入内存，这样它们只需要在文件更改时使模块图的一部分失活，但它也仍需要整个重新构建并重载页面；这样代价很高，并且重新加载页面会消除应用的当前状态，所以打包器支持了动态模块热重载(hmr)：允许一个模块“热替换”它自己，而不会影响页面其余部分；这大大改进了开发体验——然而，在实践中发现，即使采用了hmr模式，其热更新速度也会随着应用规模的增长而显著下降；
35.在本方法中，hmr是在原生esm上执行的，只需替换已经修改过的模块，使得无论应用大小如何，hmr始终能保持快速更新；
36.(3)同时，利用浏览器的缓存来加速整个页面的重新加载；
37.依赖模块在整个应用开发期间内改动很小，通过添加http头cache-control:max-age＝2626560,进行强缓存，因此一旦被缓存它们将不需要再次请求；
38.源码模块的请求则根据http请求来进行协商缓存。
39.最后应说明的是：以上所述仅为本发明的优选实施例而已，并不用于限制本发明，尽管参照前述实施例对本发明进行了详细的说明，对于本领域的技术人员来说，其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。