Phần tiếp theo của bài học Vuejs chúng ta sẽ tiếp tục tìm hiểu về chế độ production trong Vuejs qua đó học được cách kiểm soát và tránh lãng phí tài nguyên khi sử dụng Vuejs trong chế độ production các bạn nhé!
Bật chế độ production
Vue cung cấp rất nhiều cảnh báo cho người dùng trong quá trình phát triển nhằm giúp tránh những lỗi và nguy cơ tiềm ẩn thường gặp. Tuy nhiên, những dòng cảnh báo này lại trở nên vô ích trong môi trường production và làm cho ứng dụng tăng kích thước. Bên cạnh đó, một vài trong số những kiểm tra cảnh báo này có phí tổn vận hành (runtime cost, bao gồm bộ nhớ và CPU) mà chúng ta có thể tránh được trong chế độ production.
Không sử dụng build tool
Nếu bạn chèn trực tiếp Vue bằng thẻ script thay vì sử dụng build tool (công cụ build), hãy đảm bảo đó là vue.min.js – bản đã được minify (thu nhỏ) cho môi trường production. Bạn có thể tìm thấy cả hai phiên bản ở phần Hướng dẫn cài đặt Vue.js.
Sử dụng build tool
Nếu bạn đang sử dụng một build tool ví dụ như là Webpack hoặc Browserify, chế độ production sẽ được xác định bởi biến môi trường process.env.NODE_ENV bên trong mã nguồn của Vue, với giá trị mặc định là development (đang phát triển). Cả hai build tool đều cung cấp các cách thức để ghi đè giá trị của biến này nhằm bật chế độ production của Vue, khi đó các plugin minify sẽ bỏ đi các cảnh báo trong quá trình build. Tất cả các template của vue-cli đều đã được cấu hình sẵn theo cách này, dù vậy vẫn sẽ có ích nếu bạn hiểu cách thức hoạt động, như mô tả dưới đây:
Webpack
Sử dụng DefinePlugin của Webpack để xác định môi trường production, những dòng cảnh báo sẽ được UglifyJS tự động bỏ đi trong quá trình minify. Dưới đây là một ví dụ:
var webpack = require('webpack')
module.exports = {
// ...
plugins: [
// ...
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
})
]
}Browserify
Chạy lệnh bundle (đóng gói) với giá trị biến môi trường NODE_ENV là "production". Cách này sẽ thông báo để vueify bỏ qua hot-reload và các phần mã liên quan đến chế độ development.
Áp dụng envify ở cấp global (toàn cục) cho bundle. Cách này sẽ giúp plugin minify lược đi toàn bộ những cảnh báo trong mã nguồn của Vue được gói trong các conditional block (khối điều kiện) dùng để kiểm tra biến môi trường. Ví dụ:
NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
Hoặc, khi dùng envify với Gulp:
// dùng module envify/custom để chỉ định biến môi trường
var envify = require('envify/custom')
browserify(browserifyOptions)
.transform(vueify)
.transform(
// cần thiết để xử lí các file trong node_modules
{ global: true },
envify({ NODE_ENV: 'production' })
)
.bundle()hoặc sử dụng envify với Grunt and grunt-browserify:
// Use the envify custom module to specify environment variables
var envify = require('envify/custom')
browserify: {
dist: {
options: {
// Function to deviate from grunt-browserify's default order
configure: b => b
.transform('vueify')
.transform(
// Required in order to process node_modules files
{ global: true },
envify({ NODE_ENV: 'production' })
)
.bundle()
}
}
}Rollup
Dùng rollup-plugin-replace:
const replace = require('rollup-plugin-replace')
rollup({
// ...
plugins: [
replace({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
}).then(...)Biên dịch trước template
Khi sử dụng template trong DOM hoặc chuỗi template trong JavaScript, việc biên dịch template thành hàm render được thực hiện ngay trong quá trình chạy ứng dụng. Công đoạn biên dịch này thường là đủ nhanh cho đa số các trường hợp, nhưng tốt nhất vẫn nên tránh nếu ứng dụng của bạn cần đặt nặng về performance (hiệu suất).
Cách dễ nhất để biên dịch trước template là sử dụng Single-File Component. Những cài đặt build liên quan sẽ tự động thực hiện việc biên dịch trước, nhờ đó mã sau khi build sẽ bao gồm những hàm render đã được biên dịch thay vì chuỗi template thô (raw template string).
Nếu bạn dùng Webpack và muốn tách biệt giữa JavaScript và các file template, có thể sử dụng vue-template-loader. Công cụ này cũng sẽ chuyển hoá các file template thành hàm render của JavaScript trong quá trình build.
Trích xuất CSS của component
Khi sử dụng Single-File Component, CSS bên trong component được chèn động vào các thẻ <style> bằng JavaScript. Cách này có chi phí vận hành không đáng kể, và nếu bạn sử dụng server-side rendering (SSR – render từ phía server) thì sẽ gây ra hiện tượng “flash of unstyled content” (FOUC – hiển thị nội dung không có định dạng trong giây lát). Trích xuất CSS ở tất cả các components và gom vào một file sẽ tránh được những vấn đề nêu trên, ngoài ra việc caching và thu nhỏ CSS cũng sẽ tốt hơn.
Theo dõi lỗi vận hành
Một lỗi vận hành (runtime error) xảy ra trong quá trình render component sẽ được truyền đến hàm global config (cấu hình toàn cục) Vue.config.errorHandler nếu hàm này đã được thiết lập từ trước. Chúng ta có thể kết hợp hook này với một dịch vụ theo dõi lỗi (error tracking service) như Sentry – dịch vụ này còn cung cấp sẵn một giải pháp tích hợp chính thức dành cho Vue.
