一.Vue项目打包过后项目过大怎么处理
1.首先是在production 生产环境下关闭source-map 具体路径 config/index.js build:{
productionSourceMap: false
},
2.其次是可以将css抽离出来，单独打包：
extract-text 顾名思义只抽取里面的文本是不是一下子就记住了
安装webpack插件extract-text-webpack-plugin。
npm install extract-text-webpack-plugin --save-dev。
使用方法：
plugins:[
new ExtractTextPlugin('static/css/styles.[contenthash].css')
]
这里使用了contenthash，webpack会根据内容去生成hash值。
3.还可以通过uglifyjsPlugin
具体的使用方法:
npm i -D uglifyjs-webpack-plugin 安装这个丑陋的JS插件
再在production配置里面把该插件引入
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
NODE_ENV: '"production"',
plugins: [
new UglifyJsPlugin()
]
}
4.通过commonchunk插件把较大的公共依赖提取到一个js里面，只用加载一次。
chunk的意思是巨大的意思两个单词在一起就是巨大的公共。
5.通过GZIP压缩
二、响应式数据原理
1.感觉这是Vue面试必问的一道题，首先要大致的概括一下：
vue通过Object.definedProperty(),重新定义用户传入data里面的所有属性。对用户传入的数据进行劫持，给里面的所有属性添加get/set方法，当属性被访问时进行依赖收集，当属性被修改时进行通知。
2.再从源码的角度加以细说：
首先在Vue的源码的核心文件(core)下面里面的State.js里面初始化state方法initState()里面调用了initData()方法，该方法的目的是初始化用户传入的数据，通过observe()方法对数据进行观测在这个方法里面就要看传入的数据是否存在__ob__这个属性如果没有就new Observer();将该数据作为参数传入到Observer里面。Observer类里面主要是一个构造方法和一个walk()方法。在Observer构造方法里面只要是判断传入的数据是对象类型还是数据类型。如果是对象类型就调用下面的walk方法对该对象进行遍历，遍历的时候调用defineReactive()，在该方法内部就使用了Object.defineProperty()对该对象的get/set方法进行的重新定义，最终实现的数据的响应式。
