Penempatan Produksi

Sebagian besar tips di bawah ini sudah ada secara standar jika Anda menggunakan Vue CLI. Bagian ini hanya relevan jika Anda menggunakan penyiapan build khusus.

Mengaktifkan Mode Produksi

Selama proses pengembangan, Vue memberikan banyak peringatan untuk membantu Anda terhadap kesalahan umum dan perangkap. Namun, dalam mode produksi peringatan ini tidak muncul dan mencegah pembengkakan ukuran muatan aplikasi Anda. Selain itu, beberapa pemeriksaan peringatan ini memiliki biaya runtime yang kecil.

Tanpa Alat Build

Jika Anda menggunakan build lengkap, misal, langsung memasukkan Vue melalui tag skrip tanpa alat build, pastikan untuk menggunakan versi minified (vue.min.js) untuk produksi. Kedua versi dapat ditemukan di Panduan Instalasi.

Dengan Alat Build

Ketika menggunakan alat build seperti Webpack atau Browserify, mode produksi akan ditentukan oleh process.env.NODE_ENV di dalam kode sumber Vue, dan itu akan berada dalam mode pengembangan secara standar. Kedua alat build tersebut menyediakan cara untuk menimpa variabel ini untuk mengaktifkan mode produksi Vue, dan peringatan akan dihapus oleh minifiers selama build. Semua templat vue-cli memiliki pra-konfigurasi ini untuk Anda, tetapi akan bermanfaat jika mengetahui cara melakukannya:

Webpack

Di Webpack 4+, Anda dapat menggunakan opsi mode:

module.exports = {
  mode: "production"
}

Tetapi di Webpack 3 dan sebelumnya, Anda harus menggunakan DefinePlugin:

var webpack = require("webpack")

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify("production")
    })
  ]
}

Browserify

• Jalankan perintah bundling Anda dengan variabel lingkungan NODE_ENV aktual yang disetel ke "production". Ini memberitahu vueify untuk menghindari hot-reload dan pengembangan kode terkait.

• Terapkan transformasi global envify ke bundel Anda. Ini memungkinkan minifier untuk menghapus semua peringatan dalam kode sumber Vue yang dibungkus dengan blok bersyarat variabel env. Sebagai contoh:

  NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js

• Atau, menggunakan envify dengan Gulp:

  // Gunakan modul envify/custom untuk menentukan variabel lingkungan
  var envify = require("envify/custom")
  
  browserify(browserifyOptions)
    .transform(vueify)
    .transform(
      // Diperlukan untuk memproses file node_modules
      { global: true },
      envify({ NODE_ENV: "production" })
    )
    .bundle()

• Atau, menggunakan envify dengan Grunt dan grunt-browserify:

  // Gunakan modul envify/custom untuk menentukan variabel lingkungan
  var envify = require("envify/custom")
  
  browserify: {
    dist: {
      options: {
        // Berfungsi untuk menyimpang dari urutan standar grunt-browserify
        configure: b =>
          b
            .transform("vueify")
            .transform(
              // Diperlukan untuk memproses file node_modules
              { global: true },
              envify({ NODE_ENV: "production" })
            )
            .bundle()
      }
    }
  }

Rollup

Gunakan rollup-plugin-replace:

const replace = require('rollup-plugin-replace')

rollup({
  // ...
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify( 'production' )
    })
  ]
}).then(...)

Templat Pra-Kompilasi

Ketika menggunakan templat in-DOM atau string templat dalam JavaScript, kompilasi template-to-render-function dilakukan dengan cepat. Ini biasanya cukup cepat dalam banyak kasus, tetapi sebaiknya dihindari jika aplikasi Anda sensitif terhadap kinerja.

Cara termudah untuk melakukan pra-kompilasi templat menggunakan Single-File Components - setup build yang terkait secara otomatis melakukan pra-kompilasi untuk Anda, sehingga kode yang dibangun berisi fungsi render yang sudah dikompilasi alih-alih string templat mentah.

Jika Anda menggunakan Webpack, dan lebih suka memisahkan file JavaScript dan templat, Anda dapat menggunakan vue-template-loader, yang juga mengubah file template menjadi fungsi render JavaScript selama build berlangsung.

Mengekstraksi Komponen CSS

Ketika menggunakan Komponen File Tunggal (Single-File Components), komponen di dalam CSS disuntikkan secara dinamis sebagai tag <style> melalui JavaScript. Ini memiliki biaya runtime yang kecil, dan jika Anda menggunakan rendering sisi-server, hal itu akan menyebabkan “flash of unstyled content” atau konten tanpa gaya. Mengekstrak CSS di semua komponen ke dalam file yang sama akan menghindari masalah ini, dan juga menghasilkan minifikasi dan caching CSS yang lebih baik.

Rujuk ke dokumentasi alat build terkait untuk melihat bagaimana melakukannya:

• Webpack + vue-loader (templat webpack vue-cli memiliki pra-konfigurasi ini)
• Browserify + vueify
• Rollup + rollup-plugin-vue

Melacak Kesalahan Runtime

Jika kesalahan runtime terjadi selama render komponen, ini akan diteruskan ke fungsi konfigurasi global Vue.config.errorHandler jika telah ditetapkan. Mungkin ide yang bagus untuk meningkatkan kaitan ini bersama dengan servis error-tracking seperti Sentry, yang menyediakan integrasi resmi untuk Vue.