Когда дело доходит до именования файлов CSS, созданных с помощью MiniCssExtractPlugin, есть две разные рекомендации, как их называть:
Первый пример:
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
Второй пример:
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[contentHash].css',
}),
],
Какой метод предпочтительнее и почему?
[contenthash]
лучше, чем [hash]
. Contenthash - это хэш, сгенерированный на основе содержимого файла, поэтому он изменится только в том случае, если вы внесли изменения в этот файл. Это помогает сэкономить деньги в целом (или даже лучше: «долгосрочное кеширование статического контента»).
Учитывая, что вы обновляете один из своих файлов и используете другие вещи, кроме Contenthash, пользователь не сможет увидеть никаких обновлений (необходимо удалить кэш). Contenthash - это лучшая и автоматическая версия выполнения:
app.js?build=1
vendor.css?build=1
main.css?build=1
TL; TR: подходит для кеширования, обновляется только при изменении содержимого, помогает долгосрочному кешированию и т. д.
Потому что они могут не знать об этих двух вещах (chunkhash создается для каждого фрагмента). Этот плагин в основном такой же, как [hash].
Спасибо. Но когда webpack предлагает [chunkhash] и [contenthash], почему некоторые люди используют плагин webpack-md5-hash?