基于Vue生产环境部署详解


Posted in Javascript onSeptember 15, 2017

前面的话

开发时,Vue 会提供很多警告来帮助解决常见的错误与陷阱。生产时,这些警告语句却没有用,反而会增加载荷量。再次,有些警告检查有小的运行时开销,生产环境模式下是可以避免的。本文将详细介绍Vue生产环境部署

生产环境

如果用 Vue 完整独立版本 (直接用 <script> 元素引入 Vue),生产时应该用精简版本 (vue.min.js)

如果用 Webpack 或 Browserify 类似的打包工具时,生产状态会在 Vue 源码中由 process.env.NODE_ENV 决定,默认在开发状态。Webpack 与 Browserify 两个打包工具都提供方法来覆盖此变量并使用生产状态,警告语句也会被精简掉。每一个 vue-cli 模板有预先配置好的打包工具,但了解怎样配置会更好

【webpack】

使用 Webpack 的 DefinePlugin 来指定生产环境,以便在压缩时可以让 UglifyJS 自动删除代码块内的警告语句

var webpack = require('webpack')
module.exports = {
 // ...
 plugins: [
  // ...
  new webpack.DefinePlugin({
   'process.env': {
    NODE_ENV: '"production"'
   }
  }),
  new webpack.optimize.UglifyJsPlugin({
   compress: {
    warnings: false
   }
  })
 ]
}

【Browserify】

运行打包命令,设置 NODE_ENV 为 "production"。等于告诉 vueify 避免引入热重载和开发相关代码

使用一个全局 envify 转换 bundle 文件。这可以精简掉包含在 Vue 源码中所有环境变量条件相关代码块内的警告语句

NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js

【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 会以 <style> 标签的方式通过 JavaScript 动态注入。这有一些小小的运行时开销,如果使用服务端渲染,这会导致一段“无样式的内容瞬间 (fouc)”。横跨所有组件提取 CSS 到同一个文件回避这件事情,这也会更好的压缩和缓存 CSS

跟踪运行时错误

如果在组件渲染时出现运行错误,错误将会被传递至全局 Vue.config.errorHandler 配置函数 (如果已设置)。利用这个钩子函数和错误跟踪服务 (如 Sentry),可能是个不错的主意

以上这篇基于Vue生产环境部署就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js实现上传图片前的预览(TX的面试题)
Aug 14 Javascript
javascript 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
Jan 08 Javascript
jQuery带箭头提示框tooltips插件集锦
Nov 17 Javascript
jQuery实现的经典滑动门效果
Sep 22 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
Jan 19 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
微信小程序实现留言板功能
Nov 02 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
Aug 09 Javascript
基于Vue单文件组件详解
Sep 15 #Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 #Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
Sep 14 #Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 #Javascript
VsCode插件整理(小结)
Sep 14 #Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
Sep 14 #Javascript
vue 计时器组件的实现代码
Sep 14 #Javascript
You might like
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
PHP获取MAC地址的具体实例
2013/12/13 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
下雪了 javascript实现雪花飞舞
2020/08/02 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
浅谈PDF.js使用心得
2018/06/07 Javascript
vue mounted组件的使用
2018/06/18 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
vue v-model的用法解析
2020/10/19 Javascript
python获取文件版本信息、公司名和产品名的方法
2014/10/05 Python
Djang中静态文件配置方法
2015/07/30 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
Python 处理文件的几种方式
2019/08/23 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
详解使用CSS3的@media来编写响应式的页面
2017/11/01 HTML / CSS
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
拖鞋店创业计划书
2014/01/15 职场文书
大学生求职工作的自我评价
2014/02/13 职场文书
体育馆的标语
2014/06/24 职场文书
就业意向协议书
2015/01/29 职场文书
个人求职意向书
2015/05/11 职场文书
导游词之嵊泗列岛
2019/10/30 职场文书
python实现ROA算子边缘检测算法
2021/04/05 Python
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript