Как получить некэшированные версии кода, разделяющего файлы .js, с помощью vue.js и webpack?

Итак, у меня в приложении установлен Vue.js (с использованием vue-cli и webpack). Все отлично работает. Кроме того, я реализовал разделение кода, чтобы мне не приходилось загружать неиспользуемые компоненты до тех пор, пока они не потребуются. Все это тоже отлично работает. Однако, если я собираюсь выпустить новую версию своего приложения, сгенерированный код, разбивающий файлы .js, будет кэшироваться в клиентском браузере, и они не получат обновления, пока не очистят свой кеш в своем браузере. .

Чтобы этого не произошло раньше с main.js, я реализовал разделение кода, добавив номер версии в значение строки запроса в файле main.js, который собирает webpack следующим образом:

<script src="~/scripts/build/[email protected]" asp-append-version="true"></script>

После добавления разделения кода я теперь получаю файл main.js плюс четыре дополнительных файла .js, но я не уверен, как управлять версиями автоматически созданных файлов .js, на которые ссылается файл main.js.

основной.js 0.js 1.js 2.js 3.js

Я могу легко назвать их, используя волшебные комментарии, поддерживаемые в веб-пакете, например:

const page0 = ()=> import(/* webpackChunkName: "my-page-0" */ './components/MyPage0.vue');
const page1 = ()=> import(/* webpackChunkName: "my-page-1" */ './components/MyPage1.vue');
const page2 = ()=> import(/* webpackChunkName: "my-page-2" */ './components/MyPage2.vue');
const page3 = ()=> import(/* webpackChunkName: "my-page-3" */ './components/MyPage3.vue');

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


webpack vue.js code-splitting
person RichC    schedule 28.04.2021    source источник
comment
Кажется, вы заново изобретаете велосипед. Vue CLI уже использует HashedModuleIdsPlugin для создания хешированных фрагментов.   -  person Estus Flask    schedule 28.04.2021

Ответы (1)


arrow_upward
1
arrow_downward

Вы должны использовать chunkFileName свойство конфигурации Webpack output. Основная идея состоит в том, чтобы прочитать файл package.json в конфигурации Webpack, использовать поле версии и добавить его к имени чанка.

const path = require('path');

// Assuming you have package.json. Read the version field.
const packageVersion = require('./package.json').version;

const SITE_DIST = path.join(__dirname, './dist');

module.exports = {
  output: {
    path: SITE_DIST,
    filename: '[name].[fullhash].bundle.js',

    // chunkFilename can be used to append the package version
    chunkFilename: `[name]-${packageVersion}.js`
  },
  // Other configuration....
}

Кстати, я не рекомендую использовать asp-append-version; попробуйте создать начальную страницу HTML/ASP.NET, используя html-webpack-plugin. Webpack предоставляет гораздо лучшие возможности для очистки кеша. Вы даже можете сгенерировать ASP-страницу, убедившись, что в нее правильно вставлены скрипты/ссылки CSS-модулей с поврежденным кешем. Например,

new HtmlWebpackPlugin({
  template: './site/index.html',
  filename: 'index.asp'
})

Чтобы создать уникальные имена файлов, чтобы избежать проблем с кэшированием, вы можете использовать встроенные в Webpack возможности генерации вывода возможности.

filename: '[name].bundle.js',
filename: '[id].bundle.js',
filename: '[contenthash].bundle.js'
// Or any combination of above

Кроме того, используя это, вам даже не нужно использовать версию вашего проекта. Каждый раз, когда вы меняете код, Webpack будет генерировать уникальные имена для ваших пакетов, используя filename и chunkFilename; например: main.f62606ed4879fe34afca.bundle.js. И это имя будет автоматически вставлено в файл HTML/ASP, сгенерированный плагином.

<script defer src="main.f62606ed4879fe34afca.bundle.js"></script>
person Harshal Patil    schedule 28.04.2021