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

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:

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.