Formation Prestashop intégrateur: Utilisation avancée / La mise en cache des ressouces avec Webpack

Vous êtes ici : Accueil / Prestashop intégrateur / Utilisation avancée / La mise en cache des ressouces avec Webpack

La mise en cache des ressouces avec Webpack

Pour optimiser les performances, il est important d'exploiter le cache des navigateurs.

Généralement, on indique aux navigateurs de mettre en cache les fichiers pour une très longue durée et on change le nom des fichiers à chaque mise à jour afin de forcer leur rafraichissement.

Pour automatiser le changement des noms de fichiers, il est possible d'utiliser file-loader et/ou un hash à chaque compilation.

Exemple de configuration pour utiliser un hash :

output: {
    path: path.resolve(__dirname, '../../assets/js'),
    filename: 'theme.js'
    filename: dev ? 'theme.js' : 'theme.[chunkhash:8].js',
 },

Exemple de configuration avec file-loader :

{
    test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
    use: [
        {
            loader: 'file-loader',
            options: {
                name: '../css/[hash].[ext]'
            }
        }
    ]
}