Resources
-Here are some links to help you get started:
- -Next Steps
-What do you want to do next with your app?
- - - -ng generate component xyz-
ng add @angular/material-
ng add @angular/pwa-
ng add _____-
ng test-
ng build-
diff --git a/README.md b/README.md index 9be152c..105c2c9 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,17 @@ -# Tree Shaking in Angular +# Syncfusion Angular Tree Shaking -The Angular CLI relies on the Webpack bundler to manage and bundle your application's code. Starting from version 2, Webpack introduced full-fledged support for tree shaking. As a result, when you build your Angular application using the Angular CLI, Webpack analyzes your codebase and automatically removes any unreachable or unused code segments. +This project demonstrates tree shaking with Syncfusion Angular components. For further details, refer to the [Syncfusion Angular Tree Shaking](https://ej2.syncfusion.com/angular/documentation/frameworks-and-feature/tree-shaking) documentation. -## Using Syncfusion with Tree Shaking +## Run the sample project -Syncfusion Angular components seamlessly support Tree Shaking by default, eliminating the need for any special modifications at the application level. Tree Shaking is a powerful technique that reduces the size of your application's bundle by removing unused code modules. This leads to faster load times and better overall performance. +* Clone the repository of the Syncfusion Angular Tree Shaking project by using the git clone command. -## Implementing Tree Shaking in an Angular Application +```bash +git clone https://github.com/SyncfusionExamples/syncfusion-angular-tree-shaking.git +``` -Enabling Tree Shaking in your Angular application, especially when utilizing Syncfusion EJ2 Angular components, is a straightforward process that can significantly enhance your application's efficiency. +* Use NPM to install the required dependencies by running the `npm install` command. -### Steps to Enable Tree Shaking +* Run `npm run build:map` to build the project and generate [source maps](https://angular.io/cli/build#options) for analyzing the bundle size. The build artifacts will be stored in the `dist/` directory. Source maps slightly increase the bundle size and are not recommended for production. Here, we use source maps to analyze the bundle size of the application. -Follow these steps to enable Tree Shaking in your Angular application, - -1. Create an Angular Application with Syncfusion Components: Begin by setting up your Angular application with Syncfusion EJ2 Angular components. You can find detailed instructions on how to integrate Syncfusion components into your application in the [Getting Started](../getting-started/angular-cli/) documentation using the [Angular CLI](https://cli.angular.io/). - -2. Build or Serve with Tree Shaking: Once your application is configured with Syncfusion components, you can enable Tree Shaking by building or serving the application with production settings. Run the `ng build --configuration=production` or `ng serve --configuration=production` command to build or serve the application with Tree Shaking enabled. - -By adhering to these steps and integrating tree shaking into your Angular application, you can significantly enhance performance and elevate the user experience. \ No newline at end of file +* Run `npm run analyze` to analyze the bundle size of the application. The Analyzer tool will be launched in the browser with the bundle size details. \ No newline at end of file diff --git a/angular.json b/angular.json index bb79476..8305f6c 100644 --- a/angular.json +++ b/angular.json @@ -3,7 +3,7 @@ "version": 1, "newProjectRoot": "projects", "projects": { - "syncfusion-angular-app": { + "Syncfusion-Angular-Tree-Shaking": { "projectType": "application", "schematics": {}, "root": "", @@ -11,11 +11,11 @@ "prefix": "app", "architect": { "build": { - "builder": "@angular-devkit/build-angular:browser", + "builder": "@angular-devkit/build-angular:application", "options": { - "outputPath": "dist/syncfusion-angular-app", + "outputPath": "dist/syncfusion-angular-tree-shaking", "index": "src/index.html", - "main": "src/main.ts", + "browser": "src/main.ts", "polyfills": [ "zone.js" ], @@ -25,25 +25,17 @@ "src/assets" ], "styles": [ - "src/styles.css", - "./node_modules/@syncfusion/ej2-material-theme/styles/material.css" + "src/styles.css" ], "scripts": [] }, "configurations": { "production": { - "optimization": true, - "sourceMap": false, - "namedChunks": false, - "aot": true, - "extractLicenses": true, - "vendorChunk": false, - "buildOptimizer": true, "budgets": [ { "type": "initial", - "maximumWarning": "6mb", - "maximumError": "6mb" + "maximumWarning": "5mb", + "maximumError": "5mb" }, { "type": "anyComponentStyle", @@ -51,15 +43,17 @@ "maximumError": "4kb" } ], - "outputHashing": "all" + "outputHashing": "all", + "optimization": true, + "sourceMap": false, + "namedChunks": false, + "aot": true, + "extractLicenses": true }, "development": { - "buildOptimizer": false, "optimization": false, - "vendorChunk": true, "extractLicenses": false, - "sourceMap": true, - "namedChunks": true + "sourceMap": true } }, "defaultConfiguration": "production" @@ -68,10 +62,10 @@ "builder": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { - "browserTarget": "syncfusion-angular-app:build:production" + "buildTarget": "Syncfusion-Angular-Tree-Shaking:build:production" }, "development": { - "browserTarget": "syncfusion-angular-app:build:development" + "buildTarget": "Syncfusion-Angular-Tree-Shaking:build:development" } }, "defaultConfiguration": "development" @@ -79,7 +73,7 @@ "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { - "browserTarget": "syncfusion-angular-app:build" + "buildTarget": "Syncfusion-Angular-Tree-Shaking:build" } }, "test": { @@ -95,16 +89,12 @@ "src/assets" ], "styles": [ - "src/styles.css", - "./node_modules/@syncfusion/ej2-material-theme/styles/material.css" + "src/styles.css" ], "scripts": [] } } } } - }, - "cli": { - "analytics": "ec65ef7b-4313-4c7f-9d42-d3587151da1b" } -} \ No newline at end of file +} diff --git a/package.json b/package.json index e23a9db..1ba3294 100644 --- a/package.json +++ b/package.json @@ -1,40 +1,42 @@ { - "name": "syncfusion-angular-app", + "name": "syncfusion-angular-tree-shaking", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", + "build:map": "ng build --source-map=true", "watch": "ng build --watch --configuration development", - "test": "ng test" + "test": "ng test", + "analyze": "source-map-explorer dist/syncfusion-angular-tree-shaking/**/*.js --no-border-checks" }, "private": true, "dependencies": { - "@angular/animations": "^16.2.0", - "@angular/common": "^16.2.0", - "@angular/compiler": "^16.2.0", - "@angular/core": "^16.2.0", - "@angular/forms": "^16.2.0", - "@angular/platform-browser": "^16.2.0", - "@angular/platform-browser-dynamic": "^16.2.0", - "@angular/router": "^16.2.0", - "@syncfusion/ej2-angular-grids": "^22.2.11", + "@angular/animations": "^17.0.0", + "@angular/common": "^17.0.0", + "@angular/compiler": "^17.0.0", + "@angular/core": "^17.0.0", + "@angular/forms": "^17.0.0", + "@angular/platform-browser": "^17.0.0", + "@angular/platform-browser-dynamic": "^17.0.0", + "@angular/router": "^17.0.0", + "@syncfusion/ej2-angular-grids": "^24.1.43", "rxjs": "~7.8.0", + "source-map-explorer": "^2.5.3", "tslib": "^2.3.0", - "zone.js": "~0.13.0", - "@syncfusion/ej2-material-theme": "~22.2.11" + "zone.js": "~0.14.2" }, "devDependencies": { - "@angular-devkit/build-angular": "^16.2.1", - "@angular/cli": "~16.2.1", - "@angular/compiler-cli": "^16.2.0", - "@types/jasmine": "~4.3.0", - "jasmine-core": "~4.6.0", + "@angular-devkit/build-angular": "^17.0.7", + "@angular/cli": "^17.0.7", + "@angular/compiler-cli": "^17.0.0", + "@types/jasmine": "~5.1.0", + "jasmine-core": "~5.1.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", - "typescript": "~5.1.3" + "typescript": "~5.2.2" } -} \ No newline at end of file +} diff --git a/src/app/app.component.html b/src/app/app.component.html index 2a0fbf1..1b7a787 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,484 +1,15 @@ - - - - - - - - - - - -
- -Here are some links to help you get started:
- -What do you want to do next with your app?
- - - -ng generate component xyz-
ng add @angular/material-
ng add @angular/pwa-
ng add _____-
ng test-
ng build-