How to use Baler for JS bundling on Magento Cloud?
-
14-04-2021 - |
Pregunta
Baler is great for JS bundling comparing to default JS bundling.
It's hard to apply it to a Magento Cloud instance as Magento Cloud is a read-only system. So we can't run npm command directly via SSH access following their document
Is there a way to apply Baler to a Magento Cloud instance?
Thanks
Solución
I was able to install Baler on Magento Cloud for my client.
All we need to do is to update the build hook in .magento.app.yaml. Below is the detail for the steps that I did:
Upgrade node to version 14.4.0 by updating the build hook before the static is generated in .magento.app.yaml
unset NPM_CONFIG_PREFIX
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | dash
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
nvm current
nvm install 14.4.0
Install AMD baler module following their doc before the static is generated in .magento.app.yaml
git clone https://github.com/magento/baler.git
cd baler
npm install
npm test
npm run build
npm link
cd ..
Run baler command after the static is generated in .magento.app.yaml
Minify JS files using Terser after Baler is run after the static is generated in .magento.app.yaml
npm install -g terser
find 'pub/static/frontend/Magento/luma' \( -name '.js' -not -name '.min.js' -not -name 'core-bundle.js' -not -name 'requirejs-bundle-config.js' \) -exec terser \{\} -c -m reserved=['$','jQuery','define','require','exports'] -o \{\} \;
Install module Magento_Baler
Disable default JS minification, JS merging, JS bundling and enable Baler JS bundling by updating app/etc/config.php
Commit everything and do a git push.
See the final build hook in the following link https://gist.github.com/toan-tam/a5bd795f846fb1243f096648f5bce4f9
Note:
- Remember to replace your theme location in the pub folder in step #4
- If you have issues with the steps above, try to apply them one by one and then do a git push to confirm which step is broken and then fix it.
Reference doc: