技术文章 | vue工具帮你解决常见的错误与陷阱
来源:互联网 发布:淘宝网 iphone4 屏 编辑:程序博客网 时间:2024/06/06 14:04
本文来源于阿里云-云栖社区,原文点击这里。
开发时,Vue会提供很多警告来帮你解决常见的错误与陷阱。生产时,这些警告语句却没有用,反而会增加你的载荷量。再次,有些警告检查有小的运行时开销,生产环境模式下是可以避免的。
不用打包工具
如果用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
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渲染函数。
展开全文
- 技术文章 | vue工具帮你解决常见的错误与陷阱
- 技术文章 | 深度学习的这些坑你都遇到过吗?神经网络11大常见陷阱及应对方法
- nginx配置的常见陷阱及错误
- 技术文章 | 5常见的JavaScript开发错误避免
- SQL Server2008连接错误'233',帮你解决
- SQL Server2008连接错误'233',帮你解决
- SQL Server2008连接错误'233',帮你解决
- JVM常见错误与解决
- vue 常见错误
- vue常见错误
- 技术文章 | Hadoop常见错误和处理方式
- 20条常见的编码陷阱 你中枪了没?
- 20条常见的编码陷阱 你中枪了没?
- 20条常见的编码陷阱 你中枪了没?
- 20条常见的编码陷阱 你中枪了没
- 20条常见的编码陷阱 你中枪了没?
- 20条常见的编码陷阱 你中枪了没?
- 20条常见的编码陷阱 你中枪了没?
- 开方数
- STUN TURN signaling介绍
- 解决Pycharm 文件更改目录后,执行路径未更新的问题
- java.util.concurrent.RejectedExecutionException
- Unity笔记:如何固定物体某一轴坐标
- 技术文章 | vue工具帮你解决常见的错误与陷阱
- Django note2
- WPF自定义控件 使用阿里巴巴图标
- linux c 读取目录及其子目录下所有.jpg文件的文件名(无后缀)
- GeoMesa-Accumulo详细配置及实例运行
- 模块的概述
- bzoj1924 [Sdoi2010]所驼门王的宝藏(tarjan缩点+拓扑排序+dp)
- Binder(native层)
- 程序员职业生涯全攻略,附神级跳槽攻略图