记一次webpack打包优化

开始接触vue的时候大概就是开始接触webpack的时候,用vue-cli直接脚手架工程后就开始开发了,用了一段时间后发现vendor.js越来越大,居然到了M的级别。看了一下vue-cli的默认配置,vendor是把node_modules里的依赖都打进vendor中,我觉得太大了这样,不如手动维护控制包的粒度,多分出几个包,充分利用浏览器并发请求资源的好处,而不是把所有东西都打进vendor中。 那个阶段开发任务重,没太多时间细细纠结,反正是迷迷糊糊看着webpack的配置文档和各种问题解决的帖子把上面提到的事儿做了。效果出来了,也就没再管过。这几天突然发现打包的地方还是有很多可以优化的点儿,便优化并记录一下。 这里着重的就是三个东西来完成此次优化: webpack.optimize.CommonsChunkPlugin OptimizeCssAssetsPlugin BundleAnalyzerPlugin »

从插件组件说到vue的slot上监听

最开始写网页的时候我很崩溃,为什么写的代码很快就不能看了,一坨一坨的,对自己写的东西觉得非常没有安全感,以至于很长一段时间里我都在做重复而难以维护的事情。我感觉前端开发有两件事儿是特别需要重视的,一个就是可维护性,一个就是复用性。 可维护性有很多因素,我觉得最重要的就是模块化,遥想现在的老系统的代码都是要么js一坨,要么script标签引入一坨而且顺序还得小心翼翼,真是太惨了。。。 而可复用性就是今天要记录的一些东西,虽然说的是vue里具体的解决方案。可是很多东西都是相通的。 比如最开始的时候: 第一天,我有一个table页面,好的,我html一画,js数据一拿,事件一监听完工; 第二天,我又有一个这样的table页面,差不多, »

提交表单数据的不同

前后端通信的时候,我们肯定要定义传输的格式,以便进行交流,我们利用http进行数据传输时有不少提交数据的方式,之前也就是用别人封装好的,也没有太总结过~~废话少说,listing it~ 在http的协议里有个header字段来进行数据格式的约束,就是Content-Type 字段。它有三个指令: midea-type: 资源类型MIME charset:字符集 boundary:简单来说用来区分资源的分块标识 例如 Content-Type: text/html; charset=utf-8 Content-Type: »

new Promise vs Promise.resolve

异步嘛,新项目上了ES6,反正就是用,虽然没有用async/await,感觉promise也可以处理大部分情况了,毕竟项目的异步数据流没有那么复杂,这里记录一下下,有时候封装异步操作为promise,看到别人的代码有用new的,有直接调resolve的,故查了一下两者的区别。 Promise.resolve(x); 和 new Promise(function(r){ r(x); }); 是有一样的效果的,都是返回一个promise,来让使用者使用。只是Promise. »

ES6箭头函数

ES6的箭头函数其实就是词法作用域的一种方式,它本身没有this,所以会向上寻找有this的作用域当做自己的作用域;而普通函数的this是运行时动态绑定的,也就是指向调用者的作用域(上下文环境) 所以呢? function Person() { var self = this; self.age = 0; setInterval(function growUp() { self.age++; }, 1000); } // 可以改成这么写,是不是简化了很多? function Person() { this. »