![]() ![]() Angular doesn't support IE, but an "if IE" comment is a pretty reasonable way of communicating to users that your app doesn't support IE and they need to upgrade, so breaking that would be quite annoying. The most notable are legacy "if IE" comments, which still exist. Even if we did, comments could be load bearing in a very awkward way. We could possibly do this without a complex dependency ( html.replace(//, '')), I'm not sure if that's comprehensive enough for this case. Remove comments (probably configurable for HTML comments which can theoretically be load-bearing).To address the specific points mentioned: Lighthouse came to the same conclusion, which I think backs up the argument that this is very low impact. HTML compresses really well and is very fast to parse in browsers. Angular apps have very small index pages (since it's all client-side rendered), so the benefits are minimal. Generally speaking, we don't think the improvements here are worth the cost of a new dependency. There are other benefits to adding the discussed CLI infrastructure, and when that gets prioritized and implemented we can revisit index.html minification as the implementation and maintenance cost will become much lower.ĭiscussed this some more today, though I don't think our opinion has changed much since #11360 (comment). Considering PageSpeed's mission of making a faster web, the amount of research and investigation they put into these questions, and the fact that this wasn't significant enough to implement, minifying an already trivial index.html file won't have a noticeable impact to users.Ĭonsidering the high infrastructure cost and the low impact of the feature I don't expect this to be prioritized soon. It seems that an HTML minification audit was considered by PageSpeed Insights but dropped as it was not considered impactful enough to justify the cost. A potential 40% page size decrease sounds useful, but when it's only a few hundred bytes (before compression), the tool should be surfacing other, more impactful optimizations. If someone is still seeing automated systems complaining about this, let me know. I ran PageSpeed Insights on angular.io, and I believe the HTML minification check has been removed (JS and CSS checks are present, but no HTML check was passed or failed). In summary, minifying index.html probably isn't that hard by itself, but to do it correctly would require a non-trivial amount of infrastructure work to support. Whether using ngc to minify HTML is actually good idea is still TBD. There is the possibility of leveraging the Angular compiler for HTML minification (rather than an external dep), since it already needs to parse HTML for Angular templates, but that will require coordination with the compiler to support. The CLI doesn't have a great way of doing that right now, so we need to update our internal infra to better support this. ![]() To implement this properly, we need to minify the file as a post-process step in order to support differential loading and localization. It also slowed down builds, required additional dependencies with varying levels of support, and generally increased complexity of the CLI. We previously did support minification of index.html but were forced to disable it due to tooling incompatibilities at the time. We recognize that optimizing index.html is a clear area of improvement for Angular, and understand the desire for automated metrics to accurately reflect the state of the application. readFile ( filePath, function ( err, buf ) ) ĭiscussed this in our CLI triage meeting. minify var filePath = 'dist/index.html' fs. ![]() To submit a pull request, you should embed the styles and template in the component using gulp and compile using tsc.Var fs = require ( 'fs' ) var minify = require ( 'html-minifier' ). For that, just run the command:Ĭd examples/webpack npm install npm start Now we just need to publish our package so we can install it through npm. This is why in index.js we exported the code from /lib folder and not from /src. This will trigger the chain and you will end up with your build in /dist folder and the compiled package in your /lib folder. To build and compile, run the following command at the root of your package: This is our chain tasks that will do the job for us. We have this set gulp js:build & rm -rf lib & tsc -p dist. The command are set in package.json file, at scripts.build option. Build and compileįor build we use gulp and for compiling we use tsc. After that, you must compile, build and publish your package. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |