In my MVC 6 app, as a replacement for the older js/css bundling & minification-system, I want to produce 1 javascript file that I can reference in my HTML. This javascript file is page/action-specific so I can't just concat all .js files in a folder.
With CSS (using LESS) I already managed to do this by using #import, the created .css file will then be a combination of the original .less file plus all the imports merged into 1 file. Now I'm trying to do the same with my .js files.
In GULP I can easily minify each seperate file, and place them in the correct folders, but I don't know how to merge them with the right files. I dont want to create a gulp task for each file/js telling what to concat.
I thought about using TypeScript to reference other js files and then compiling them with GULP to one file but this seems a bit harder. I'm open to other frameworks that can manage this as well.
In typescript using ///reference or import module doesn't actually result in an import when compiling like it does with LESS.
So for example, consider the following js or typescript-structure
scripts/common/master.js (or .ts etc.)
scripts/maincontroller/index.js (uses master.js)
scripts/maincontroller/support.js (uses master.js)
desired result after compile/merge/concat with gulp:
wwwroot/js/common/master.js (unchanged because nothing referenced)
wwwroot/js/maincontroller/index.js (concat with master.js)
wwwroot/js/maincontroller/support.js (concat with master.js)
This is an interesting design. It actually means that I don't benefit as much from my browser caching, because I end up downloading master.js three times (but in three different files) - and that is just based on the three files in your example.
If you have a large number of files, keep everything as individual files and use a module loader, such as RequireJS. This way, master.js is cached after the first page and they only need to load index.js on the next page (and so on).
If you don't have a large number of files, bundle them into a single file and load it late in the page.
GO to solution explorer and right click on your project and click add references.
Then go and browse your references files. :)
sry for bad english!
Found a way to achieve this by using http://browserify.org/ with GULP. I can use 'require('master.js')' in my index.js and browserify will concat the 2 files together. Not the easiest task but it seems to work as desired.
Related
I'm using Webpack in a fairly simple, straightforward way that bundles together a few JS and TS files into one bundle, and it works well on my site.
However, I want to split the current bundle into smaller bundles, as I get both a warning when I build the bundle due to it's size, and I get warnings running Lighthouse audits in browser that I should reduce the file size of my bundle.js file.
The simplest solution in my mind is to split my current bundle into 4 parts, i.e. bundle1.min.js, bundle2.min.js, etc... Then I just serve the bundles consecutively.
The problem is splitting and serving my bundle this way is breaking other JS on my page. For example a function defined in bundle1 and called in a different JS file no longer works, unless I remove all the other bundle.js files. It seems that only the most recently loaded bundle file works.
Is there a better approach to get smaller bundles, and make sure that all bundles work correctly?
Route-based code splitting is quite popular because each page/route usually has a small subset of components on it.
The guide can be found here (for React)
A little embarrassed, looks like this was just a scoping issue with a dependency in one bundle breaking code in another by being absent. Reorganizing my bundles so dependencies are present where needed. Ai ya.
THIS link suggests that /app directory contains all configuration, templates (.html.twig files) and translations, and the /src directory contains PHP code.
However, HERE we can see that .css and .js files are loaded from /src/AppBundle/Resources/public directory and not /app/Resources/public directory. What is the best practice? How should I professionaly approach this problem, and where should I keep all the templates, .js and .css files?
I like to put css and javascript that serve for general purposes in /app/Resources/public and the ones specific to the concerned bundle in /src/YourBundleNameBundle/Resources/public. Like that when I want to see a code specific for a bundle I will just go to that bundle , when it's a general purpose code I would be sure that it's in the root. I have seen expert people doing it and it makes sense for me.
It's a matter of choice and there is no right and wrong answer.
the best practice is to put your css and js files in your bundle particularly in folder that you called "public" (yourBundle/Ressources/public/css/yourStyle.css)
and make sure to run this command before
php bin/console assets:install
and To avoid typing this command each time, I recommend you make a link (a kind of shortcut), by adding the active parameter:
assets:install --symlink
So, the web /bundles/folderBundle actually points to src/yourBundle/Resources/public
On Windows, you must run the command prompt in administrator mode
Right now I have an issue where deployed .js and .css files are cached by our clients browsers. Which means they have to do a hard refresh(CTRL+F5) in order to get the newest updated .js file from the server. This obviously isn't good.
I have seen it's common practice to force a versioning on the .js and .css files name extension, for example so that bundle.js would be named something along the lines of bundle.js?v={versionnumber}?
Another challenge would be to dynamically update this reference in an index.html file. Is there a way to do this in Webpack as well?
Did you read this chapter webpack-caching?
We usually give a [hash] as part of bundle name.
And for your second question, you can try html-webpack-plugin
I need your help with website project I'm working on. My project consits of 7 html documents, 3 stylesheets, 8 .js (including jquery.min.js and some jquery plugins) and some pictures. I want to bundle and minify it as much as it is possible (it would be good to get only 1 css and 1 js file or maybe 1 js, which contains styles inside).
For clarity - now, when I have all dependencies in html - everything is working properly. But I'm not sure how to set all module.exports and requires. Could you tell me how to do it step-by-step in a proper way?
Many thanks in advance.
PS. I write in ES5, so I don't use Babel.
You can do the following to make your codebase a bit more tidy.
Manually group the content of your relevant js files into one and export it as a nodejs module by using module.exports = module_name on the top of your merged js script (Repeat as needed for any jscripts in your project).
Then include the exported module in your main node file and include its main functionality using var modulesfile = require(./module_name); Please note directory paths while importing your js modules.
You can also run a minifier like minifyjs to make your js files size even smaller if they need to be called multiple times from a url. Nodejs installation and usage for minifyjs can be found here.
You can also call other css from within existing ones by using the
#import url("./css/filename.css"); Just verify proper css directory paths first.
In case you also want to use browserify for node there is a full guide in the npm website.
Another good and simple solution is to move all of your codebase in a visual studio web project. From there you can do pretty much what you want, organize your scripts and css files (/Scripts and /Content directories) in bundled configuration files etc.
NOTE: All your code has to be migrated to an asp .NET project to use this approach (as per Microsoft doc) properly.
I have two javascript
ol.js minify version 400kb
ol-debug.js original version 3000kb
app.js my script using ol functions.
For development I need to use ol-debug.js so I can use the real name properties and functions.
So how I can develop my app.js using the debug version and then minify both?
For example when I use Jquery or Jquery-min dont have that problem, the function name doesnt get minify. So what is different here?
What you want to do is to take several source JavaScript files (not minified) and minify all of them into a single minified file.
You need a minifier - software that takes your JavaScript files, minify and combines them into a single minified file.
One example is:
https://github.com/mrclay/minify
I hope it helps a bit!