Que faire si la logique change après le package de vue

Vue.js est un framework front-end populaire qui nous aide à écrire du code plus efficacement lors de la création d'applications Web. Vue.js a une bonne maintenabilité et évolutivité. Cependant, dans un environnement de production, des changements logiques se produiront après le packaging de Vue.js, ce qui nous pose beaucoup de problèmes. Dans cet article, nous discuterons de ce problème en profondeur et proposerons quelques solutions.

Pourquoi la logique change-t-elle après le packaging de Vue.js ?

Pendant la phase de développement, nous pouvons facilement écrire du code d'application avec Vue.js. Cependant, dans un environnement de production, nous devons empaqueter le code et l’envoyer au client. Grâce à ce processus, le code Vue.js est compressé et obscurci pour réduire la taille du fichier, améliorer les performances et la sécurité.

Cependant, lors du processus d'emballage, nous pouvons rencontrer certains problèmes. Certains composants et plug-ins Vue.js subiront des modifications logiques après l'empaquetage. En effet, lors de l'empaquetage, le compilateur fusionne les fichiers de composants et de plug-ins de Vue.js en un seul fichier et l'optimise. Cela peut empêcher certaines fonctionnalités de Vue.js de fonctionner correctement, telles que le routage dynamique, les composants dynamiques, les événements activés et les directives personnalisées.

Comment résoudre les changements logiques après le packaging de Vue.js ?

1. Utilisez des identifiants pour résoudre le problème des changements de nom de composant

Après l'empaquetage, car le nom du composant est modifié, les modules ne peuvent pas se référencer les uns les autres. Il est recommandé d'utiliser l'option solve.alias de webpack, dans webpack.config. .js ou vue.config Ajoutez la configuration dans .js :

module.exports = {
  resolve: {
    alias: {
      "vue$": "vue/dist/vue.esm.js"
    }
  }
}

Il s'agit d'une solution standard. Définissez le $options.name du composant sur le nom de fichier du composant pour résoudre le problème de la modification du nom du composant.

2. Utilisez ProvidePlugin de webpack pour globaliser les modules requis

Parfois, nous devons appeler certains modules globalement. Dans ce cas, nous devons utiliser ProvidePlugin de webpack pour globaliser les modules, afin qu'ils puissent être utilisés directement dans n'importe quel module. . Ajoutez la configuration suivante dans webpack.config.js :

const webpack = require("webpack")

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    })
  ]
}

3. Utilisez vue.config.js pour la configuration

Ajoutez la configuration suivante dans vue.config.js :

module.exports = {
    runtimeCompiler: true,
    configureWebpack: {    
        resolve: {
            alias: {
                '@components': resolve('src/components'),
                '@views': resolve('src/views'),
            }
        },
        externals:{
            'vue': 'Vue',
            'element-ui': 'ELEMENT',
            'vue-router': 'VueRouter',
            'axios': 'axios',
            'vuex': 'Vuex'
        },
    }
}

Il s'agit d'un fichier de configuration Vue.js typique, résolvez le problème du chemin de fichier en configurant solve.alias.

4. Empêcher la compilation répétée de composants

Dans Vue.js, lorsqu'un composant est référencé par plusieurs composants parents, chaque composant parent crée une instance distincte et compile le modèle du composant indépendamment. Cela entraînera la compilation répétée des mêmes composants et les performances seront affectées après de longues exécutions. En utilisant l'option cacheDirectory de vue-loader, les composants sont mis en cache pour éviter les compilations multiples et améliorer les performances.

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('cache-loader')
      .loader('cache-loader')
      .options({
        cacheDirectory: path.resolve(__dirname, 'node_modules/.cache/vue-loader'),
      })
  }
}

Résumé

Pendant le processus de développement de Vue.js, nous devons prêter attention à la question de la gestion des changements logiques dans l'environnement de production. Grâce à la configuration du webpack, nous pouvons résoudre la plupart des problèmes. Cependant, pendant le processus de développement, nous devons utiliser autant que possible la dernière version de Vue.js et tester soigneusement le code avant l'empaquetage pour éviter des problèmes inutiles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!