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

Previous post Next post

Need any Help in your Project?Let's Talk

Latest Comments

OUR SERVICES

OPEN SOURCE PACKAGES

Django-CRM :Customer relationship management based on Django

Django-blog-it : django blog with complete customization and ready to use with one click installer Edit

Django-webpacker : A django compressor tool

Django-MFA : Multi Factor Authentication

Docker-box : Web Interface to manage full blown docker containers and images

More...

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

How to install?

How to use?

Need any Help in your Project?Let's Talk

How to maintain user session across sub domains in Django

What is Django CRM and it’s advantages

Implementation of single sign on using auth0 in django application

Customizing Django REST API Serializers

How to implement TokenBasedAuthentication in DjangoRestFramework?

Understanding middleware functionality in django2.0

Django acceptance testing automation with robot framework

How to filter a Django Queryset using Extra

Overriding Django Model behaviour with Proxy Model

how to pass extra context data to serializers in django-rest-framework ?

Understanding Routers in Django-Rest-Framework

Django Single Sign On(SSO) to multiple applications

How to Document API Requests using Django Rest Swagger

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

What's great about Django girls to inspire women into programming

How to use nested formsets in django

How to convert xml content into json using xmltodict

Custom validations for serializer fields Django Rest Framework

How To Add A Custom Managers In Django

Introduction to API development using Django REST framework with Example

Django-REST Framework Object Level Permissions and User Level Permissions

Using Python weasyprint generate HTML to PDF in django

How to create thumbnail image in Django templates using sorl-thumbnail?

Deploying Your Django app on Heroku

Django Template language Intro

Using Gitlab API, integrating gitlab in django project for authentication and access

Django Conditional Expressions in Queries

Sorl-thumbnail to generate thumbnails in django

How to Create initial django migrations for existing DB schema.

Django - Database access optimization

Querying with Django Q objects

Integration Of GitHub API with python django

Django - migrating from function based views to class based views

How To Write Custom migrations in Django

Dynamically Adding Google Maps with Marker In Django

Django Unit Test cases with Forms and Views

Understanding Checkout flow in Django Oscar.

How to monitor django application live events with sentry

Integration Of Linkedin API in python django

Django efficient implementation of Amazon s3 and Cloudfront CDN for faster loading.

How to create Custom User Model or Extend User Model in Django?

Working with Django Plugins

Export html web page to pdf using jspdf

Preserve file names with sorl for better SEO

Custom Password Less Authentication in Django

Improving page speed score in Google Page Score test- PART2

Extract text with OCR for all image types in python using pytesseract

Factory Boy - An alternative for Fixtures

Improving page speed score in Google Page Score test- PART1

Integration of 2checkout with django

Get count, average, min, max values from model field using Django Aggregate

Set Up Travis CI For Django project

Sending emails using sendgrid on heroku for a Django App

Django Custom Template Tags And Filters

Python Memcached Implementation for Django project

How to customize Django Oscar Models, Views and URL's

Integrate Django-Oscar-Accounts with Django-Oscar

Google plus API integration with django

Extract data from PDF and all Microsoft Office files in python

django Payu Payment gateway Integration

Running Django with PyPy to boost performance

How to Create your own e-commerce shop using Django-Oscar.

Setting Up Coveralls for Django Project

Sendgrid Inbound Email Parsing with django

How to customize the admin actions in list pages of Django admin?

Handling Custom Error Pages(404, 500) In Django

Autocomplete with Django-Haystack and Elasticsearch with single letter querying.

How to create Periodic Tasks with Django Celery?

Best Practices of Using Django Celery in Django Social Auth

Custom Decorators To Check User Roles And Permissions In Django

Implement search with Django-haystack and Elasticsearch Part-1

How to index binary files in django haystack

Understanding django serializers with examples

Introduction to Django's Class based views - Understanding how a class based view works

Understanding Django Permissions And Groups

Django Inclusion Tags