[Vue 3] 教程 – 工具 – 生产环境部署
# 生产环境部署
INFO
如果你使用 Vue CLI,下面的大多数提示都是默认启用的。此部分仅当你使用自定义构建设置时才相关。
# 开启生产环境模式
在开发期间,Vue 提供了许多警告,以帮助你处理常见的错误和隐患。但是,这些警告字符串在生产环境中会变得无意义,并且会增大应用程序的负担。此外,有些警告检查的运行时成本很小,可以在生产环境模式中避免。
# 不使用构建工具
如果你正在使用完整的构建,即直接通过脚本标签引入 Vue,而不使用构建工具,那么请确保在生产环境中使用压缩版。这可以在安装指南中找到。
# 使用构建工具
当使用 Webpack 或 Browserify 这样的构建工具时,生产环境模式将由 Vue 的源代码中的 process.env.NODE_ENV
决定,默认为开发模式。这两种构建工具都提供了重写这个变量以启用 Vue 的生产模式的方法,并且在构建过程中警告将被压缩工具删除。Vue CLI 已经为你预先配置了这个,不过了解它的工作原理会更好:
# Webpack
在 Webpack 4+,你可以使用 mode
选项:
module.exports = {
mode: 'production'
}
# Browserify
-
将当前的环境变量
NODE_ENV
设置为"production"
作为运行的打包命令。它告诉vueify
避免引入热重载和开发相关的代码。 -
将一个全局的 envify 转换应用到你的包中。这使得压缩工具可以删除包裹在环境变量条件块中的Vue源代码中的所有警告。例如:
NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
-
或者,利用 Gulp 使用 envify:
// Use the envify custom module to specify environment variables const envify = require('envify/custom') browserify(browserifyOptions) .transform(vueify) .transform( // Required in order to process node_modules files { global: true }, envify({ NODE_ENV: 'production' }) ) .bundle()
-
或者,利用 Grunt 和 grunt-browserify 使用 envify:
// Use the envify custom module to specify environment variables const 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
使用 @rollup/plugin-replace:
const replace = require('@rollup/plugin-replace')
rollup({
// ...
plugins: [
replace({
'process.env.NODE_ENV': JSON.stringify( 'production' )
})
]
}).then(...)
# 预编译模板
当使用 DOM 内模板或 JavaScript 内模板字符串时,将动态地执行从模板到渲染函数的编译。在大多数情况下,这已经足够快了,但是如果应用程序对性能敏感,最好避免这样做。
预编译模板最简单的方法是使用单文件组件——相关的构建设置自动为你执行预编译,所以构建代码包含已经编译的渲染函数,而不是原始的模板字符串。
如果你正在使用 Webpack,并且更喜欢将 JavaScript 和模板文件分开,你可以使用 vue-template-loader,它还可以在构建步骤中将模板文件转换为 JavaScript 渲染函数。
# 提取组件CSS
当使用单文件组件时,组件内部的 CSS 会通过 JavaScript 以 <style>
标签的形式被动态注入。这有一个小的运行时成本,如果你使用服务器端渲染,它将导致“无样式内容的闪现” 。将所有组件的 CSS 提取到同一个文件中可以避免这些问题,还可以更好地压缩和缓存 CSS。
参考各自的构建工具文档,看看它是如何做的:
-
Webpack + vue-loader (
vue-cli
webpack 模板已经预先配置了这个) - Browserify + vueify
- Rollup + rollup-plugin-vue
# 跟踪运行时错误
如果在组件渲染期间发生运行时错误,它将被传递到全局的 app.config.errorHandler
配置函数,如果它已经被设置。将这个钩子与错误跟踪服务如 Sentry 一起使用可能是一个好主意,它为 Vue 提供了一个官方集成。