Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TypeScript bundling and minification?

Assume I have two files

AFile.ts

/// <reference path="ZFile.ts" />
new Z().Foo();

ZFile.ts

class Z
{
    Foo() { }
}

Is there a way to generate all scripts in a single js file in the order it requires (need ZFile before AFile to get the definition of Z)?

like image 681
BrunoLM Avatar asked Jun 29 '13 22:06

BrunoLM


People also ask

What is difference between bundling and minification?

Both bundling and minification are the two separate techniques to reduce the load time. The bundling reduces the number of requests to the Server, while the minification reduces the size of the requested assets.

How do you minify TypeScript codes?

The TypeScript compiler does not support the generation of minifies or obfuscated code. you will need to use another tool against the JavaScript output of the compiler. You can use YUI Compressor, JSMin or Closure Compiler to minify JS code.

How bundling and minification works in MVC?

Bundling and Minification are two performance improvement techniques that improves the request load time of the application. Most of the current major browsers limit the number of simultaneous connections per hostname to six. It means that at a time, all the additional requests will be queued by the browser.


4 Answers

In post build events I added a call to TypeScript compiler

tsc "..\Content\Scripts\Start.ts" --out "..\Content\Scripts\all.js"

In the bundle configuration I added

bundles.Add(new ScriptBundle("~/scripts/all").Include("~/Content/Scripts/all.js"));

On the _Layout.cshtml file I added

@Scripts.Render("~/Scripts/all")

And with that I got

<script src="/Scripts/all?v=vsTcwLvB3b7F7Kv9GO8..."></script>

Which is all my script in a single file.


The compiler does not minify, you have to use bundles and compile on Release or set

BundleTable.EnableOptimizations = true;

You can also minify using Web Essentials or grabbing the contents and minifing somewhere else.

like image 152
BrunoLM Avatar answered Sep 20 '22 05:09

BrunoLM


Now VS Typescript Extension supports merging to one file.
Make sure that you have installed the extension Tools -> Extensions and Updates (VS2015 has it by default)

enter image description here

Go to the project properties and check Combine JavaScript output into file: enter image description here

Important to have /// <reference /> (as in question), it helps tsc order files by dependencies before the merge.


Then for minimisation bundle can be used as usual:
bundles.Add(new ScriptBundle("~/bundles/finale").Include("~/js/all.js"));

and in view

@Scripts.Render("~/bundles/finale")
like image 28
Artur A Avatar answered Sep 22 '22 05:09

Artur A


Use the --out parameter.

tsc AFile.ts ZFile.ts --out single.js

The typescript compiler will do the dependency navigation for you automatically.

like image 23
basarat Avatar answered Sep 20 '22 05:09

basarat


Assuming all of your ts files are directly or indirectly under a folder called say 'ts' you could write a tt script which merged all of .js files(but not min.js) into a file myApp.js and all of your min.js files into myApp.min.js.

To obtain the ordering of files you could process subfolders thus:

string[] FolderOrder =
{
    @"libs\utils\",
    @"libs\controls\",
    @"app\models",
    @"app\viewmodels",
    @".",
};
like image 34
andyks Avatar answered Sep 18 '22 05:09

andyks