Two years ago, I wrote an article using itrollup ComeCompile Angular 2 applications for production environmentsarticle, because there was no angular-cli project at that time. Now that Angular has arrived, the corresponding tools are also very complete, so rollup is not used to handle angular projects.
Although angular-cli is convenient to use, there are still some things to pay attention to when compiling for production environments. Next, I will introduce some of my practices when deploying the project.
Reasonably split the functional modules and load them as needed
A system often has many functions, so it is necessary to divide the functional modules according to the actual situation of the project. A functional module corresponds to an NgModule, compiles it into an independent js file, and loads it on demand with angular routing technology. In terms of this function, angular's support has been very perfect.
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', loadChildren: './home/#HomeModule' },
{ path: 'about', loadChildren: './about/#AboutModule' },
{
path: 'arcgis',
loadChildren: './arcgis/#ArcgisModule',
canLoad: [EsriLoaderGuard]
}
];
This point is often easily overlooked. There has been a hesitation and no reasonable division of modules, resulting in the compiled js files up to 5 megabytes, resulting in a very poor customer experience. (There is even a situation where the development machine has insufficient memory and cannot be successfully compiled)
Pre-compress js files
Of course, it is often not enough to just divide the js modules reasonably, because a single module may also be larger, which may exceed 1 megabyte, especially when some third-party controls (ng-bootstrap, ng-zorro, etc.) are used.
In this case, the compiled js file is usually also required to gzip compression, so it is executed ng build --prod After compilation, continue to execute the following shell command:
find dist -name "*.js" -print0 | xargs -0 gzip -k
Of course, if you find that the compiled and generated css file is relatively large, you can also compress it through the following command:
find dist -name "*.css" -print0 | xargs -0 gzip -k
Taking a template project that only uses ng-bootstrap as an example, the generated js file is as follows:
1.8K dist/ng-seed/4. 1.7K dist/ng-seed/5. 482K dist/ng-seed/main. 37K dist/ng-seed/polyfills. 2.2K dist/ng-seed/runtime.
Among them main. There is 482KB, and after gzip compression, the file size is significantly reduced:
1.8K dist/ng-seed/4. 1.0K dist/ng-seed/4. 1.7K dist/ng-seed/5. 888B dist/ng-seed/5. 482K dist/ng-seed/main. 124K dist/ng-seed/main. 37K dist/ng-seed/polyfills. 12K dist/ng-seed/polyfills. 2.2K dist/ng-seed/runtime. 1.2K dist/ng-seed/runtime.
main. There are 124KB, only 1/4 of the original one.
Generally speaking, for js files compiled by the angular project, gzip compression can reduce the volume by 3/4 or even 4/5, which will significantly reduce the pressure on network transmission.
Use nginx as server
Why use nginx as the front-end server? The reasons are as follows:
Supports the transfer of pre-compressed js files
Upload the pre-compressed . and the original .js file to the server. Just add a gzip_static on; to the nginx server configuration file. In this way, when the client requests the .js file, nginx will first check whether the corresponding . file exists. If it exists, it will directly return the content of the . file, thus eliminating the compression process on the server and saving server resources.
location /ng-app {
root /usr/share/nginx/html;
index ;
gzip_static on;
try_files $uri /ng-app/;
}
Gateway as backend interface
nginx supports reverse proxy and can be used as a gateway to the background interface, which can eliminate some cross-domain calls (cors). The general reverse proxy configuration is as follows:
location /api {
proxy_pass http://api-server:8080/api;
proxy_read_timeout 600s;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
Official docker image
nginx has an official docker image, which is very convenient for deployment and upgrade. I have to say that docker is indeed a good thing, and I can't stop using it.
These points are some tips accumulated in the project. If you want to know the details, please check thisng-seed project.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.