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
)?
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.
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.
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.
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.
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)
Go to the project properties and check Combine JavaScript output into file
:
Important to have /// <reference />
(as in question), it helps tsc
order files by dependencies before the merge.
bundles.Add(new ScriptBundle("~/bundles/finale").Include("~/js/all.js"));
and in view
@Scripts.Render("~/bundles/finale")
Use the --out parameter.
tsc AFile.ts ZFile.ts --out single.js
The typescript compiler will do the dependency navigation for you automatically.
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",
@".",
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With