基于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 相关文章推荐
5个最佳的Javascript日期处理类库分享
Apr 15 Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
Vue2.x中的Render函数详解
May 30 Javascript
Vue.js中extend选项和delimiters选项的比较
Jul 17 Javascript
基于JavaScript实现无缝滚动效果
Jul 21 Javascript
vue2.0 资源文件assets和static的区别详解
Apr 08 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 Javascript
vue登录注册实例详解
Sep 14 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实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
深入php之规范编程命名小结
2013/05/15 PHP
php删除左端与右端空格的方法
2014/11/29 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
JavaScript错误处理
2015/02/03 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
javascript表单事件处理方法详解
2016/05/15 Javascript
JS遍历页面所有对象属性及实现方法
2016/08/01 Javascript
JS简单验证上传文件类型的方法
2017/04/17 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
tracking.js页面人脸识别插件使用方法
2020/04/16 Javascript
Python文本相似性计算之编辑距离详解
2016/11/28 Python
关于Python 3中print函数的换行详解
2017/08/08 Python
python如何统计序列中元素
2020/07/31 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
python爬虫判断招聘信息是否存在的实例代码
2020/11/20 Python
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
2019年c语言经典面试题目
2016/08/17 面试题
教你怎样写好自我评价
2013/10/05 职场文书
室内趣味活动方案
2014/08/24 职场文书
高中生第一学年自我鉴定2015
2014/09/28 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书
python 模块重载的五种方法
2021/04/24 Python
自动在Windows中运行Python脚本并定时触发功能实现
2021/09/04 Python
vue css 相对路径导入问题级踩坑记录
2022/06/05 Vue.js