Will JS-Uglify make it load faster? - javascript

What I was trying to do is to make my ember app load faster, the index.html file looks like this
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Jobber</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
{{content-for "head"}}
<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/custom.css">
{{content-for "head-footer"}}
</head>
<body>
{{content-for "body"}}
<script src="assets/vendor.js"></script>
<script src="assets/custom.js"></script>
{{content-for "body-footer"}}
</body>
</html>
The size of vendor.js and custom.js together before uglify is 11mb, after uglify from ember-cli is about 4mb.
Then I tried to profile it in chrome Timeline(5x CPU throttling) to see if there is a noticeable difference. And here is what I got, top 3 charts are summaries after being uglified, bottom 3 are without uglify.
My question is will uglify really make it load faster? The only difference I can tell is the time spent in category Other is less, the Scripting part is very close and sometimes even longer.
I did a closer look into the time segmentations, seems like the compile time have decreased a lot but in total there is no much difference, if it does save time, where is the time being saved?

Related

Hide base path before # in url in Angular

I'm building a wordpress theme with angular as described here.
This is my index.html that is loaded by wordpress' index.php:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TITLE</title>
<base href="/wp-content/themes/TITLE/dist/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
The url result is:
http://HOST/wp-content/themes/TITLE/dist/#/ , but should be http://HOST/#/
I need to set the tag in my index.html to enable angular to find its resources. Is there a way to hide the /wp-content/themes/TITLE/dist part before the /#/ from angulars HashLocationStrategy?
I would prefer to hide it from the angular settings, but if a wordpress configuration in the admin view is necessary this would be fine, too.

ReactJS doesn't work with Material Design Lite

I'm developing a site with ReactJS and I'm using MDL.
Well my problem is basically the css of the framework is working perfectly but for some reason the js of the framework doesn't work. As for example the tabs
but I saw when I refresh the page the js of the framework works.
I cannot see any error in the console. Any idea how to fix it and why is happening it? probably I'm adding the dependencies of the framework in a wrong way.
below is the code of my index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Gonzalo Barba - personal website.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>Gonzalo Barba</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.grey-pink.min.css" />
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div id="root" class="mdl-layout mdl-js-layout mdl-layout--fixed-header"></div>
<script src="bundle.js"></script>
<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
</body>
</html>

WebStorm built-in web server gets 404 for every css and js file included in index.html

Here is my index.html for posterity's sake:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<base href="/" />
<title>Cart</title>
<link href="content/external/bootstrap.css" rel="stylesheet" />
<link href="content/external/bootstrap-theme.css" rel="stylesheet" />
<link href="content/external/font-awesome.css" rel="stylesheet" />
<link href="content/external/angular-toastr.css" rel="stylesheet" />
</head>
<body ng-app>
{{3+4}}
drfg
<script src="scripts/external/jquery-1.9.1.js"></script>
<script src="scripts/external/bootstrap.js"></script>
<script src="scripts/external/angular.js"></script>
<script src="scripts/external/angular-ui-router.js"></script>
<script src="scripts/external/angular-resource.js"></script>
<script src="scripts/external/angular-mocks.js"></script>
<script src="scripts/external/angular-toastr.tpls.js"></script>
<script src="scripts/external/angular-animate.js"></script>
</body>
</html>
Whenever I hit run in webstorm to open in chrome, I get a 404 for every single javascript and css file. However, if I scope to the project directory and run node's http-server, my site loads just fine. I can't seem to find anything in settings related to this. Any ideas?
the problem is caused by tag in index.html:
<base href="/"/>
that tells the browser to resolve all URLs in the page relative to the web server root (localhost:63342 when using built-in webserver). Obviously no resources can be found there, as the built-in webserver serves files from http://localhost:63342/<project root>
So, you need to comment out '<base href="/"/>' to get your code working. Or, modify your hosts file to make webserver serve files from http://<some name>:63342 - see http://youtrack.jetbrains.com/issue/WEB-8988#comment=27-577559

Loading stylesheets and JavaScript taking too long

What should I do to decrease load time?
<head>
<title>NCI SwitchGears</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.4-dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="menu/styles.css">
<script src="bootstrap-3.3.4-dist/js/jquery-latest.min.js" type="text/javascript"></script>
<script src="menu/script.js"></script>
</head>
You're loading jQuery twice. Once locally, and once remotely.
Consider using Require.JS to load your JS on demand
Combine Style sheets to one request. Make sure you are using modular styles and again, load on demand.
JS move to footer where appropriate
Google provides a nice tool to help you speed up the loading times of your pages
https://developers.google.com/speed/pagespeed/insights/
Here's another nice online tool.
As a general rule:
load 1 js files and 1 CSS file - compressed
have your js at the bottom of the page, not in header
load social tools/scripts via ajax, after page has load
optimize the images/graphics you use on your template
set proper expiration headers and caching options
More specific instructions for your pages you can find in the above tools.

Phonegap / JQueryMobile App Build Loses Styling

Pulling my hair out!
Running a simple phonegap build, using JQueryMobile pages. The program runs through chrome/firefox etc. but on internet explorer is completely unstyled. IE brings up a warning: blocked content. If I click allow, it runs the javascript and picks up the styling.
Downloading my phonegap build onto an android tablet, and it too doesn't pick up the styling. It looks identical to IE before the blocked content. There has to be something in that surely?
I have tried downloading the JQuery CSS/js files and running them locally on the android but no luck. I have simplified back to one page below. Can anyone help?
Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<title>Hello World</title>
</head>
<body>
<div data-role="page" id="ims">
<div data-role="header">
<h1>Main</h1>
</div>
<div data-role="content">
Labs
Equipment
</div>
<div data-role="footer">
<center><p>Copyright</p></center>
</div>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
ims.initialize();
</script>
</body>
It seems that you missed some jquery files or css or might have incorrectly referenced in your HTML file.
If you have downloaded jquery mobile: js & css; check if it is referenced correctly within 'script' and 'link' tag.
Use document ready function at application start-up.
http://learn.jquery.com/using-jquery-core/document-ready/

Categories