Skip to content

Simple demo to test various Webpack algorithms for chunks hashing

License

Notifications You must be signed in to change notification settings

Poky85/webpack-chunkhash-demo

Repository files navigation

webpack-chunkhash-demo

Simple demo to test various Webpack algorithms for chunks hashing

Purpose

It's not easy to create Webpack configuration that combines long-term caching and code splitting working side-by-side.

Requirements

  1. Cache output chunks as long as possible using Webpack's hashing feature (https://webpack.github.io/docs/long-term-caching.html).
  2. Given chunk's hash should stay the same if output chunk does not change.
  3. If any change in output chunk occurs then chunk's hash must change. Otherwise long-term caching would break things.

This demo reflects some hashing issues found. Especially:

Run test

git clone https://github.com/Poky85/webpack-chunkhash-demo.git webpack-chunkhash-demo
cd webpack-chunkhash-demo
npm install
npm run test

Test results

Script will produce builds for following Webpack hashing algorithms:

For each algorithm several different builds are created – so you can track what happens when something changes. Particular testscases are found in src directory.

Builds will be created in dist with following structure:

|-- webpack-default
    |-- testcase-1
        |-- src
        |-- dist
    |-- testcase-2
        |-- src
        |-- dist
    |-- testcase-3
        |-- src
        |-- dist

|-- webpack-md5-hash
    |-- testcase-1
        |-- src
        |-- dist
    |-- testcase-2
        |-- src
        |-- dist
    |-- testcase-3
        |-- src
        |-- dist

|-- webpack-chunk-hash
    |-- testcase-1
        |-- src
        |-- dist
    |-- testcase-2
        |-- src
        |-- dist
    |-- testcase-3
        |-- src
        |-- dist

About

Simple demo to test various Webpack algorithms for chunks hashing

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published