By continuing to navigate on this website, you accept the use of cookies to serve you more relevant services & content.
For more information and to change the setting of cookies on your computer, please read our Cookie Policy.

Django webpacker - A compression tool to bundles css, js files

In production, it's challenging to developers to improve the performance of an application. One of the technique to improve performance is compressing the CSS, js files into a single file. Django webpacker provides you a single compressed CSS, js file to the page.

Instead of generating compressed files for every request in production, we're generating compressed css, js files, updates to html file in the development only. Django webpacker really helps you to generate these compressed files with webpack

Django webpacker is a django compressor tool which bundles css, js files to a single css, js file with webpack and updates your html files with respective css, js file path with a single management command..

Django webpacker uses webpack, npm, aws s3 services to provide its features in an effective way.

  • Webpack is a system for bundling the front-end assets of a web application into a few static resources that represent the bulk of the application's CSS, Javascript, and images.
  • npm  makes it easy for JavaScript developers to share the code that they've created to develop applications. With the help of packages(A reusable code) will generate compressed  css , js files.
  • Django webpacker also supports django-storages to load compressed static files from AWS S3. You need to add aws s3 details in your application settings file.

It provides you to generate compressed css, js files for each app of your application. For Ex. If you've different pages for the frontend, backend module, you can generate different compressed files for each frontend, backend modules.

How to install?

    pip install django-webpacker

            (or)

    git clone git://github.com/micropyramid/django-webpacker.git

    cd django-webpacker

    python setup.py install

How to use?

1. Add app name in your project settings.py file:

    INSTALLED_APPS = [

       '..................',

       'django-webpacker',

       '..................'

    ]

2. Run npm init to initialize npm modules and it will create ‘package.json’ a file which will contain package information. Update file with following dependencies:

npm init
    "devDependencies": {

       "babel": "^6.23.0",

       "babel-core": "^6.24.0",

       "babel-loader": "^6.4.1",

       "css-loader": "^0.28.0",

       "extract-text-webpack-plugin": "^2.1.0",

       "file-loader": "^0.11.1",

       "html-webpack-inline-source-plugin": "0.0.7",

       "html-webpack-plugin": "^2.28.0",

       "image-webpack-loader": "^3.3.0",

       "less-loader": "^4.0.3",

       "node-sass": "^4.5.2",

       "sass-loader": "^6.0.3",

       "script-loader": "^0.7.0",

       "style-loader": "^0.16.1",

       "webpack": "^2.3.3",

       "webpack-bundle-tracker": "^0.2.0",

       "webpack-dev-server": "^2.4.2"

    },

    "dependencies": {

        "imports-loader": "^0.7.1",

        "jquery": "^3.2.1"

    }

3. Run npm install to install all package dependencies.

    npm install

4. Updates Your html file with the following script, link stylesheet tags.

    <link rel=”stylesheet” type=”text/css” href=”” id=”packer_css”/>

    <script id=”packer_js” src=”” type=”text/javascript”></script>

5. Create webpack.config.js file with webpack.config.js file data. Update your project entry points with their respective paths. We can give multiple entry points(i.e separate entry point for each app) for the project. After compressing, separate css, file will be genarated with respective entry point name.

6. Add the following details in settings file about compressing css, js files:

    WEB_PACK_FILES = [

        {'html_file_name': {{ HTML_FILE_RELATIVE_PATH }},

         'webpack_js': {{ WEBPACK_ENTRY_POINT_KEY_NAME }},

        },

        {'html_file_name': {{ HTML_FILE_RELATIVE_PATH }},

         'webpack_js': {{ WEBPACK_ENTRY_POINT_KEY_NAME }},

         },

        {'html_file_name': {{ HTML_FILE_RELATIVE_PATH }}',

         'webpack_js': {{ WEBPACK_ENTRY_POINT_KEY_NAME }},

         },

    ]

7. Run the following command to generate compressed css, js file. It will updates html file with respective compressed css, js files. Link, script tags will be loaded with compressed css, js files.

    python manage.py compress_css_js_files

8. If you use django storages, then add the following variable to settings file to load compressed css, js files from s3.

    # AWS details

    AWS_ACCESS_KEY_ID = “Your AWS Access Key”

    AWS_SECRET_ACCESS_KEY = “Your AWS Secret Key”

    AWS_BUCKET_NAME = “Your AWS Bucket Name”

    ENABLE_DJANGO_WEBPACK_AWS = True


We're providing a sample application for how to add django-webpacker(https://github.com/MicroPyramid/django-webpacker/tree/master/sample_project). If you want any new features, create github ticket.

You can view the complete documentation here. http://django-webpacker.readthedocs.io/en/latest/

Github Repository:  https://github.com/MicroPyramid/django-webpacker

    Posted On
  • 10 May 2017
  • By
  • Micropyramid

Need any Help in your Project?Let's Talk

Latest Comments
Related Articles
Django Generic many to many field implementation

Django application has a GM2MField that combines the features of the standard Django "ManyToManyField" and "GenericForeignKey".

Installation:
pip install django-gm2m

Continue Reading...
Improving page speed score in Google Page Score test- PART1

Google's Page Speed Insights measures the performance of a page for mobile devices and desktop devices. It fetches the url twice, once with a mobile ...

Continue Reading...
Running Django with PyPy to boost performance

Running Django with PyPy to boost performance

Continue Reading...
open source packages

Subscribe To our news letter

Subscribe and Stay Updated about our Webinars, news and articles on Django, Python, Machine Learning, Amazon Web Services, DevOps, Salesforce, ReactJS, AngularJS, React Native.
* We don't provide your email contact details to any third parties