-1

Our Setup

I have a large-ish VueJS 2 project that I build and deploy via the standard npm run build to an Azure AppService.

We recently added a way for customers to integrate some functionality into their site (basically they reference our JS file). I currently just have that js file sitting in \public so customers can reference it without pulling the full VueJS app.

Question

How can I minify that js file in \public? I'm open to moving it as long as I can treat it as a one-off asset that they can reference without pulling in the main project.

Bonus: I'd like to do this for a css file in public also, but my priority is the js file minification.

Priority

I'd like to keep the current build/deploy flow as simple as possible, and can't find out how to wire this into the Vue/Webpack flow.

AndyV
  • 388
  • 1
  • 6
  • 14

2 Answers2

1

I found a good solution for this finally after enough digging.
In the package.json "scripts" section:

"app-build": "vue-cli-service build --no-clean ",
"script-build": "minify public/js/thing.js --out-file public/js/thing.min.js",
"build": "npm run script-build && npm run app-build",

These resources helped:
Minify script in Webpack: https://stackoverflow.com/a/55579911
Combine webpack commands: https://stackoverflow.com/a/39172660

AndyV
  • 388
  • 1
  • 6
  • 14
0

You can use this web site. https://www.minifier.org/ and download it or use this one https://www.toptal.com/developers/javascript-minifier , it has apis and you can make easily a request

rikk228
  • 66
  • 1
  • 2
  • This would require me to remember to minify the file every time I make a change to the original source, which I'd really like to avoid. Hence my question about how to wire it into the vue/webpack build pipeline. – AndyV Jun 08 '22 at 15:25