Как в vue задать версии чанкам?

Question

[Игорь]

Коллеги, приветствую.
Как в vue задать версии чанкам?

Например

http://127.0.0.1:3000/js/lang-ru-main-json.js?v=1
http://127.0.0.1:3000/js/lang-ru-main-json.js?v=2

Или

http://127.0.0.1:3000/js/lang-ru-main-json-v0.0.1.js
http://127.0.0.1:3000/js/lang-ru-main-json-v0.0.2.js

vue.config.js

// eslint-disable-next-line @typescript-eslint/no-var-requires
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')

module.exports = {
  devServer: {
    host: '0.0.0.0',
    public: '0.0.0.0:3000',
    disableHostCheck: true
  },

  parallel: 4,

  transpileDependencies: [
    'vuetify'
  ],

  productionSourceMap: false,
  filenameHashing: true,

  pluginOptions: {
    webpackBundleAnalyzer: {
      openAnalyzer: true
    }
  },

  chainWebpack: config => {
    config.plugins.delete('prefetch')

    config.plugin('VuetifyLoaderPlugin').tap(args => [{
      match (originalTag, { kebabTag, camelTag, path, component }) {
        if (kebabTag.startsWith('core-')) {
          return [camelTag, `import ${camelTag} from '@/components/core/${camelTag.substring(4)}.vue'`]
        }
      }
    }])
    config.module
      .rule('i18n')
      .resourceQuery(/blockType=i18n/)
      .type('javascript/auto')
      .use('i18n')
      .loader('@kazupon/vue-i18n-loader')
  },
  configureWebpack: config => {
    // remove the existing ForkTsCheckerWebpackPlugin
    config.plugins = config.plugins.filter(
      p => !(p instanceof ForkTsCheckerWebpackPlugin)
    )
  }
}

Браузер кеширует, пользователи злятся.

Vue 2
SPA

Спасибо

Answer 1

[Антон Антон]

в конфиге вебпака в блоке output: filename: '[name].[contenthash].js',

Comments

[Игорь]

filename: '[name].[contenthash].js'
У меня такая же конфигурация.

Полагаю, что contenthash нужен для того что бы браузер скачивал новый файл вместо кэша.
Но почему-то банального update в браузере не хватает.

Либо я ошибаюсь.

[Игорь]

Попробовал сделать по тупому

configureWebpack: config => {
    config.output.filename = '[name].[contenthash].' + package.version + '.js'
    config.output.chunkFilename = '[name].[contenthash].' + package.version + '.js'

    // remove the existing ForkTsCheckerWebpackPlugin
    config.plugins = config.plugins.filter(
      p => !(p instanceof ForkTsCheckerWebpackPlugin)
    )

[Антон Антон]

Игорь, contenthash - это хэш содержимого, версия - это то, что ты меняешь руками, что ты можешь забыть сделать, ну или гит коммит подставляется плагином, что лучше, но не всегда.
хэш содержимого не меняется, если не меняется содержимое файла, так что в этом плане - самый лучший выбор. Если при изменении версии хэш не изменился - то и незачем новый файл скачивать, пусть себе берет из кэша тот, что есть.

[Alex]

Игорь,

Полагаю, что contenthash нужен для того что бы браузер скачивал новый файл вместо кэша.

Именно для этого. По сути каждый раз, когда это нужно, создаётся файл с новым именем. Новое имя = новый файл для браузера, а значит он будет качать его с сервера а не с кэша.

Проверьте, какие файлы у вас генерируются. С какими именами, присутствует ли в имени файла хэш.
Если да -- проверьте свой html. Возможно в нем остаются старые названия файлов.
Ещё дело может быть в том, что ваш браузер достаёт html из кэша и там не те имена файлов

[Игорь]

Alex, В корень зрите!

Совершенно точно, дело в index.html

Он тоже кешируется.

Как с ним то быть?

Не кэшировать nginксом?

[Alex]

Игорь, По хорошему, ваш сервер должен смотреть на то когда впоследний раз был изменён html. И в соответствии с этим возвращать Код "HTTP 304 Not Modified". Или каки-либо другим образом. Тут не посоветую, так как у самого опыта в этом вопросе мало.

[Игорь]

Alex, Я думаю что специально для index.html можно задать короткое время кеширования.

Answer 2

[Дмитрий Кузнецов]

У нас на проекте написано так, но с использованием Laravel Mix.

mix.webpackConfig({
    output:{
        chunkFilename:'js/vuejs_code_split/[name].js?id=[chunkhash]',
    },
});

По сути особой роли не играет, просто погуглите в доке webpack'а свойство chunkFilename.