I watch a lot of tutorials of angular 2, and I couldn't some questions:
1- Should I use webpack for minification and bundleling?
2- Should I minify and bundle the js of the components itselfs.
3- Should I minify and bundle the js services that the components expose e.g.
personService.js is used in person.ts?
4- What happens with the path
of the service I provide inside the component, now it will be in one
file located in another place? Should I change the path of the
service called in the component depending on if I'm in development o
production?
How are you currently handling module loading for your applications? I'm not as familiar with webpack, but SystemJS offers a builder/bundler that will do all of this for you then all you need to include in your html is the script for your bundled/built file.
I haven't used Webpack but SystemJS worked well for me. Gulp can be used to build, minify, and bundle all your code using a system.config.js to worry about the file locations of your source and dependencies.
Here is an example of Tour of Heroes where all the Typescript source is bundled into one JS file.
Angular CLI now makes all of this really easy, supporting bundling and minification (using WebPack underneath, but without any need to set it up), and Ahead-of-Time template compilation, which massively reduced the bundle size.
See: Angular 2: Reduce app size (in addition to bundling/minification)
It also sets up development and production environments, which you can import into components if you have different settings in dev vs. prod, and you can make your own custom environments and use those too.
Related
I am a dev on a web application that consists of Java Server Pages which act as the HTML, a Java backend, and Javascript front-end files. I have been tasked with looking into adding Webpack to the project, with the goal of only using it to minify Javascript files at first (eventually we will use more of Webpack's features of course). I have tried doing research via Google into Webpack minification, but I am having trouble finding anything detailing how to use it for just minification, instead of bundling the project files.
Does anyone know how to use Webpack for strictly Javscript minification?
Webpack out of the box is anticipating on processing JS and will run minification on production builds by default.
https://webpack.js.org/configuration/mode/ (different build modes)
Assuming you are already past configuring a JS entry file to consume all your JS files:
https://webpack.js.org/configuration/entry-context/#entry
AND configured a loader on how to handle each JS file imported in your entry file appropriately.
(Feels like you want asset/resource. Pay close attention to asset modules type and generator options)
https://webpack.js.org/guides/asset-modules/
The settings for minification on a production build are what is known as the optimization.minimize configuration of your webpack.
https://webpack.js.org/configuration/optimization/#optimizationminimize
With Webpack5, further options around the minification engine has been exposed and is known as optimization.minimizer configuration options:
https://webpack.js.org/configuration/optimization/#optimizationminimizer
So I've been handed an Angular 1.5.6 project that has source files and compiled files but nothing to instruct how to compile the source files. Is there a standard approach I'm missing to do this? There's no buildfile, package.json, angular.json file in the src directory.
Question is quite general.
Not sure about any 3rd party libs may be present and require some additional transformation, but angular app source files probably may be just be joined altogether(maybe after transpiling with Babel) and injected into HTML with <script> right after angular.js itself.
Also if you see something like strange "ngInject"; strings or comments you will probably need ng-annotate module to autogenerate dependencies for modules. It may be run in combination with gulp or Babel.
I want to compile my angular 6 codes and pack them myself.
Can I use Angular 6 without Webpack?
And Does packing .html and .css into a .js WebPack's Job or Angular CLI's Job??
Webpack is a JavaScript module bundler. Angular cli uses it to pack and build the Angular app.
If you want to use Angular cli then you're stuck with Webpack for now.
Otherwise if you create your own architecture to bundle and build your app (which is harder) then you can use other Javascript module bundlers such as Rollup and Browserify
Webpack is a powerful module bundler. A bundle is a JavaScript file that incorporates assets that belong together and should be served to the client in a response to a single file request. A bundle can include JavaScript, CSS styles, HTML, and almost any other kind of file.
Webpack roams over your application source code, looking for import statements, building a dependency graph, and emitting one or more bundles. With plugins and rules, Webpack can preprocess and minify different non-JavaScript files such as TypeScript, SASS, and LESS files.
I would like to use the angular-cli to build an app that bundles my app code but does not include the Angular2 framework or other large external JavaScript libraries in the bundled code. I would like to load these libraries from a CDN when the page loads. Is there a way to do this?
Also, is there a way to do this while preserving the benefits of a local build where only the parts of the Angular2 framework that I am using gets loaded?
I saw this question, but it was for SystemJS and I don't think it applies to Angular-cli: How to load angular2 using CDN and SystemJS
You simply need to add the appropriate <script src=""> tags pointing to the CDN to the index.html file.
Remember to remove the .js files from angular-cli.json so they don't get bundled with the app.
Currently, you can't do that for the Angular 2 js files itself, they are automatically bundled with your app. Though the latest updates enable the web servers and browsers to cache the vendor files, so they don't get redownloaded on every visist to your app but only when the hash changes.
When creating an application with Angular, version 2 or greater, uses a build system that only includes the portions of the Angular platform you use. Templates can be compiled at build time, allowing the build process to remove the template compiler from your bundled payload. Finally the build process does tree-shaking with the help of static analysis of your code, which further removes from the payload bundle unused portions of the platform.
If you provide Angular from a CDN, it would need to be the kitchen sink, the entire platform. This would be huge and a detriment to your application.
You are much better off allowing angular-cli bundle the portions of the platform that you need. As the WebPack treeshaking plugin improves your bundle sizes will get smaller.
I would add your whole app to a CDN such as Akamai. For example (depending on how your app is structured) you could cache files such as the ones in the below list...
index.html
List item
application.css
application.js
templates.js
vendors.css
vendors.js
This would give even better performance than just caching the Angular framework files on the CDN.
I am using Laravel with elixir to concatenate, minify and version all third party scripts into vendor-<elixir-version-hashid>.js. Everything works fine, but the problem is with internationalization. I added angular-i18n library to the project but it seems that it expects only one of language files to be loaded because all of them declare a module with the same name
angular.module("ngLocale", [],
but with my Elixir approach I get all of language files in my vendor.js file, which leads to conflicts because now ngLocale is redeclared for each locale js file.
What is the best approach to use angular-i18n together with minification? Should I create different vendor.js for each locale? Or should I leave locale files out of the minification process and instead use a custom gulp task to copy locale files to build folder? Any better approach?
Important - I don't need dynamic language change, my app always performs full page reload when user changes his preferred language. I just need some way to make angular see the correct ngLocale when all third party .js files are being compiled into single vendor.js file.