So I'm just trying to go through the webpack-bundle-analyzer results looking for things that should be on a diet and understand the CLI build process more in depth (CLI v6.1.5, Angular v6.1.8) and improve our instance.
I noticed that on just a general ng build when I go look through the vendor bundle I see;
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
* jQuery JavaScript Library v3.2.1
which is unfortunate as it's unminified as the whole jquery.js file at like 260k+, however I also find this in the scripts bundle;
/*! jQuery v3.2.1 | (c) which is the minified file version I would expect considering I have it declared explicitly in my scripts array in angular.json
So I figured if I moved it over to the tsconfig.json as a module path as;
"paths": {
"jquery": ["./node_modules/jquery/dist/jquery.min.js"],
}
Then it should pick up the min version and strip the other from vendor like I've done with others. Which it does, builds fine, I see the size difference, jquery.js is gone from the vendor bundle....but, I remember there's no typeroots on modules this way so when I go to init I get a crap ton of error TS2304: Cannot find name '$' errors. Which, I don't really want import * as $ from 'jquery' declarations all over if I can avoid it and also I've got a dependent in the same path on the angular.json of some jquery-ui library I've not used as;
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./vendor_scripts/jquery-ui/jquery-ui.min.js",
.....
Where if I just omit the jquery.min.js path then I get ReferenceError: $ is not defined all over.
So something in this build process I've inherited is out of line and I'm hoping someone can teach me something. How can I avoid the duplicate scripts to put the bundles on a diet, and how can I make sure I get my typings / ambient declarations respected the correct way? Cheers for reading either way!
