基于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 相关文章推荐
浅析jQuery对select操作小结(遍历option,操作option)
Jul 04 Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 Javascript
jQuery实现不断闪烁文字的方法
May 15 Javascript
解析javascript中鼠标滚轮事件
May 26 Javascript
Svg.js实例教程及使用手册详解(一)
May 16 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
May 26 Javascript
浅谈js中的in-for循环
Jun 28 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
基于javascript实现按圆形排列DIV元素(二)
Dec 02 Javascript
node.js中axios使用心得总结
Nov 29 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
Vue登录主页动态背景短视频制作
Sep 21 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
如何在Ubuntu下启动Apache的Rewrite功能
2013/07/05 PHP
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
微信小程序发送订阅消息的方法(php 为例)
2019/10/30 PHP
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
javascript移动开发中touch触摸事件详解
2016/03/18 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
js实现移动端轮播图效果
2020/12/09 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
小程序Request的另类用法详解
2019/08/09 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
2020/11/04 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
python 从远程服务器下载日志文件的程序
2013/02/10 Python
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
django中send_mail功能实现详解
2018/02/06 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
Django 返回json数据的实现示例
2020/03/05 Python
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
全球工业:Global Industrial
2020/02/01 全球购物
私有程序集与共享程序集有什么区别
2013/04/05 面试题
化学教师教学反思
2014/01/17 职场文书
2014年个人工作总结报告
2014/11/27 职场文书
小学生作文写作技巧100例,非常实用!
2019/07/08 职场文书
mysql中整数数据类型tinyint详解
2021/12/06 MySQL
ubuntu下常用apt命令介绍
2022/06/05 Servers