Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@o3r/ngx-prefetch
Advanced tools
@o3r/ngx-prefetch - npm Package Compare versions
Comparing version 16.2.0 to 16.3.0
@@ -102,3 +102,4 @@ "use strict"; | ||
| prefetchConfig: JSON.stringify(filterOptions(options, configOptions)), | ||
| staticsFullPath: options.staticsFullPath | ||
| staticsFullPath: options.staticsFullPath, | ||
| localizationPattern: options.localizationPattern | ||
| }; | ||
@@ -125,3 +126,3 @@ const prefetchJs = Mustache.render(prefetchTemplate, variables); | ||
| success: false, | ||
| error: `Webpack tanspilation failed. ${err || stats.hasErrors()}` | ||
| error: `Webpack transpilation failed. ${err || stats.hasErrors()}` | ||
| }); | ||
@@ -128,0 +129,0 @@ } |
@@ -12,4 +12,6 @@ import type { JsonObject } from '@angular-devkit/core'; | ||
| production: boolean; | ||
| /** By default the prefetched resources are hosted next to the `ngxPrefetch.js` file, on the same server. If it is not the case, you can configure the full path of the resources that will be prefetched. It is also possible to set this value by runtime. Instead of setting it in the Builder's options, you can search and replace for `{STATICS_FULL_PATH}` on the server side in order to inject a path. */ | ||
| /** By default the prefetched static resources are hosted next to the `ngxPrefetch.js` file, on the same server. If it is not the case, you can configure the full path of the static resources that will be prefetched. It is also possible to set this value at runtime. Instead of setting it in the Builder's options, you can search for `{STATICS_FULL_PATH}` and replace it on the server side in order to inject a path. */ | ||
| staticsFullPath: string; | ||
| /** Pattern for the path of the localization file. By default, the pattern corresponds to the JSON file in a folder called localizations. */ | ||
| localizationPattern: string; | ||
| } |
@@ -35,4 +35,9 @@ { | ||
| "type": "string", | ||
| "description": "By default the prefetched resources are hosted next to the `ngxPrefetch.js` file, on the same server. If it is not the case, you can configure the full path of the resources that will be prefetched. It is also possible to set this value by runtime. Instead of setting it in the Builder's options, you can search and replace for `{STATICS_FULL_PATH}` on the server side in order to inject a path.", | ||
| "description": "By default the prefetched static resources are hosted next to the `ngxPrefetch.js` file, on the same server. If it is not the case, you can configure the full path of the static resources that will be prefetched. It is also possible to set this value at runtime. Instead of setting it in the Builder's options, you can search for `{STATICS_FULL_PATH}` and replace it on the server side in order to inject a path.", | ||
| "default": "{STATICS_FULL_PATH}" | ||
| }, | ||
| "localizationPattern": { | ||
| "type": "string", | ||
| "description": "Pattern for the path of the localization file. By default, the pattern corresponds to the JSON file in a folder called localizations.", | ||
| "default": "/localizations/${language}.json" | ||
| } | ||
@@ -39,0 +44,0 @@ }, |
| { | ||
| "name": "@o3r/ngx-prefetch", | ||
| "version": "16.2.0", | ||
| "version": "16.3.0", | ||
| "description": "Angular builder for prefetching resources before loading the application", | ||
@@ -5,0 +5,0 @@ "main": "dist/index.js", |
@@ -7,3 +7,3 @@ | ||
| <br> | ||
| <b>Angular builder for prefetching static resources before loading the application.</b> | ||
| <b>Angular builder for prefetching resources before loading the application.</b> | ||
| <br><br> | ||
@@ -18,8 +18,8 @@ <img alt="npm" src="https://img.shields.io/npm/dw/@o3r/ngx-prefetch?color=red"> | ||
| ## Description | ||
| In some cases, it is possible to prefetch the static resources of an application before actually loading the application itself. For example, if the application can be accessed through a static web page or another web application. | ||
| In some cases, it is possible to prefetch the resources of an application before actually loading the application itself. For example, if the application can be accessed through a static web page or another web application. | ||
| The prefetch builder generates a `ngxPrefetch.js` file that should be included in the HTML page of the entry point. When run, it dynamically [creates `<link>` tags](https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ) for each static resource (such as JS and CSS files) so that the browser can prefetch them during idle times. This will improve the Page Load Time of the application when it is actually loaded. | ||
| The prefetch builder generates a `ngxPrefetch.js` file that should be included in the HTML page of the entry point. When run, it dynamically [creates `<link>` tags](https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ) for each resource (such as JS and CSS files) so that the browser can prefetch them during idle times. This will improve the Page Load Time of the application when it is accessed for the first time. Then, the browser caching will take over until a new version of the application is deployed or the browser cache is cleared. | ||
| ## Prerequisites | ||
| A prerequiste for the script is to have [Angular Service Worker](https://angular.io/guide/service-worker-intro) enabled as it is using the `ngsw.json` from the production build folder that is generated by the Angular Service Worker. Therefore it will be ran after the build prod. | ||
| A prerequisite for the script is to have [Angular Service Worker](https://angular.io/guide/service-worker-intro) enabled as it is using the `ngsw.json` from the production build folder that is generated by the Angular Service Worker. Therefore, it will be run after the build prod. | ||
@@ -31,35 +31,70 @@ ## Install | ||
| ``` | ||
| OR | ||
| ```shell | ||
| ng add @o3r/ngx-prefetch | ||
| ``` | ||
| > **NOTE:** This library is following the Angular release cycle. For instance, if you are using Angular 13, use a 13.x version of the library: | ||
| > | ||
| > ```shell | ||
| > npm install -D @o3r/ngx-prefetch@13 | ||
| > ``` | ||
| > OR | ||
| > ```shell | ||
| > ng add @o3r/ngx-prefetch@13 | ||
| > ``` | ||
| ## Builder options | ||
| - `targetBuild` **Mandatory** The target build where prefetch should be applied. Used for identifying the `outputPath` of the build. | ||
| ## Get started | ||
| - `resourceTypes` An object describing the resource types that should be prefetched. | ||
| 1. By running the `ng add` command above, the following lines should have been added to the application's `angular.json`: | ||
| - `crossorigin` Flag that sets crossorigin attribute on links. If true it will be set for all prefetched resources. | ||
| ```json | ||
| "generate-prefetch": { | ||
| "builder": "@o3r/ngx-prefetch:run", | ||
| "options": { | ||
| "targetBuild": "app-name:build:production" | ||
| } | ||
| }, | ||
| ``` | ||
| - `production` Flag for creating a production (minified) version of the js file or a development one. | ||
| > **NOTE:** Additional configuration can be added to the `angular.json` (builder options are described below with an example of full configuration). | ||
| - `staticsFullPath` By default the prefetched resources are hosted next to the `ngxPrefetch.js` file, on the same server. If it is not the case, you can configure the full path of the resources that will be prefetched. (ex: https://my-web-app.com/path/to/my-app/). It is also possible to set this value by runtime. Instead of setting it in the Builder's options, you can search and replace for `{STATICS_FULL_PATH}` on the server side in order to inject a path. | ||
| ## Usage | ||
| 2. Then, add a command to the `package.json` to run `generate-prefetch`: | ||
| [`package.json`] | ||
| ```json | ||
| ... | ||
| "build:prod": "ng build --prod && yarn run generate:prefetch", | ||
| "generate:prefetch": "yarn app-name:generate-prefetch", | ||
| ... | ||
| "generate:prefetch": "ng run app-name:generate-prefetch" | ||
| ``` | ||
| [`angular.json`] | ||
| 3. Run the `ng build` command with the `production` configuration. | ||
| The default configuration of the build command should be `production`, otherwise it should be specified: | ||
| ```json | ||
| "generate-prefetch": { | ||
| "builder": "@o3r/ngx-prefetch:run", | ||
| "options": { | ||
| "targetBuild": "my-app:build:production" | ||
| } | ||
| }, | ||
| ... | ||
| "build:prod": "ng build --configuration production", | ||
| ... | ||
| ``` | ||
| 4. Run the previously defined `generate:prefetch` command. | ||
| ## How it works | ||
| Please refer to the details on how the ngx-prefetch works [here](docs/HOW_IT_WORKS.md). | ||
| ## Builder options | ||
| - `targetBuild` **Mandatory** The target build where prefetch should be applied. Used for identifying the `outputPath` of the build. | ||
| - `resourceTypes` An object describing the resource types that should be prefetched. The valid values for the type of content can be found [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attributes). | ||
| - `crossorigin` Flag that sets the crossorigin attribute on links. If true it will be set for all prefetched resources. | ||
| - `production` Flag for creating a production (minified) version of the js file or a development one. | ||
| - `staticsFullPath` By default the prefetched resources are hosted next to the `ngxPrefetch.js` file, on the same server. | ||
| If this is not the case, you can configure the full path of the resources that will be prefetched (ex: https://my-web-app.com/path/to/my-app/). | ||
| It is also possible to set this value at runtime. Instead of setting it in the Builder's options, you can search for `{STATICS_FULL_PATH}` and replace it on the server side in order to inject a path. | ||
| - `localizationPattern` Pattern for the relative path of the localization file. By default, the pattern corresponds to the JSON file in a folder called localizations: `"/localizations/${language}.json"`. | ||
| If the localization pattern contains the `${language}` variable, the language value must be set (as explained [here](docs/HOW_IT_WORKS.md#localization)), and it will be replaced by the server. | ||
| ### Example of full configuration | ||
| [`angular.json`: full configuration] | ||
@@ -81,15 +116,6 @@ | ||
| "production": false, | ||
| "staticsFullPath": "https://my-web-app.com/path/to/my-app/" | ||
| "staticsFullPath": "https://my-web-app.com/path/to/my-app/", | ||
| "localizationPattern": "/localizations/${language}.json" | ||
| } | ||
| }, | ||
| } | ||
| ``` | ||
| ## Versioning | ||
| This library is following the Angular release cycle. Angular 13 and onwards is supported. | ||
| For instance, if you are using Angular 13, use a 13.x version of the library: | ||
| ```shell | ||
| npm install -D @o3r/ngx-prefetch@13 | ||
| ``` |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by10.28%
31336
- Lines of code
- increased by2.36%
347
- Number of lines in readme file
- increased by28.26%
118
No dependency changes