Comment modifier l'environnement de production de vue

Vue est un framework JavaScript populaire pour créer des applications Web modernes. Dans l'environnement de développement de Vue, nous pouvons facilement utiliser Vue CLI (interface de ligne de commande) pour créer et développer des applications Vue. Vue CLI possède de nombreuses fonctionnalités utiles, dont l'une nous permet de développer et de déployer des applications Vue. Dans cet article, nous examinerons de plus près comment apporter des modifications dans un environnement de production Vue.

La compilation de l'environnement de production et la compilation de l'environnement de développement de Vue sont différentes. La plus grande différence réside dans les performances.

Dans l'environnement de développement, lorsque nous construisons une application Vue à l'aide de Vue CLI, nous obtenons un serveur de rechargement à chaud afin que nous puissions voir les résultats mis à jour immédiatement lorsque le code change. Ceci est très utile lors du développement et des tests dans les applications Vue.

Mais lorsque nous déployons l'application Vue dans l'environnement de production, nous devons apporter quelques modifications pour optimiser ses performances. Voici quelques façons d'apporter des modifications dans un environnement de production Vue :

1. Chargez la version de production de Vue dans votre application.

Dans l'environnement de développement, nous utilisons la version complète de Vue pour le développement car elle contient tous les avertissements et informations de débogage. Cependant, dans un environnement de production, nous n'avons pas besoin de ces informations car elles augmentent la charge sur l'application et réduisent les performances. Par conséquent, nous devrions utiliser la version de production de Vue.

La version de production de Vue peut être chargée dans l'application à l'aide de la commande suivante dans Vue CLI :

// main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false // 阻止启动生产消息

new Vue({
  render: h => h(App),
}).$mount('#app')

Dans le code ci-dessus, nous définissons Vue.config.productionTip = false pour empêcher Vue de démarrer un message en mode production.

2. Activer la compression Gzip

Dans un environnement de production, nous devons activer la compression Gzip pour réduire la taille des réponses HTTP et accélérer le chargement des applications. La fonction de compression Gzip peut être configurée à l'aide de webpack et configurée dans vue.config.js.

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp('\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8,
      }),
    ],
  },
};

Dans le code ci-dessus, nous utilisons le plug-in CompressionWebpackPlugin pour activer la fonction de compression Gzip.

3. Supprimer les instructions de console et de débogage

Dans un environnement de production, nous devons supprimer toutes les instructions de console et de débogage dans l'application. Ces déclarations augmentent la taille de l'application et peuvent également présenter des risques de sécurité. Ces déclarations peuvent être supprimées de l'application à l'aide d'UglifyJSPlugin du webpack.

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new UglifyJSPlugin({
        uglifyOptions: {
          compress: {
            drop_console: true, // 移除所有的console语句
          },
        },
      }),
    ],
  },
};

Dans le code ci-dessus, nous utilisons le plug-in UglifyJSPlugin pour supprimer l'instruction console dans l'application.

4. Accélération CDN des ressources statiques

Dans un environnement de production, nous devrions mettre nos ressources statiques sur CDN pour améliorer la vitesse de chargement de l'application. CDN peut être configuré à l'aide de Webpack dans l'application.

// vue.config.js
module.exports = {
    chainWebpack: config => {
      config.plugin('html')
        .tap(args => {
          args[0].cdn = process.env.NODE_ENV === 'production' ? cdn.build : cdn.dev
          return args
        })
    }
};

Dans le code ci-dessus, nous utilisons chainWebpack pour étendre webpack et utilisons args[0].cdn pour fournir l'adresse URL du CDN.

Résumé

Apporter des modifications dans l'environnement de production de Vue consiste à améliorer les performances de notre application, dans cet article, nous avons appris les méthodes suivantes :

• Charger la version de production de Vue dans l'application.
• Activez la compression Gzip.
• Supprimez les instructions de console et de débogage.
• Accélérez les ressources statiques via CDN.

J'espère que ces méthodes vous aideront à optimiser votre application Vue et à mieux la faire fonctionner dans un environnement de production.

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!