diff --git a/docs/deployment.md b/docs/deployment.md index bd87b9bbc..5e6326f18 100644 --- a/docs/deployment.md +++ b/docs/deployment.md @@ -1,7 +1,7 @@ # Deployment -Webpacker hooks up a new `webpacker:compile` task to `assets:precompile`, which gets run whenever you run `assets:precompile`. +Webpacker hooks up a new `webpacker:compile` task to `assets:precompile`, which gets run whenever you run `assets:precompile`. If you are not using Sprockets `webpacker:compile` is automatically aliased to `assets:precompile`. Remember to set NODE_ENV environment variable to production during deployment or when running the rake task. The `javascript_pack_tag` and `stylesheet_pack_tag` helper method will automatically insert the correct HTML tag for compiled pack. Just like the asset pipeline does it. @@ -34,7 +34,7 @@ We're essentially doing the following here: * Creating an app on Heroku * Creating a Postgres database for the app (this is assuming that you're using Heroku Postgres for your app) -* Adding the Heroku NodeJS and Ruby buildpacks for your app. This allows the `npm` or `yarn` executables to properly function when compiling your app - as well as Ruby. +* Adding the Heroku NodeJS and Ruby buildpacks for your app. This allows the `npm` or `yarn` executables to properly function when compiling your app - as well as Ruby. * Pushing our code to Heroku and kicking off the deployment @@ -42,7 +42,7 @@ We're essentially doing the following here: Webpacker doesn't serve anything in production. You’re expected to configure your web server to serve files in public/ directly. -Some servers support sending precompressed versions of files with the `.gz` extension when they're available. For example, nginx offers a `gzip_static` directive. +Some servers support sending precompressed versions of files when they're available. For example, nginx offers a `gzip_static` directive that serves files with the `.gz` extension to supported clients. With an optional module, nginx can also serve Brotli compressed files with the `.br` extension (see below for installation and configuration instructions). Here's a sample nginx site config for a Rails app using Webpacker: @@ -71,11 +71,24 @@ server { location ^~ /packs/ { gzip_static on; + brotli_static on; # Optional, see below expires max; } } ``` +### Installing the ngx_brotli module + +If you want to serve Brotli compressed files with nginx, you will need to install the `nginx_brotli` module. Installation instructions from source can be found in the official [google/ngx_brotli](https://github.com/google/ngx_brotli) git repository. Alternatively, depending on your platform, the module might be available via a pre-compiled package. + +Once installed, you need to load the module. As we want to serve the pre-compressed files, we only need the static module. Add the following line to your `nginx.conf` file and reload nginx: + +``` +load_module modules/ngx_http_brotli_static_module.so; +``` + +Now, you can set `brotli_static on;` in your nginx site config, as per the config in the last section above. + ## CDN Webpacker out-of-the-box provides CDN support using your Rails app `config.action_controller.asset_host` setting. If you already have [CDN](http://guides.rubyonrails.org/asset_pipeline.html#cdns) added in your Rails app @@ -106,4 +119,3 @@ namespace :deploy do end end ``` - diff --git a/package/environments/production.js b/package/environments/production.js index 5f720460e..5c71540e3 100644 --- a/package/environments/production.js +++ b/package/environments/production.js @@ -18,6 +18,18 @@ module.exports = class extends Base { }) ) + if ('brotli' in process.versions) { + this.plugins.append( + 'Compression Brotli', + new CompressionPlugin({ + filename: '[path].br[query]', + algorithm: 'brotliCompress', + cache: true, + test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/ + }) + ) + } + this.plugins.append( 'OptimizeCSSAssets', new OptimizeCSSAssetsPlugin({