搜索到
1
篇与
的结果
-
rollup.js的个人理解 rollup也是一款静态资源打包工具。作用和webpack一样，但是比webpack轻量化。rollup和webpack的区别：webpack是一个静态资源打包器，从入口文件开始，webpack仅支持打包js，我们通过一个个loader打包其他不同类型的资源，通过插件实现额外的功能，最终将项目的所有文件编译成一个或多个文件输出出去。rollupjs也是静态资源打包成一个文件，rollup因为使用的前端模块化的方式是esm，于是有了tree shaking 特性。webpack由于要兼容commonjs，commonjs引入是全量引入，所以没有tree shakingwebpack 功能更加丰富，并且通过丰富的插件生态，如代码分割，适用于复杂场景和项目。rollup 更加轻便，它通过静态分析和Tree Shaking等技术，将代码模块按需打包，消除未使用的代码，以减小最终生成的包的体积。rollupjs 使用静态分析在编译时就确定依赖关系（所以在打包时会出现一下额外的依赖定义）webpack是运行时才进行依赖查找，所以在速度上会比较慢vite 是webpack的一个替代品。出现的原因是esm的出现和浏览器对esm的支持，使得在开发时运行不需要真正的编译，浏览器可以直接编译esm，所以在开发环境里，vite只是使用提供了开发服务器。生产环境下，vite 使用rollup进行代码编译。为了在生产环境中获得最佳的加载性能，最好还是将代码进行 tree-shaking、懒加载和 chunk 分割（以获得更好的缓存）。vite最大的特点是：冷启动热更新，生产环境用rollup，所以是tree shaking和静态分析。Tree ShakingTree Shaking技术其实就是代码按需打包技术，就是在打包过程中，只打包实际使用的代码，从而减少打包的体积。Tree Shaking的基础，我个人理解Tree Shaking的技术基础就是esm，正是esm的特性（具体如下），所以在打包过程中，可以做到区分代码是否用到。 Tree Shaking利用esm的特性：导入导出机制：ESM输出的是值的引用，这意味着如果模块内部的变量值发生变化，这些变化将反映到使用该变量的外部环境中。CommonJS输出的是值的拷贝，即使模块内部的值发生变化，外部环境中拷贝的值不会受到影响。依赖加载（解析）机制：ESM是编译时输出接口，而CommonJS是运行时加载。这意味着ESM在代码静态解析阶段就确定了模块的依赖关系，而CommonJS在运行时才解析模块依赖。ESM的import命令是异步的，而CommonJS的require()是同步的。这意味着ESM在加载模块时会分开模块的构建、实例化和执行，而CommonJS会同步加载整个模块Tree Shaking实现步骤（以Rollup的Tree Shaking实现方式举例）1. 识别依赖关系 ：在打包过程中，工具（如Rollup）会分析每个模块中的导入和导出语句，构建出一个模块依赖图。这个图记录了每个模块之间的依赖关系。2. 标记被使用的代码 ：通过静态分析技术，工具会遍历依赖图，并标记哪些变量、函数、类等被实际使用了。这些标记可以是通过变量引用、函数调用等方式进行识别。3. 剔除未使用的代码 ：根据标记结果，工具会将未被使用的代码从最终生成的文件中剔除掉。这些未使用的代码可能是整个模块、模块中的某些函数或类等。4. 优化输出结果 ：在剔除未使用代码后，工具会对输出结果进行进一步优化。它可能会进行变量重命名、函数内联等操作，以进一步减少文件大小和提高执行效率。Tree Shaking原理的核心在于静态分析和标记未使用代码。通过对模块依赖关系的分析，工具可以确定哪些代码是被实际使用的，哪些是未使用的。这种静态分析是在编译时进行的，因此可以在打包过程中进行优化，而不需要运行时的额外开销。需要注意的是，Tree Shaking只能消除那些在编译时可以确定未使用的代码。对于动态导入、条件导入等情况，工具可能无法准确判断哪些代码会被使用。因此，在使用Tree Shaking时，开发者需要注意编写可静态分析的代码，以确保最终生成的文件能够得到有效优化。由于是静态分析，所以我们在写代码的时候，需要注意自己的写法，简单来说，尽量的使用最小导入，例如，下面两个代码打包是不一样的：// 直接导入整个对象 import _ from 'lodash'; console.log(_.max([4, 2, 8, 6])) // 具名导入具体的函数 import { max } from 'lodash'; console.log(max([4, 2, 8, 6]))
