# 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'
}
2
3
# Browserify
Jalankan perintah bundling Anda di berkas
NODE_ENV
lingkungan variabel menetapkan ke"production"
. Ini memberikanvueify
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
1Atau, 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
11Atau, 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(...)
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.