# Proses Produksi

INFO

Sebagian besar tips di bawah ini diaktifkan secara bawaan jika Anda menggunakan Vue CLI (opens new window). Bagian ini cocok jika Anda membangun penyiapan dengan cara yang berbeda.

# Menghidupkan Mode Produksi

Selama pengembangan, Vue menyediakan banyak peringatan untuk membantu Anda mengatasi galat dan kesalahan umum. Namun, peringatan ini menjadi tidak berguna dalam mode produksi dan akan memperbesar ukuran muatan aplikasi Anda. Selain itu, beberapa pemeriksaan peringatan ini memiliki waktu proses yang rendah dan dapat terelakkan saat mode produksi (opens new window).

# Tanpa Alat Bangun

Jika Anda membangun langsung, yaitu menyertakan Vue melalui tag skrip tanpa alat bangun. Pastikan untuk mengecilkan versi produksi. Ini dapat melihat di panduan Instalasi.

# Dengan Alat Bangun

Ketika menggunakan alat Bangun 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 bawaan. Kedua alat bangun menyediakan cara untuk menimpa variabel ini agar mengaktifkan mode produksi Vue, dan peringatan akan dihilangkan oleh minifiers selama proses membangun. 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'
}

1
2
3

# Browserify

Jalankan perintah bundling Anda di berkas NODE_ENV lingkungan variabel menetapkan ke "production". Ini memberikan vueify untuk menghindari memasukkan hot-reload dan kode terkait pengembangan.
Terapkan global envify (opens new window) ubah ke bundel Anda. Ini memungkinkan minifier untuk menghapus semua peringatan dalam kode sumber Vue yang membungkus dalam blok bersyarat di env variabel. Sebagai contoh:
```
NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
```
1

Atau, menggunakan envify (opens new window) dengan Gulp:

// Gunakan modul kustom envify untuk menentukan lingkungan variabel
const envify = require('envify/custom')

browserify(browserifyOptions)
  .transform(vueify)
  .transform(
    // Diperlukan untuk memproses berkas node_modules
    { global: true },
    envify({ NODE_ENV: 'production' })
  )
  .bundle()

1
2
3
4
5
6
7
8
9
10
11

Atau, menggunakan envify (opens new window) dengan Grunt dan grunt-browserify (opens new window):

// Gunakan modul kustom envify untuk menentukan lingkungan variabel
const envify = require('envify/custom')

browserify: {
  dist: {
    options: {
      // Berfungsi untuk menyimpang dari urutan bawaan grunt-browserify
      configure: b =>
        b
          .transform('vueify')
          .transform(
            // Diperlukan untuk memproses berkas node_modules
            { global: true },
            envify({ NODE_ENV: 'production' })
          )
          .bundle()
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# Rollup

Menggunakan @rollup/plugin-replace (opens new window):

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

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

1
2
3
4
5
6
7
8
9
10

# Templat Pra-Kompilasi

Ketika menggunakan di-DOM templat atau di-JavaScript templat untai, kompilasi template-to-render-function dilakukan dengan cepat. Ini biasanya cukup cepat dalam banyak kasus, tetapi sebaiknya dihindari jika aplikasi Anda performance-sensitive.

Cara termudah untuk mengkompilasi templat menggunakan Komponen Berkas-Tunggal - penyiapan membangun secara otomatis dengan melakukan pra-kompilasi untuk Anda. Jadi kode yang dibangun berisi fungsi render yang sudah dikompilasi, bukan untai templat mentah.

Jika Anda menggunakan Webpack, lebih suka memisahkan JavaScript dan berkas templat, kamu bisa menggunakan vue-template-loader (opens new window), yang juga mengubah berkas templat menjadi fungsi render JavaScript selama langkah membangun.

# Mengekstrak Komponen CSS

Ketika menggunakan Komponen Berkas-Tunggal, CSS di dalam komponen menggunakan secara dinamis <style> tag melalui JavaScript. Ini memiliki waktu proses yang kecil, dan jika Anda menggunakan server-side rendering itu akan menyebabkan "perubahan konten tanpa gaya". Mengekstrak CSS di semua komponen ke dalam berkas yang sama akan menghindari masalah ini, dan juga menghasilkan minifikasi dan caching CSS yang lebih baik.

Lihat dokumentasi alat bangun masing-masing untuk melihat cara melakukannya:

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

# Melacak Galat Waktu Proses

Jika galat waktu proses terjadi selama render komponen, itu akan diteruskan ke global app.config.errorHandler fungsi config jika sudah diatur. Mungkin ide yang baik untuk memanfaatkan proses ini dengan layanan pelacakan-galat seperti Sentry (opens new window), yang menyediakan integrasi resmi (opens new window) untuk Vue.

← Mobile Routing →