Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit 26872f7

Browse files
committed
incorporate John's feedback
1 parent 9c69f62 commit 26872f7

File tree

1 file changed

+24
-13
lines changed

1 file changed

+24
-13
lines changed

public/docs/ts/latest/cookbook/production-deploy.jade

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -25,20 +25,20 @@ a#overview
2525
:marked
2626
## Overview
2727

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.
2929

3030
Your development setup is optimized for build speed and rapid iteration, but when
3131
deploying to production you'll want to optimize for loading speed and payload size.
3232

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
3434
payload size, plus Angular and server configuration.
3535

3636
.l-main-section
3737
:marked
3838
## Simplest deploy possible
3939

4040
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.
4242

4343
1. Copy over your local project folder to your server.
4444
2. On your server, edit `index.html` to have the correct `<base href="/">` tag. If you are
@@ -47,27 +47,35 @@ a#overview
4747
3. Configure your server to redirect requests for missing files to `index.html` instead.
4848
[More on this later](#server-configuration).
4949

50-
And this is all you need to publish your app!
50+
This is all you need to publish your app!
5151

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.
5354

5455
For one, it has a lot of files that aren't even used when serving your site to users since it has
5556
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+
5661
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.
5865

5966
It also has a lot of small files. Each of those is going to take a whole round trip to get
6067
delivered to the browser, so it's not going to be that fast to load.
6168

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.
6370

6471
.l-main-section
6572
:marked
6673
## Minimizing your payload
6774

6875
One of the easiest optimizations you can do is to reduce the code users have to download.
6976

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:
7179

7280
- Bundling: concatenating several modules into a single file (bundle).
7381
- Inlining: adding html and css as strings inside components.
@@ -79,6 +87,8 @@ a#overview
7987

8088
Each of these do different things overall, but they all work together and their effects
8189
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.
8292

8393
### Fewer files
8494
Bundling and inlining reduce your app's load time by serving fewer files and thus
@@ -104,7 +114,7 @@ a#overview
104114
This allows Tree-Shaking to further remove exports.
105115

106116
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.
108118

109119
Another great choice is [Webpack 2](https://webpack.js.org/) together with the
110120
[Angular Ahead-of-Time Webpack Plugin](https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack).
@@ -161,17 +171,17 @@ code-example().
161171

162172
The Angular Router allows you to configure NgModules as being
163173
[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.
165175
This allows your app to have a smaller initial load time by not loading modules until they
166176
are needed.
167177

168178
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.
170180
If you do that, the module will never really be lazy loaded since the import statement will cause
171181
it to be imported directly instead of being imported via the Router.
172182

173183
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
175185
separately bundle modules listed in the router config.
176186
You have to manually create additional bundles for each lazy loaded Angular Module.
177187

@@ -187,7 +197,8 @@ code-example().
187197
Angular apps are
188198
[Single Page Applications](https://en.wikipedia.org/wiki/Single-page_application) (SPAs),
189199
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.
191202

192203
There is only one configuration item required of a server hosting an Angular app:
193204
it needs to fallback to `index.html` when being asked for a file the server does not have.

0 commit comments

Comments
 (0)