This article demonstrates how to set up an Angular2 project with Webpack. The setup also supports Typescript, Less, CSS packages like Twitter Bootstrap and Fonts e.g. FontAwesome.
It describes how to set up all the different plugins, loaders etc. I needed for a real Angular2 application. Most articles I read so far only concentrate on one small part of a complete setup. If you think I forgot to mention an elementary part of the setup, please let me know.
Required NPM Packages
All required dependencies for Webpack are put into package.json as devDependencies, so that NPM will automatically install them.
SEO: How to eliminate render-blocking JS and CSS in above-the-fold content
Since Google recently (End of April 2015) started to penalize non-mobile friendly and non-responsive sites in their ranking, we evaluated some online SEO tools to test our website. The best tool to get insights in what Google thinks about your page is PageSpeed Insights by Google.
Road to 100 / 100 in PageSpeed Insights
PageSpeed Insights is a Google Tool which helps you to identify ways to make your site faster and more mobile-friendly. Google includes the page speed in its ranking calculation, so that fast, responsive pages are ranked higher than slow ones. Therefore PageSpeed Insights analyzes a single page of a site and scores it in three categories:
Mobile: User Experience
Desktop: Suggestions Summary
In this article we describe how we optimized our website www.illucit.com to reach the score of 100 / 100 in each category.