9 工程化
bundleless少打包或者不打包 esm有了浏览器的支持才有bundleless方案
webpack会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。
而vite是直接启动开发服务器，请求哪个模块再对该模块进行实时编译。 由于现代浏览器本身就支持ESModule，会自动向依赖的Module发出请求。vite充分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并。 由于vite在启动的时候不需要打包，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快。 当浏览器请求某个模块时，再根据需要对模块内容进行编译。这种按需动态编译的方式，极大的缩减了编译 时间，项目越复杂、模块越多，vite的优势越明显。 在HMR方面，当改动了一个模块后，仅需让浏览器重新请求该模块即可，不像webpack那样需要把该模块的相关依赖模块全部编译一次，效率更高。 当需要打包到生产环境时，vite使用传统的rollup进行打包，因此，vite的主要优势在开发阶段。另外，由于vite利用的是ESModule，因此在代码中不可以使用CommonJS
Webpack
webpack scope hoisting
webpack作用域优化
scopehoisting是webpack的内置优化，它是针对模块的优化。在生产环境打包时会自动开启。 在未开启scopehoisting时，webpack会将每个模块的代码放置在一个独立的函数环境中，这样是为了保证模块的作用域互不干扰。 scope hoisting的作用恰恰相反是把多个模块的代码合并到一个函数环境中执行。在这一过程中，webpack会按照顺序正确的合并模块代码，同时对涉及的标识符做适当处理以避免重名。 这样做的好处是减少了函数调用，对运行效率有一定提升，同时也降低了打包体积。 但scope hoisting的启用是有前提的，如果遇到某些模块多次被其他模块引用，或者使用了动态导入的模块，或者是非ESM的模块，都不会有scopehoisting。
模块联邦
用于解决微前端，不同模块之间代码复用问题 在webpack5提出的，是webpack的一个插件：ModuleFederationPlugin
贡献者
pinkdopeybug版权所有
版权归属：
