On an average I have 30-50 lines of javascript specific to the page (it is not common). How should I structure my Javascript code so that it gets downloaded in an optimal manner on the client.
If I put that in a common Javascript file then the initial page download will take time because it will even download Javascript code that is not for that page.
If I put it embedded within the page itself then disadvantage is that it is never cached.
How should I structure it in optimal manner? I have round about 30-50 pages in my application.
When developing, use a logic folder structure so you can put all files in a folder and you can find them easier. When in production, concat and minify your code/files and use one reference to that minified file.
If you want to seperate even in production, think of a way to concat files as much as possible and minify that files. To load files when needed, you can think of a library as RequireJS.
I have the same directory/file structure under js as I have for the html (php) files, so when I'm on any url (/example1/example2) I include /js/example1/example2.js
Related
Do i have to include all my javascript file while loading main index page?
In single page application when we are not logged in, we include all of our .js file in main index file. This contains js file that is only needed when users are logged in.
What is better approach of managing angular app in this context?
Simple answer: yes.
Your application is a single-page one, so you can combine all JS files into one and load it at one request. It saves time for processing in the future.
Alternatively, create two pages login.html and others.html, then load two different sets of JS files accordingly.
Normally, nowadays the bandwidth is not the bottleneck, loading a larger JS file does not make trouble (usually).
You can split your code into multiple modules and then just load the js needed for that module.
I suggest using Gulp with packages to inject HTML when appropriate. You then have single lines of code as place holders for your Javascript and you run the Gulp task to inject the Javascript into the areas where it is needed.
You could also run gulp tasks to minify your js into just a few minified files. You will need to be sure your js in min safe (gulp can do this too).
If you make AMD - most often using RequireJS - then you won't need to include all from the very beginning.
A while ago we did a similar project, although without AngularJS, and by using RequireJS we made the different pages, which use different files. And this way people's browsers will never download certain files if they never go to certain pages.
(Of course, we had many pages inside the app, not just 2 or 3, where this wouldn't make any difference.)
I just need some help, am speed optimize a html website and the problem is that it has too many .js files around 23.
so is there any way to combine these js files so there will be less http requests,
i dont have any access to the server side, so gzip is not possible
To speed optimize your site try to combine and minify your js files via this website http://jscompress.com/ (I advise you to keep a backup of course) Go to the tab upload javascript files and upload multimuple js files.
Yes, You could modify your build definition in your code editor or use script loaders like "RequireJS" for ex..
Append all the JS files you're using on your server in the order they are loaded up in the HTML head, and then just load that one file. There are many ways/tools to do it. In the end, you should have a file that looks like this:
// 1st JS file code here
// 2nd JS file code here
// 3rd JS file code here
// etc
To speed things further, you can minify that combined JS file, and that's pretty much it.
You didn't specify the structure of your website, so I can't give you a more accurate answer in case things get more complex, but the bottom line is: yes, it's possible (and recommended).
Yes, there is. You can use tools like gulp with module gulp-concat
var concat = require('gulp-concat');
gulp.task('scripts', function() {
gulp.src('./lib/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist/'))
});
It will automatically refresh concated file after each change in these file. Moreover you will be able to minify the result file (by removing white chars).
If you are using some web CMS without FTP you can manually do the job using online combine tool like http://jscompress.com/
I'm learning Gulp and I'm wondering how to use it in a typical project
I have a Laravel project with a public folder that has a /js folder that holds all my javascript files..
Now for the live server I would like to minify them, I have gulp-minify working but how do you arrange the folder structure? Any idea's on a good practice to do this?
Method 1: Concat all javascript files into one
So the idea is to concat all the javascript files into 1 javascript file and include that.
My question here is: I have a lot of page-specific javascript, Like my homepage has a slider which relies on a certain div with an ID, But on other pages that element isn't there, so the elements necessary to make the javascript work aren't there, and the code isn't needed for that page?
On Topic
http://ryankent.ca/starting-a-new-project-with-laravel-5-gulp-bower-and-bootstrap/
I'm very interested in your ideas!
You should do sth more than minifing files. You can merg all js files using concat.
It's usually better to load single file instead of 10 small files.
My recomendation is to minify and concat all files from js and put in level up - just in your public.
There are a few different approaches.
One is to have separate /src (for the source files) and /build (for the minified files) folders inside your /js folder. Another approach is to append .min to the minified files and keep them alongside your source files. A potential downside of these approaches is that you will have to update all references to your JavaScript files in your templates.
Lukasz's approach is probably the one I'd recommend, since it requires the least work. Ultimately, it's up to you and your personal preference.
For page specific javascript you can use gulp-htmlmin: it's born for html minification but it can also minimize your inline javascript calling uglify under the hood.
I'm looking for a solution to combine several javascript files into as few as possible. I currently have many files from external sources like twitter, facebook, google+ etc.. as well as few of my own.
Is it possible to somehow automatically combine this into one, or as few as possible files?
If not all of them than combine external and internal files separately.
If downloading the external files and placing them in your server is an option, the you can use a tool like:
Gruntjs
Sprockets
Apache ant
RequireJs Optimizer
To compile the js (and usually minify it) into one big file.
That being said I recommend that you keep the external files in the external cdn you load them, because they probably cache them and it'll be faster.
Keep in mind that having only one file isn't always the best way to go (it depends on things like size of the resulting file, if you really have to load it, etc).
Let's say my page structure is :
1. one.html :
includes -> a.js , b.js , c.js ,d.js
2. two.html :
includes -> a.js , b.js, x.js, y.js, z.js
3. three.html :
includes -> a.js , b.js, s.js, x.js, y.js
and so on.
Some pages are more visited than others, say 3 pages contribute 99% of all page views of the website.
I am looking for a solution to:
i) Combine and minimize files in groups which can be included in the pages.
ii) Has some logic to map files names of the group, to final combined file name.
iii) Includes a minifier like Google Closure compiler / YUI compressor.
One solution I have looked at is:
PHP minify
which does most of it. However it has following drawbacks for me:
i) I would be hosting my static combined files on a CDN server,not on same web server hosting PHP minify, hence PHP minify's logic to server files by group name does not work for me.
ii) PHP Minify uses PHP CGI to process and serve the scripts, whereas I would want my minified content to be served directly from the CDN server.
Does PHP Minify have some functions to map group name to combined file name, which I can use in my webpage to directly set CDN path of the combined JS file. eg
<?php
$groupName = array("onePage" => array('a.js','b.js','c.js','d.js');
?>
<script type="text/javascript" src="http://www.MYSTATICSERVER.com/js/<?php getMergedFileName($groupName)"></script>
Rather than calling PHP Minify's PHP script to get files of a group, which is
actually a PHP page call,which then serves the javascript content from previously
generated files:
<script type="text/javascript" src="http://www.MYWEBSERVER.com/min/?g=onePage" ></script>
( I agree most of this is doable by combining different solutions with custom deployment scripts and minifying tools eg ANT,FABRIC + YUICompressor/ClosureCompiler, but I am looking for a well developed configurable solution that I might have missed )
Updated to show example for minify
It does appear doable using minify. I'm not sure if you have tried this out, but putting it out there for anyone else who might need it
1) Minify can generate a combined and gzipped copy of your scripts and use it as a cache so that it need not process all your files for ever request. To enable this, just edit config.php file with the location of the temp directory
$min_cachePath = 'c:\\xampp\\htdocs\\min\\cache';
2) After you add all your groups in groupsConfig.php, just make a request to each group so that minify generates the outputfiles in the cache folder
3) For each group, you will find 2 files in the temp folder named so:
minify_g=group1_08da191ba9c60a0ed611d0de455bb7a4
minify_g=group1_08da191ba9c60a0ed611d0de455bb7a4.gz
4) You can rename the files and deploy them directly to your CDN as required
5) If your CDN allows url rewriting, you can rewrite your script url to serve up the JS, without the need to change the location in the pages that you serve.
Unless you have a huge number of different configurations, I'd recommend you do it using YUICompressor and deploy to your CDN network. It is actually quite trivial to automate something like that using a simple shell script. If however you have a really complicated setup, you can consider using a build tool like grunt that runs on top of node.js. I have been using Grunt to build JS files for different projects using the same codebase, and it works quite well. In addition, lint and compression are supported OOTB.
My own projects are much like yours; HTML with both external and interned JavaScript, CSS and images. I too have looked around for a ready-made solution and wasn't able to find it, so I've developed my own. Here's a run-down of the system I've created. If you're going that route I hope this gives you an idea of what to look for.
The system starts by checking out a particular revision of the project you wish to deploy. You need to establish a translation between paths on the local file system and their respective remote paths (e.g. CDN or web server); in my case, all assets are loaded from a fixed directory inside the project.
I start by parsing all HTML templates (I have an MVC to separate HTML from PHP code); this collects all JavaScript, CSS and image references:
Image references inside HTML, JavaScript or CSS get replaced by their location on the CDN.
Interned JavaScript and CSS get compressed on-the-fly using Closure Compiler and YUI respectively.
Consecutive external JavaScript and CSS blocks get replaced by single bundles of compressed code / style; the bundle name is a hash of file names and their respective version (CDN will serve those files with maximum expiry date, so any change must cause a unique file name).
Then, all bundles get compressed, zipped, saved and uploaded to the CDN together with any images in preparation of deployment. PNG files are also "crushed" to reduce their size.
Finally, the whole project is uploaded and deployed (in case of multiple servers).
Conclusion it's a lot of work, but when it runs it's great to see it work :)
Create a grouping configuration file(xml/php), which contains the grouping rules for use in static html you have.
<groupings>
<group path='grouped_minified_js.js'><!-- multiple groups can be used for grouping js/css files. reuse this group by including the id in multiple views -->
<resource>PATCH_OF_FILE_TO_BE_GROUPED</resource><!-- multiple file to be grouped -->
.
.
.
</group>
<group path='xyz.css' /> ...<!-- additional grouping rule -->
</groupings>
create a php script which reads this config and uses PHP minify to create grouped minified js/css files at the path specified in group definition.
Use these paths to include grouped files into the static html files.
Run the script to test your pages and deploy the grouped files to the CDN.
grunt is great. If that doesn't work, try cassette: http://getcassette.com/