一种基于原生ES模块构建前端代码的方法技术

本发明专利技术公开了一种基于原生ES模块构建前端代码的方法，包括以下：(1)将应用中的模块区分为依赖和源码两类，改进了开发服务器启动时间；依赖大多为在开发时不会变动的纯JavaScript；一些较大的依赖(例如有上百个模块的组件库)处理的代价也很高；依赖也通常会存在多种模块化格式(例如ESM或者CommonJS)；(2)使用预构建依赖；预构建依赖比以JavaScript编写的打包器预构建依赖快10

【技术实现步骤摘要】
一种基于原生ES模块构建前端代码的方法


[0001]本专利技术涉及计算机
，特别涉及一种基于原生ES模块构建前端代码的方法。

技术介绍

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

技术实现思路

[0004]本专利技术要解决的技术问题是克服现有技术本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于原生ES模块构建前端代码的方法，其特征在于，包括以下步骤：(1)将应用中的模块区分为依赖和源码两类，改进了开发服务器启动时间；大多数依赖项是纯JavaScript，在开发过程中不会改变；一些较大的依赖项(例如具有数百个模块的组件库)处理起来也很昂贵；依赖项通常有多种模块化格式(例如ESM或CommonJS)；(2)使用预构建依赖；预构建依赖可以比以JavaScript编写的打包器预构建依赖快10
‑
100倍；源代码通常包含一些不是直接JavaScript的文件，需要转换(如JSX、CSS或Vue/Svelte组件)，并且经常被编辑；同时，并不是所有的源码都需要同时加载(比如基于路由拆分的模块)；使用原生ESM方式提供源代码，实际上可以让浏览器接管打包程序的部分工作：只需要在浏览器请求源代码时进行转换，按需提供源代码；根据情况动态导入代码，即实际只在当前屏幕上使用时才会处理；随着应用量的增长，整...

【专利技术属性】
技术研发人员：童长胜，丁丹丹，鲁嘉睿，
申请(专利权)人：天翼电子商务有限公司，
类型：发明
国别省市：