分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

uuidjs 打包过大问题探究

发布时间:2023-09-06 02:25责任编辑:白小东关键词:js

入职新公司一周了,我靠没啥活让我干啊,说好的加班呢?

今天一个小活挺有意思的,记录下。项目中打包后有个文件过大,怀疑是 uuidjs 在作祟(嗯,事实也确实如此),但是排查过程中踩了几个坑如下:

  • 项目中引用了 uuidjs,同时引用了 uuid,一开始以为只有 uuid,导致一直在用 uuid 做测试,以后看代码 debug 还是得仔细啊
  • 用 uuidjs 写了个基础的 sample,webpack 一打包,发现 300k
  • uuidjs 并没有依赖其他包,文件 也就 300 行,最后发现是引用了 require("crypto")(搜索 require 即可)
  • 为什么会这样?本身 uuidjs 只是用于 node 服务端,现在如果搞来客户端,然后用 webpack 打包,就会使 webpack adds a browser compatible version of the node crypto module to my bundle。而实际上,客户端也是有 crypto 这个全局变量的

如何解决这个问题?替换成 uuid 是可行的,这强烈的引起了我的好奇心,为啥 uuid 可以?

看了下 uuid 的代码,也有 require("crypto")(详见 这里)而且并没有做额外处理啊,为啥他可以?

经过对比,测试,终于发现了原因,你妹的 package.json 有个 browser 选项,可以在客户端环境的时候替换文件(详见 这里)于是我简单地修改了 uuid 库,提了个 PR

另外,为了分析这个问题,用了下 webpack-bundle-analyzer。事实上 nuxt 项目可以 直接开启 ,但是对于今天的分析并没有什么卵用,因为 uuidjs 本身没有依赖的,用 webpack-bundle-analyzer 分析的依赖(比如 bn.js),都是 adds a browser compatible version of the node crypto module to my bundle 中产生的依赖,是 webpack 中做的处理(加的 polyfills)

下图为简单地打包 uuidjs 的结果:

另外的另外,在查这个问题的时候,还发现了一个 有意思的帖子(讨论的内容可能已经过时)

uuidjs 打包过大问题探究

原文地址:https://www.cnblogs.com/zichi/p/10073746.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved