Cara mengubah suai persekitaran pengeluaran vue

Vue ialah rangka kerja JavaScript yang popular untuk membina aplikasi web moden. Dalam persekitaran pembangunan Vue, kami boleh menggunakan Vue CLI (antara muka baris arahan) dengan mudah untuk mencipta dan membangunkan aplikasi Vue. Vue CLI mempunyai banyak ciri berguna, salah satunya membolehkan kami membangun dan menggunakan aplikasi dalam aplikasi Vue. Dalam artikel ini, kita akan melihat dengan lebih dekat cara membuat pengubahsuaian dalam persekitaran pengeluaran Vue.

Kompilasi persekitaran pengeluaran dan kompilasi persekitaran pembangunan Vue adalah berbeza Perbezaan terbesar ialah prestasi.

Dalam persekitaran pembangunan, apabila kami membina aplikasi Vue menggunakan Vue CLI, kami mendapat pelayan tambah nilai panas supaya kami dapat melihat hasil yang dikemas kini serta-merta apabila kod berubah. Ini sangat berguna apabila membangun dan menguji dalam aplikasi Vue.

Tetapi apabila kami menggunakan aplikasi Vue ke dalam persekitaran pengeluaran, kami perlu membuat beberapa pengubahsuaian untuk mengoptimumkan prestasinya. Berikut ialah beberapa cara untuk membuat pengubahsuaian dalam persekitaran Vue pengeluaran:

1. Muatkan versi pengeluaran Vue ke dalam aplikasi anda.

Dalam persekitaran pembangunan, kami menggunakan versi penuh Vue untuk pembangunan kerana ia mengandungi semua amaran dan maklumat penyahpepijatan. Walau bagaimanapun, dalam persekitaran pengeluaran kami tidak memerlukan maklumat ini kerana ia meningkatkan beban pada aplikasi dan mengurangkan prestasi. Oleh itu, kita harus menggunakan versi pengeluaran Vue.

Versi pengeluaran Vue boleh dimuatkan ke dalam aplikasi menggunakan arahan berikut dalam 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')

Dalam kod di atas, kami menetapkan Vue.config.productionTip = false untuk menghalang Vue daripada menjalankan Mulakan mesej dalam mod pengeluaran.

2. Hidupkan pemampatan Gzip

Dalam persekitaran pengeluaran, kita harus menghidupkan pemampatan Gzip untuk mengurangkan saiz respons HTTP dan mempercepatkan pemuatan aplikasi. Fungsi mampatan Gzip boleh dikonfigurasikan menggunakan webpack dan dikonfigurasikan dalam 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,
      }),
    ],
  },
};

Dalam kod di atas, kami menggunakan pemalam CompressionWebpackPlugin untuk mendayakan fungsi pemampatan Gzip.

3. Alih keluar pernyataan konsol dan nyahpepijat

Dalam persekitaran pengeluaran, kami harus mengalih keluar semua pernyataan konsol dan nyahpepijat dalam aplikasi. Kenyataan ini meningkatkan saiz aplikasi dan mungkin juga menimbulkan risiko keselamatan. Kenyataan ini boleh dialih keluar daripada aplikasi menggunakan UglifyJSPlugin daripada webpack.

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

Dalam kod di atas, kami menggunakan pemalam UglifyJSPlugin untuk memadamkan pernyataan konsol dalam aplikasi.

4. Percepatkan sumber statik dengan CDN

Dalam persekitaran pengeluaran, kami harus meletakkan sumber statik kami pada CDN untuk meningkatkan kelajuan pemuatan aplikasi. CDN boleh dikonfigurasikan menggunakan webpack dalam aplikasi.

// 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
        })
    }
};

Dalam kod di atas, kami menggunakan chainWebpack untuk melanjutkan webpack dan menggunakan args[0].cdn untuk memberikan alamat URL CDN.

Ringkasan

Membuat pengubahsuaian dalam persekitaran pengeluaran Vue adalah untuk meningkatkan prestasi aplikasi kami Dalam artikel ini, kami mempelajari kaedah berikut:

• Muatkan. versi pengeluaran Vue ke dalam aplikasi.
• Dayakan pemampatan Gzip.
• Alih keluar pernyataan konsol dan nyahpepijat.
• Mempercepatkan sumber statik melalui CDN.

Semoga kaedah ini dapat membantu anda mengoptimumkan aplikasi Vue anda dan menjadikannya berjalan lebih baik dalam persekitaran pengeluaran.

Atas ialah kandungan terperinci Cara mengubah suai persekitaran pengeluaran vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!