fwouts / bazel-javascript

JavaScript and TypeScript rules for Bazel (React friendly)
MIT License
65 stars 17 forks source link

Use the MiniCssExtractPlugin loader in prod mode #42

Closed borgstrom closed 5 years ago

borgstrom commented 5 years ago

Hi again, @fwouts 👋

I noticed that the MinCssExtractPlugin was being wired up in the plugins, but that my bundles didn't contain .css files.

https://github.com/zenclabs/bazel-javascript/blob/68f8fbb/internal/web_bundle/create_webpack_config.js#L206-L213

Assets: 
  vendors.6da814537306d64a3dfd.js (1.12 MiB)
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (1.13 MiB)
      runtime~main.6b090734559577c38d3f.js
      vendors.6da814537306d64a3dfd.js
      main.08d5e5a6765d3f845f23.js

webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
Target //web/apps/admin:prod up-to-date:
  bazel-bin/web/apps/admin/prod_bundle

This PR uses the MiniCssExtractPlugin.loader in production mode and style-loader otherwise, per https://github.com/webpack-contrib/mini-css-extract-plugin#advanced-configuration-example

My bundle now looks like:

Assets: 
  vendors.c8cd3ea9c2a4ad36dbb8.js (1.1 MiB)
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (1.12 MiB)
      runtime~main.6b090734559577c38d3f.js
      vendors.c8cd3ea9c2a4ad36dbb8.chunk.css
      vendors.c8cd3ea9c2a4ad36dbb8.js
      main.e6e96dba7f6f5e6ee764.chunk.css
      main.e6e96dba7f6f5e6ee764.js

webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
Target //web/apps/admin:prod up-to-date:
  bazel-bin/web/apps/admin/prod_bundle

Thanks again for these rules!

CLAassistant commented 5 years ago

CLA assistant check
All committers have signed the CLA.

fwouts commented 5 years ago

@borgstrom This is now included in 0.0.27.