1

I have been reading this article: https://www.codementor.io/@vuejsdevelopers/critical-css-and-webpack-automatically-minimize-render-blocking-css-aaifvn8vw

I wish to automate the build of a critical CSS file that gets inlined into my application.html.erb view file.

The problem is that I'm unsure how to integrate the Webpack plugin into my app. I'm unsure which file to modify and how as the article doesn't relate to Webpacker.

The files I have are:

webpacker.yml:

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  check_yarn_integrity: false
  webpack_compile_output: true

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: ['../node_modules']

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  # Extract and emit a css file
  extract_css: false

  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2
    - .webp

  extensions:
    - .mjs
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
  check_yarn_integrity: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    pretty: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'


test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

webpack/development.js:

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const environment = require('./environment')

module.exports = environment.toWebpackConfig()

webpack/environment.js:

const { environment } = require('@rails/webpacker')

environment.config.merge({
  devtool: 'cheap-source-map',
  performance: {
    hints: false
  }
})

module.exports = environment

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

webpack/production.js:

process.env.NODE_ENV = process.env.NODE_ENV || 'production'

const environment = require('./environment')

module.exports = environment.toWebpackConfig()

Can anyone point me in the right direction and how I can achieve this?

Thanks in advance!

rctneil
  • 7,016
  • 10
  • 40
  • 83
  • The article you linked to does not apply to a typical Rails environment. It assumes you're building a _frontend-only_ app in which webpack is responsible for _generating the HTML_ in addition to JS/CSS/etc _at compilation time_. With Rails + Webpacker, typically Rails generates HTML during the request/response cycle. You'd need to find another way to inline critical css. – rossta Feb 28 '21 at 16:36
  • @rossta ok, but can I somehow use that plugin to generate the critical CSS and inline or include it separately like a normal CSS file? – rctneil Feb 28 '21 at 16:39
  • As I said, if you're using Rails to generate HTML during the request/response cycle, then, no, that plugin will not work for you. – rossta Feb 28 '21 at 16:45
  • @rossta All I wish to be able to achieve is to automate the building of a Critical CSS file that I can import. What I am aiming for is to reduce render blocking CSS to improve performance and following that find out how to do a similar thing for my JS. I am just unsure how to achieve it for both and decide to start with looking into the CSS side of things. Appreciate your help so far though! – rctneil Feb 28 '21 at 16:51

0 Answers0