#987 optimizing and compressing webpack assets

[pushyamig]

Solves #996 , #648
Resolves #987
Resolves #648

I was able to split the single JS file to source code + vendor assets and Was able to compress it as. I see issues with compression is implemented. django-webpack-loader depends on webpack-bundle-tracker

1. index.html simply changes to

{% render_bundle 'main' 'js' %}
    {% render_bundle 'vendors' 'js' %}

2. webpack-stats.json content is

{
  "status": "done",
  "chunks": {
    "main": [
      {
        "name": "main-e5185de39171058cfd22.js",
        "path": "/usr/src/app/assets/dist/main-e5185de39171058cfd22.js"
      }
    ],
    "vendors": [
      {
        "name": "vendors-e5185de39171058cfd22.js",
        "path": "/usr/src/app/assets/dist/vendors-e5185de39171058cfd22.js"
      }
    ]
  }
}

1. When webpack is set on prod mode I can see that browser is loading the gzip content.
   

webpack_watcher    |       main-e5185de39171058cfd22.js   384 KiB     main  [emitted]  main
webpack_watcher    |    main-e5185de39171058cfd22.js.gz  47.1 KiB           [emitted]
webpack_watcher    |    vendors-e5185de39171058cfd22.js  16.1 MiB  vendors  [emitted]  vendors
webpack_watcher    | vendors-e5185de39171058cfd22.js.gz  1.49 MiB           [emitted]

The below screenshot show the download is based on the zipped file size

2. Webpack in watch mode a change on react code updates both main and vendor mode but compression of the vendor packages doesn't work. I am really not sure why this is the case

   1. With regards to webpack-bundle-tracker a new update is available but it has some breaking webpack-stats.json structure that python loader fails to load the json. Either I have to write my own Python loader class to support this as started here

With version "webpack-bundle-tracker": "^0.4.3", and django-webpack-loader==0.7.0 things kind of works but upgrading to webpack-bundle-tracker": "1.0.0-alpha.1 " breaks stuff. Need to spend sometime as their documentation is very basic and i have been looking at github issues to understand what exactly going on

[pushyamig]

@justin0022 @jonespm Thoughts???

[jonespm]

Thanks for the work. I wouldn't install any alpha modules, 0.4.3 looks like the last released version non-alpha or beta. Maybe create this for a future issue to look at.

Good idea on the split, Maybe we can also just ignore changes to the vendors since those files aren't going to change unless we do a full rebuild anyway. This should make the watch run a little faster too.

https://webpack.js.org/configuration/watch/#watchoptionsignored

[pushyamig]

Thanks for the work. I wouldn't install any alpha modules, 0.4.3 looks like the last released version non-alpha or beta. Maybe create this for a future issue to look at.

That's what going on in my mind. The guy who developed django-webpack-watcher is the sole maintainer and he is busy too and that kind of scares me relying on his package.

SO in prod mode .gz.js are served when a request to js file is made. This Post here states that Server usually doing that. I suppose Gunicorn server is doing by defaults. The WSGI server also does this when '--nostatic' flag set: ./manage.py runserver --nostatic

https://webpack.js.org/configuration/watch/#watchoptionsignored

That did not work

The problem I am trying to solve is to load the compressed files in the watch mode, this work only for first couple of times. In watch mode after few JS files changes vendor.js.gz file is not generated but main.js.gz , main.js and vendor.js does. Somehow browser load the uncompressed version of even main.js file when it see vendor.js.gz is not available. This will increase the load time in development. May be something in compression-webpack-pluginto look at?

[jonespm]

Yeah, I suppose gunicorn is doing that.

I'd was planning to to remove the runserver and when PTVSD is enabled it can start up with gunicorn as long as there's only one worker. That would make this a little more consistent.

Yeah, I was thinking of some watchOptions like this, but might be related?

+  watchOptions: {
+    ignored: /node_modules/,
+    aggregateTimeout: 600
+  },

[pushyamig]

This post suggest that not to do hashing for generating the js/css etc in development since it will slows down the build.

When I don't generate js with hashing it solves 2 problem

1. The dist folder is not cluttered with lost of hash file after changes to React code
2. This kind of solves the problem that I stated here(look in the last paragraph), since it will always finds the verdor.js.gz and browser always load the gz file

The annoyance part every time we need to do a browser cache clean before browser reload.

Fact: When pkg's are updated in package.json watch mode don't pick up those changes any way and we need a docker build

[pushyamig]

I could achieve optimization for Prod build, but for development on watch mode don't generated hashed zip file after couple of time. I really did not find a solution for this and I don't know if there is solution. More on this issue here

I am opening up this for a review, I appreciate any feedback on this

[jonespm]

Here is an overview of what got changed by this pull request:

Issues
======
- Added 3
           

See the complete overview on Codacy

[lsloan]

I have a minor suggestion and a question, see below…

[lsloan]

Nit: Add newline to end of file. I know it's not a change made for this PR, but it's an easy thing to catch and correct.

[jonespm]

I like this change and don't see too many other reviews on this. Can you update the start script conflicts @pushyamig ?

[pushyamig]

I forgot what I did with this PR since it has been a long time :) I will update and check back