Q: How to ensure vendor chunk hash doesn't change with webpacker?

问题

I have a Rails 6 project with webpacker 4.2.2 configured to split vendor chunks into individual files:

# config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

environment.config.merge({
  plugins: [
    new webpack.HashedModuleIdsPlugin(),
  ],
  optimization: {
    minimize: true,
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 0,
      cacheGroups: {
        // @see https://hackernoon.com/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name(module) {
            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
            return `npm.${packageName.replace('@', '')}`;
          },
          priority: 10,
        },
      }
    }
  }
})

module.exports = environment

When we precompile our assets, this produces fingerprinted files for each NPM dependency, which we upload for long-term caching and CDN-based distribution. However, we're noticing that when we add a new library to the pack, this unexpectedly causes a rehash of many chunk files for dependencies that have not changed at all. For example, this change in my app/javascript/packs/application.js:

 require("@rails/ujs").start()
 require("turbolinks").start()
 require("@rails/activestorage").start()
 require("channels")
 import 'msr'
 import copy from 'clipboard-copy'
+import axios from 'axios'

will produce the following change in my output chunks (produced from running bin/rails webpacker:compile):

--- a   2020-07-06 18:39:52.202440803 +0000
+++ b   2020-07-06 18:39:52.210440748 +0000
@@ -1,6 +1,8 @@
-application-1e8721172ae65f57286b.chunk.js
-npm.clipboard-copy-10b42ffbc97b4e927071.chunk.js
-npm.msr-01ea266e2c932167f10b.chunk.js
-npm.rails-a4564cfc542024efeb95.chunk.js
-npm.turbolinks-eeef46ff44962af9ac87.chunk.js
-npm.webpack-7226f5cf46a8c4e61c26.chunk.js
+application-bad0ed20808541f88894.chunk.js
+npm.axios-40b4b54ebace2b9e3907.chunk.js
+npm.clipboard-copy-79d2051f48603e0267e0.chunk.js
+npm.msr-f5a4252b7a7e0a94157f.chunk.js
+npm.process-cfe824ecbab5abe0eecc.chunk.js
+npm.rails-aa1c430d6ceee3ca6bd6.chunk.js
+npm.turbolinks-e28554dbfd4b75aa12e5.chunk.js
+npm.webpack-35f718d9a20b8bca2927.chunk.js

This is a double whammy because of unnecessary cache invalidation and additional CDN transfer costs. My question is, is there a way to ensure the vendor chunk doesn't get rehashed because of dependency changes? I don't know if this is a limitation with the way that webpack's SplitChunksPlugin works, but any advice is appreciated.

By the way, I've prepared a minimal Rails project that reproduces the situation I've described above: https://github.com/alextsui05/webpacker-vendor-chunks A detailed summary is included in the README on the repository, and I invite any answerers to discuss based on that code.

回答1:

Try setting the option moduleIds: 'hashed'

https://v4.webpack.js.org/configuration/optimization/#optimizationmoduleids

来源：https://stackoverflow.com/questions/62763465/q-how-to-ensure-vendor-chunk-hash-doesnt-change-with-webpacker

标签

ruby-on-rails

Webpack

webpacker