@@ -25,20 +25,20 @@ a#overview
25
25
:marked
26
26
## Overview
27
27
28
- After creating your brand new Angular app you'll want to put it online for the world to see .
28
+ After creating your new Angular app you'll want to deploy it.
29
29
30
30
Your development setup is optimized for build speed and rapid iteration, but when
31
31
deploying to production you'll want to optimize for loading speed and payload size.
32
32
33
- In this chapter you'll see how to deploy your app right now , techniques to reduce your
33
+ In this chapter you'll see how to deploy your app, techniques to reduce your
34
34
payload size, plus Angular and server configuration.
35
35
36
36
.l-main-section
37
37
:marked
38
38
## Simplest deploy possible
39
39
40
40
The simplest possible way to deploy your app is to use your development environment.
41
- It is already working locally after all , so it should work live .
41
+ It is working locally, so it will work when published to a web server, too .
42
42
43
43
1. Copy over your local project folder to your server.
44
44
2. On your server, edit `index.html` to have the correct `<base href="/">` tag. If you are
@@ -47,27 +47,35 @@ a#overview
47
47
3. Configure your server to redirect requests for missing files to `index.html` instead.
48
48
[More on this later](#server-configuration).
49
49
50
- And this is all you need to publish your app!
50
+ This is all you need to publish your app!
51
51
52
- It's not a very good production deploy though.
52
+ You've deployed your app, but we can do better for production to optimize the app!
53
+ Let's learn how.
53
54
54
55
For one, it has a lot of files that aren't even used when serving your site to users since it has
55
56
all the development only packages.
57
+ A good example is TypeScript, which most Angular projects use as in `devDependencies`.
58
+ You want it to compile your files, but there's no need to have it on the production server
59
+ after that.
60
+
56
61
You could cut down the number of files by doing a production install (`npm install --production`),
57
- but only *after* compiling your Typescript files.
62
+ but only *after* compiling your TypeScript files.
63
+ A production install will only contain the packages in `dependencies`, which should be the ones
64
+ your project needs at runtime.
58
65
59
66
It also has a lot of small files. Each of those is going to take a whole round trip to get
60
67
delivered to the browser, so it's not going to be that fast to load.
61
68
62
- There 's more you can do to make our site fast for users.
69
+ Plus, there 's more you can do to make our site fast for users.
63
70
64
71
.l-main-section
65
72
:marked
66
73
## Minimizing your payload
67
74
68
75
One of the easiest optimizations you can do is to reduce the code users have to download.
69
76
70
- There are several techniques for achieving a smaller payload for your app:
77
+ There are several techniques for achieving a smaller payload for your app,
78
+ which will reduce the load time and improve the user experience:
71
79
72
80
- Bundling: concatenating several modules into a single file (bundle).
73
81
- Inlining: adding html and css as strings inside components.
@@ -79,6 +87,8 @@ a#overview
79
87
80
88
Each of these do different things overall, but they all work together and their effects
81
89
compound on each other.
90
+ Let's take a moment to better understand what each of these mean,
91
+ and the value that each of these bring.
82
92
83
93
### Fewer files
84
94
Bundling and inlining reduce your app's load time by serving fewer files and thus
@@ -104,7 +114,7 @@ a#overview
104
114
This allows Tree-Shaking to further remove exports.
105
115
106
116
You can read more about AoT Compilation in our [dedicated cookbook chapter](aot-compiler.html),
107
- where you'll also find instructions on how to use Rollup to perform all the optimizations shown here.
117
+ where you'll also find instructions on how to perform all the optimizations shown here.
108
118
109
119
Another great choice is [Webpack 2](https://webpack.js.org/) together with the
110
120
[Angular Ahead-of-Time Webpack Plugin](https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack).
@@ -161,17 +171,17 @@ code-example().
161
171
162
172
The Angular Router allows you to configure NgModules as being
163
173
[Lazy Loaded](https://angular.io/docs/ts/latest/guide/router.html#!#asynchronous-routing),
164
- which means that particular NgModule (and all it's code) is not loaded on the very first load.
174
+ which means that particular NgModule (and all its code) is not loaded on the very first load.
165
175
This allows your app to have a smaller initial load time by not loading modules until they
166
176
are needed.
167
177
168
178
A common mistake to make while lazy loading a module is to *also* have that module imported via
169
- a ES6 import.
179
+ an ES import.
170
180
If you do that, the module will never really be lazy loaded since the import statement will cause
171
181
it to be imported directly instead of being imported via the Router.
172
182
173
183
It's important to note that your bundling configuration must take lazy loading into consideration.
174
- Since there is no ES6 import for that module, bundlers don't know that they should also
184
+ Since there is no ES import for that module, bundlers don't know that they should also
175
185
separately bundle modules listed in the router config.
176
186
You have to manually create additional bundles for each lazy loaded Angular Module.
177
187
@@ -187,7 +197,8 @@ code-example().
187
197
Angular apps are
188
198
[Single Page Applications](https://en.wikipedia.org/wiki/Single-page_application) (SPAs),
189
199
which makes them the perfect candidates to be served by a simple static HTML server.
190
- No preprocessors required!
200
+ There is no need to have a server-side language composing the pages because
201
+ Angular will do it on the client-side.
191
202
192
203
There is only one configuration item required of a server hosting an Angular app:
193
204
it needs to fallback to `index.html` when being asked for a file the server does not have.
0 commit comments