跟同事弃用webpack一次 体积减少了10倍
写在开头
何谓难题?将两个水火不相容的东西强行融合在一起,将两个原理完全冲突的东西强行混合在一起的时候,需求不合理的时候
例如:通过用户的手机壳更换主题颜色
又例如:让马儿跑但是不让马儿吃草
故事的开头
后端同事,在用nodejs做个服务,但是他又做成了镜像(docker容器化了),而且是按需冷启动(即:当有人访问的时候,才启动这个服务),现阶段用的nest.js这个框架,打包出来以后,需要把整个node_modules都copy进去容器,这样导致容器很大~
此时打包工具是
webpack
开始
一开始是他在寻找webapck配置,发现各种配置行不通。打包nodejs项目不能像前端那样,直接只生成静态文件,不用携带node_modules文件夹
核心需求
想要打包nodejs时候,不携带node_modules这个完整文件夹,轻量化,把node_modules代码打包进nodejs项目源码中
国内解决方案
分层构建打包docker镜像之类的,并不能满足
问题分析
nodejs采用的是commonjs模块化方案,当然目前es6模块化也是可以跑的,在服务端运行时候,启动命令是:
node index.js
要想nodejs能顺利跑起来,起码保证,index.js代码和它的依赖都是commonjs或者es6模块化方案 这是底线
目前一些npm库是commonjs的模块化方案,并非es6模块化,我们这里暂且都看成commonjs规范。
这里同事目前用到的是wepback,那么webpack打包时候,其实会把ES6之类的模块化规范,根据配置,输出构建成自己实现的一套模块化规范。
阅读下面内容之前,可以看我之前的手写webpack系列(带源码和讲解):https://github.com/JinJieTan/Peter-/tree/master/mini-webpack
我们先复习下webpack
webpack打包过程
1.识别入口文件
2.通过逐层识别模块依赖。(Commonjs、amd或者es6的import,webpack都会对其进行分析。来获取代码的依赖)
3.webpack做的就是分析代码。转换代码,编译代码,输出代码
4.最终形成打包后的代码
我们可以看到,下面是打包后生成的图谱对象,原生的require在浏览器中是无效的
而在node环境下打包,在webpack打包后生成的代码,必须保留require这个关键字,那么就不能把node_modules里面的文件打包进源码中,否则就不是commonjs或es6模块化规范了,node的代码就跑不起来了。
问题解决思路
从上面可以看出,webpack的原理和nodejs运行、以及我们的需求,是冲突的。
所以我们不能通过webpack把node_modules代码打包进nodejs项目源码中
怎么办? 学习马斯克的思维模式,如果这个东西频繁出现问题,或者这个问题解决不了,那能不能不解决这个问题,直接跳过。弃用webpack呢?
解决
当然可以。不行就换
最终解决
弃用webpack,使用了pkg
这个库来打包解决问题
pkg是为在容器中使用而创建的
可以将 Node.js 项目打包为可执行文件,即使在未安装 Node.js 的设备上也可以运行该可执行文件
默认情况下,源代码在写入输出文件之前会预编译为 v8 字节码
使用pkg,无需下载数百个文件npm install,即可部署应用程序。将其部署为单个文件,这样我们就可以
最终打包构建成了二进制文件以及一些优化后,打包后镜像内的文件从400MB压缩到了几十MB,提升将近10倍,https://github.com/vercel/pkg
npm的未来
npm这个依赖管理 - node_modules黑洞,一直是一个诟病,我相信未来在webContainer
技术加持下,可能会找到突破方向,之前我写过一篇文章 - 面向未来的开发模式(不仅前端)
通过这个技术,进入next项目,从安装依赖到启动,只要几秒钟时间,要知道如果是在日常的开发中,这个时间可能会需要几分钟
感兴趣的可以打开手机,搜索前端巅峰公众号
,打开公众号首页,搜索文章:面向未来的前端开发模式 - 写于2021年
写在最后
在工作中遇到不合理的需求或者两个原理冲突的技术栈要果断学会放弃一些东西,每个技术都有它的使用场景,并没有好坏之分
❤️ 谢谢支持
以上便是本次分享的全部内容,希望对你有所帮助^_^
喜欢的话别忘了 分享、点赞、收藏 三连哦~。
欢迎关注公众号 前端巅峰 收货大厂一手好文章~
跟同事弃用webpack一次 体积减少了10倍相关推荐
- Cerebral Cortex:初为人父者竟然出现纵向灰质皮层体积减少?两个国际样本提供了这样的证据...
导读 新出现的证据表明,向父母身份的转变是成人神经可塑性的关键窗口.研究父亲提供了一个独特的机会来探索为人父的经历是如何塑造大脑的.然而,很少有研究考察男性转变为父亲角色时的神经解剖学适应性.本研究报 ...
- docker之容器commit迭代更新后体积大小不翻倍
使用docker经常会遇到这样的问题,基础镜像几百兆,在容器中安装了几个软件,然后commit到镜像.后来删除了一些内容,再次commit成镜像.发现.根本不会变小,而且会越来越大. 其实,commi ...
- react 打包体积过大_解决 webpack 打包文件体积过大
webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大.下面就来讲下如何从多个方面进行优化. 去除不必要的插件 刚开始用 webpack 的时候,开发环境 ...
- 彻底解决 webpack 打包文件体积过大
webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大.下面就来讲下如何从多个方面进行优化. 去除不必要的插件 刚开始用 webpack 的时候,开发环境 ...
- react 打包体积过大_彻底解决 webpack 打包文件体积过大
webpack 把我们所有的文件都打包成一个JS文件,这样即使你是一个小项目,打包后的文件也会非常大.下面就来讲下如何从多个方面进行优化. 去除不必要的插件 刚开始用 webpack 的时候,开发环境 ...
- 配置webpack中externals来减少打包后vendor.js的体积
背景 在日常的项目开发中,我们会用到各种第三方库来提高效率,但随之带来的问题就是打包后的vendor.js体积过大,导致加载时空白页时间过长,给用户的体验太差.为此我们需要减少vendor.js的体积 ...
- vue项目webpack打包优化体积优化,打包体积减少200kb到4Mb
解决方法 1.压缩图片 应尽可能地压缩项目中的图片,或使用svg矢量图.雪碧图.webp图片(此种图片仅兼容谷歌和opera浏览器,但图片的体积更小)等小体积的图片,达到减少打包体积的目的. 2.路由 ...
- 代码体积减少80%!Taro H5转换与优化升级
前言 作为一个多端开发框架,Taro 从项目发起时就已经支持编译到 H5 端.随着 Taro 多端能力的不断成熟,我们对 Taro H5 端应用的要求也不断提升.我们已经不再满足于"能跑&q ...
- 从同事朋友的电脑里,搜刮来的 10 个 Chrome 插件
" 阅读本文大概需要 5 分钟. " 没有插件的 Chrome ,是没有灵魂的. 日常的上网冲浪,有插件就会舒服很多. 在写文章的时候,问了一下同事朋友有没有自己珍藏的插件推荐一下 ...
最新文章
- JBoss 系列八十: jBPM 6 中使用 jbpm-console 创建执行 BPM 流程 - I
- JDBC第一篇之获得数据库连接
- 最长回文子串(Longest Palindromic Substring)
- APP视觉稿该怎么切图和标注
- [html] 你有使用过summary标签吗?说说它的用途
- 的mvc_浅谈MVC
- mysql主从(一)--搭建(GTID+row+增强半同步)
- mysql syncrelaylog_MySQL 5.7复制延迟之sync_relay_log
- Google Chrome谷歌旧版本下载
- 【两步稀疏表示法】基于两步稀疏表示法的小波变换的图像重建算法的MATLAB仿真
- (转)C#中 DirectoryEntry组件应用实例
- pic单片机c语言读eeprom,PIC单片机应用专题二内外EEPROM读写..doc
- 相机成像模型、相机内参、外参、以及相机标定
- 一、EulerOS 操作系统入门
- misc1-图片隐写
- 按位寻址与按字节寻址的区别
- 线性代数 | (1) 矩阵Part One
- 同时删除多个 PDF 文档前几页
- 夜神模拟器开机全屏并自启动自己的app
- rocksdb配置解析