<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css" style="display:none;"> P {margin-top:0;margin-bottom:0;} </style>
</head>
<body dir="ltr">
<div style="font-family: Calibri, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);" class="elementToProof">
Hey Ed,</div>
<div style="font-family: Calibri, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);" class="elementToProof">
<br>
</div>
<div style="font-family: Calibri, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);" class="elementToProof ContentPasted0">
<br>
</div>
<div style="font-family: Calibri, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);" class="elementToProof ContentPasted0">
My team at Beam had recently migrated from Webpack to Vite - <a href="https://vite-ruby.netlify.app/guide/" id="LPNoLPOWALinkPreview">
https://vite-ruby.netlify.app/guide/</a><br>
</div>
<div class="_Entity _EType_OWALinkPreview _EId_OWALinkPreview _EReadonly_1"></div>
<div style="font-family: Calibri, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);" class="elementToProof">
<br>
</div>
<div style="font-family: Calibri, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);" class="elementToProof">
<br>
</div>
<div style="font-family: Calibri, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);" class="elementToProof">
Vite is specific for Vuejs and the integration with Rails is really good. You have HMR for Vue components.</div>
<div style="font-family: Calibri, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);" class="elementToProof">
<br>
</div>
<div style="font-family: Calibri, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);" class="elementToProof">
<br>
</div>
<div style="font-family: Calibri, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);" class="elementToProof">
Alternatively, you can go with <code>js-bundling</code> and <code>esbuild</code>. Jumpstart pro by Chris Oliver has this setup, and it works rather well .. auto page refresh, but no HMR.
<br>
</div>
<div style="font-family: Calibri, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);" class="elementToProof">
<br>
</div>
<div style="font-family: Calibri, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);" class="elementToProof">
<br>
</div>
<div style="font-family: Calibri, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);" class="elementToProof">
I'd recommend to migrate away from Webpack - it is lots trouble with much better alternatives existing nowadays.</div>
<div style="font-family: Calibri, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);" class="elementToProof">
<br>
</div>
<div style="font-family: Calibri, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);" class="elementToProof">
<br>
</div>
<div style="font-family: Calibri, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);" class="elementToProof">
Hope this helps!</div>
<div style="font-family: Calibri, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);" class="elementToProof">
<br>
</div>
<div style="font-family: Calibri, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);" class="elementToProof">
Bw, Martin<br>
</div>
<div style="font-family: Calibri, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);" class="elementToProof">
<br>
</div>
<div id="appendonsend"></div>
<div style="font-family: Calibri, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);" class="elementToProof">
<br>
</div>
<hr tabindex="-1" style="display:inline-block; width:98%">
<div id="divRplyFwdMsg" dir="ltr"><font style="font-size: 11pt; color: rgb(0, 0, 0);" face="Calibri, sans-serif"><b>From:</b> Chat <chat-bounces@lists.lrug.org> on behalf of Ed James <ed.james.spam@gmail.com><br>
<b>Sent:</b> 23 May 2023 10:31 AM<br>
<b>To:</b> chat@lists.lrug.org <chat@lists.lrug.org><br>
<b>Subject:</b> [LRUG] Troubleshoot asset pipeline with webpacker</font>
<div> </div>
</div>
<div style="line-break:after-white-space">Hi LRUG
<div><br>
</div>
<div>We have a custom internal NPM package for our front-end, which contains both CSS and VueJS assets. For months now our CircleCI build has been stable but we recently added a few more components to the package (benign stuff, simple).</div>
<div><br>
</div>
<div>We now have a build which consistently fails when compiling assets because of a RAM overflow i.e. we are suddenly exceeding our CircleCI RAM limit, which is 16GB!</div>
<div><br>
</div>
<div>We’ve run out of experiments and seems to have exhausted all avenues for fixing this. We are primarily a back-end team so we have no specialist webpacker/asset-pipeline knowledge in the team.</div>
<div><br>
</div>
<div>If anyone is willing to have a brief chat to run through any other potential gotchas/options, I would greatly appreciate it.</div>
<div><br>
</div>
<div>I did find this article particularly interesting, but our lack of asset-pipeline knowledge limit us from progressing down this route (which seems promising): <a href="https://rossta.net/blog/overpacking-a-common-webpacker-mistake.html" data-auth="NotApplicable">https://rossta.net/blog/overpacking-a-common-webpacker-mistake.html</a></div>
<div><br>
</div>
<div>Thanks!<br>
<div><br>
<hr style="display:block; height:1px; border:0; border-top:1px dotted #ccc; margin:5px 0; padding:0">
<br>
<table width="100%" cellpadding="0" border="0">
<tbody>
<tr>
<td width="70" valign="top"><img style="margin:8px 8px 0 0" height="60" src="http://ej-public.s3.amazonaws.com/images/rubbish.png">
</td>
<td style="font-family:'Lucida Grande',sans-serif"><span style="font-weight: bold; font-size: 18px; line-height: 30px; color: rgb(51, 51, 51);">Ed James</span>
<br>
<span style="font-weight: normal; font-size: 12px; line-height: 16px; color: rgb(153, 153, 153);"><a href="mailto:ed.james.spam@gmail.com" data-auth="NotApplicable" style="text-decoration: none; color: rgb(153, 153, 153);">I will respect your spam</a>
</span></td>
</tr>
</tbody>
</table>
</div>
<br>
</div>
</div>
</body>
</html>