angular-css-shrink

    0.0.4 • Public • Published

    Angular Css Shrink

    A Post analysis script to automatically reduce the size of CSS for Angular App (should work with other frameworks too)

    Table of contents

    Prerequist

    NodeJs > 12.19.0

    • Has been tested on Angular 10 and 11
    • Has been tested with bootstrap, ng-bootstrap, boosted, ng*boosted, angular material

    Extra js and css file used in your angular project should be declared in your angular json file to be in the compiler scope. Css files declared in index.html are not taken into account

    angular.json

               ...
               "styles": [
                  "./src/styles.scss",
                  "node_modules/boosted/scss/boosted.scss",
                  "./icons/retailers-v1.0/style.css",
                  "node_modules/boosted/dist/css/orangeHelvetica.css",
                  "node_modules/ng-boosted/style/ng-boosted.scss"
                ],
                "scripts": []
                ...
    

    Installation

    step 1 : install the plugin

    npm install -d angular-css-shrink

    Step 2 : create a webpack config file at the root of your project (or update )

    extra-webpack.config.js :

    var AngularCssShrink = require('angular-css-shrink');
    
    module.exports = {
      plugins: [new AngularCssShrink({ debug: false })]
    };

    Step3 : Update your angular.json

    To use extra webpack plugin use @angular-builders instead of @angular-devkit and add customWebpackConfig option to configure the webpack config js file

    replace

    "architect": {
            "build": {
                "builder": "@angular-devkit/build-angular:browser",
                "options": {
                "aot": true,
                "outputPath": "dist/myDummyProject",
                "index": "src/index.html",

    with

    "architect": {
        "build": {
              "builder": "@angular-builders/custom-webpack:browser",
               "options": {
                "customWebpackConfig": {
                  "path": "./extra-webpack.config.js"
                },
                "aot": true,
                "outputPath": "dist/myDummyProject",
                "index": "src/index.html",

    To run angular css shrink on ng serve

    replace

         "serve": {
              "builder": "@angular-devkit/build-angular:dev-server",

    with

       "serve": {
              "builder": "@angular-builders/custom-webpack:dev-server",

    Usage

    run your regular ng serve or ng build command, css is now automatically shrinked

    Copyright and license

    Angular Css Shrink code and documentation copyright 2021 the Angular Css Shrink Authors and Orange SA. Code released under the MIT License.

    Install

    npm i angular-css-shrink

    DownloadsWeekly Downloads

    4

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    14.8 kB

    Total Files

    6

    Last publish

    Collaborators

    • julienfaure