js压缩工具 jszip

为什么又造个轮子？

为什么要构建JaScript构建工具？因为目前的Web构建工具至少比用户期望的性能慢一个数量级。我希望这个项目可以作为一种“存在的证明”，证明我们的JaScript工具实际上可以比现在快得多。

基准测试

我想到的用例是打包一个大的代码库用于生产。这个过程包括压缩代码以减少网络传输时间和生成源映射(这对于生产中调试错误非常重要)。理想情况下，构建工具还应该能够在不预热缓存的情况下快速构建。

我的主要基准将复制three.js库10次，并在没有任何缓存的情况下从头开始构建单个包，从而模拟大型代码库。在这个基准测试中，euild比我测试的其他JaScript打包程序(Webpack、Rollup、packagers和FuseBox)快10-100倍。该基准可以使用“make bench-three”来运行。

时间数据是三个操作中最好的，主要操作环境如下:

使用’–bundle –minify –sourcemap’来运行 euild。使用’rollup-plugin-terser’插件，因为 rollup 自身不支持压缩。Webpack 使用的是’–mode = production –devtool = sourcemap’。Parcel 使用默认选项。FuseBox 使用’useSingleBundle: true’配置。绝对速度基于总行数（包括注释和空白行），当前为 547,441。测试是在配备 16GB RAM 的 6 核 2019 MacBook Pro 上完成的。为什么这么快？

几个原因:

它是用 Go 语言编写的，该语言可以编译为原生代码；解析，打印和源映射生成全部完全并行化；无需昂贵的数据转换，只需很少的几步即可完成所有操作；编写代码时处处注意速度表现，并尽量避免不必要的配置。状态

目前支持:

CommonJS 模块ES6 模块使用’–bundle’与 ES6 模块的静态绑定打包使用’–minify’完全压缩（空格、标识符和修饰符）启用’–sourcemap’时，完全支持源映射.jsx 文件的 JSX 到 JaScript 转换通过’–define’进行编译时标识符替换使用 package.json 中的’browser’字段进行路径替换自动检测 tsconfig.json 中的’baseUrl’

这是我2019-2020年寒假写的爱好。我相信是比较完整实用的。但它是全新的代码，可能会有很多错误。还没有人在生产中使用过。使用风险自担。

请记住，它并不完全支持将现代语言语法简化为早期语言版本。目前，仅支持类字段和nullish合并运算符。

就我个人而言，我不想运行一个大型的开源项目，所以我目前不打算寻求贡献。

安装

如果你已经安装了Go工具链，你可以使用’ make ‘来生成可执行文件。预构建的二进制文件目前在npm上的单独包中提供:

npm install -g euild-linux-64 #对于Linux NPM Install-g euild-Darwin-64 #对于ma cosnpm Install-g es build-Windows-64 #对于Windows NPM Install-g es build-wa #对于所有其他平台，这将添加一个名为“es build”的命令。

用法

命令行界面获取入口点列表，并为每个入口点生成一个包文件。以下是可用的选项:

复制代码

用法:euild [options] [entry points]选项:-name =…模块名称- bundle将所有依赖项打包到一个输出文件中-outfile =…输出文件(用于一个入口点)-outdir =…输出目录(用于多个入口点)。- sourcemap发出一个源映射- error-limit= =…最大错误计数，0表示禁用(默认值为10)-目标=…language target(默认值为es next)-minify sets all-minify-* flags-minify-white space removal空Case-minify-identifiers缩短标识符- minify-syntax使用较短的等效语法-define: k = v解析时，替换K – jsx-factory= =…替换react . createelement-jsx-fragment = =…来代替。React的内容。片段跟踪=…在此文件中写入CPU跟踪-CPU配置文件=…在此文件中编写一个CPU配置文件示例:# produce dist/Entry _ point . js和dist/Entry _ point . js . map euild-bundle Entry _ point . js-outdir = dist-minify-source map配合React使用es build配合React使用:

确保所有 JSX 语法都放在.jsx 文件而不是.js 文件中，因为 euild 使用文件扩展名来确定要解析的语法。如果你使用的是 TypeScript，请先运行’tsc’以将.tsx 文件转换为.jsx 或.js 文件。如果你使用 euild 打包 React 自身，而不是在 HTML 中使用 <script> 标记添加它，则需要传递 ‘–define:process.env.NODE_ENV=“development”’ 或’–define:process.env.NODE_ENV=“production”'以在命令行上运行 euild。如果你使用的是 Preact 而不是 React，则还需要传递–jsx-factory = preact.h –jsx-fragment = preact.Fragment 在命令行上运行 euild。

例如，如果您有一个名为example.jsx的文件，它包含以下内容:

然后进行开发和构建:

复制代码

es build example . jsx-bundle & # 39；-define:process . ENV . node _ ENV = & # 34；发展& # 34；'- outfile=out.js用于生产构造:

复制代码

es build example . jsx-bundle & # 39；-define:process . ENV . node _ ENV = & # 34；生产& # 34；'- minify – outfile=out.js关注我并转发本文，私信我“获取资料”，即可免费获得InfoQ价值4999元的迷你本！

文末了解更多获取GitHub原地址