岛书
关于webpack的配置和使用，网上已经有许多文章了，大多是在讲单页应用，当我们需要打包多个html时，事情就变得麻烦起来。怎么在webpack-dev-server里使用路由？怎么打包多个html和js并自动更新md5？本文讲的就是如何解决这些问题。 > 这里假设你对Webpack已经有最基础的了解 # 需求 来看下我们的需求: 1. 使用webpack-dev-server做开发时的服务器 2. 在webpack-dev-server里使用路由，访问/a时候显示a.html，/b显示b.html 3. 打包成多个html，给其中引用到资源加md5戳 # 主要目录结构 ``` ├── src │ └── views # 每一个文件夹对应一个页面 │ └── a │ └── index.js │ └──...
vue 性能优化
# 前言 一般来说，你不需要太关心vue的运行时性能，它在运行时非常快，但付出的代价是初始化时相对较慢。在最近开发的一个Hybrid APP里，Android Webview初始化一个较重的vue页面竟然用了1200ms ~ 1400ms，这让我开始重视vue的初始化性能，并最终优化到200 ~ 300ms，这篇文章分享我的优化思路。 # 性能瓶颈在哪里？ 先看一下常见的vue写法：在html里放一个app组件，app组件里又引用了其他的子组件，形成一棵以app为根节点的组件树。 ``` html ``` 而正是这种做法引发了性能问题，要初始化一个父组件，必然需要先初始化它的子组件，而子组件又有它自己的子组件。那么要初始化根标签``，就需要从底层开始冒泡，将页面所有组件都初始化完。所以我们的页面会在所有组件都初始化完才开始显示。 这个结果显然不是我们要的，更好的结果是页面可以从上到下按顺序流式渲染，这样可能总体时间增长了，但首屏时间缩减，在用户看来，页面打开速度就更快了。 要实现这种渲染模式，我总结了下有3种方式实现。第3种方式是我认为最合适的，也是我在项目中实际使用的优化方法。 # 第一种：不使用根组件 这种方式非常简单，例如： ``` html ``` 抛弃了根组件``，从而使A、B、C每一个组件初始化完都立刻展示。但根组件在SPA里是非常必要的，所以这种方式只适用小型页面。 # 第二种：异步组件 异步组件在官方文档已有说明，使用非常简单： ``` html...
**update： 本文写于2016年，vue1.0时期，现在大部分已不适用** 这个系列记录我在一年vue开发中总结的一些经验和技巧。 ## 利用Object.freeze()提升性能 Object.freeze()是ES5新增的特性，可以冻结一个对象，防止对象被修改。 vue 1.0.18+对其提供了支持，对于data或vuex里使用freeze冻结了的对象，vue不会做getter和setter的转换。 如果你有一个巨大的数组或Object，并且确信数据不会修改，使用Object.freeze()可以让性能大幅提升。在我的实际开发中，这种提升大约有5~10倍，倍数随着数据量递增。 并且，Object.freeze()冻结的是值，你仍然可以将变量的引用替换掉。举个例子： ``` html {{ item.value }} ``` ``` javascript new Vue({ data: { // vue不会对list里的object做getter、setter绑定 list: Object.freeze([ { value: 1 },...
之前看过一篇脑洞大开的[文章](http://imweb.io/topic/595b7161d6ca6b4f0ac71f05)，介绍了各个大厂的前端反爬虫技巧，但也正如此文所说，没有100%的反爬虫方法，本文介绍一种简单的方法，来绕过所有这些前端反爬虫手段。 下面的代码以百度指数为例，代码已经封装成一个百度指数爬虫node库： https://github.com/Coffcer/baidu-index-spider **note: 请勿滥用爬虫给他人添麻烦** ## 百度指数的反爬虫策略 观察百度指数的界面，指数数据是一个趋势图，当鼠标悬浮在某一天的时候，会触发两个请求，将结果显示在悬浮框里面：  按照常规思路，我们先看下这个请求的内容： **请求 1：**   **请求 2：**  可以发现，百度指数实际上在前端做了一定的反爬虫策略。当鼠标移动到图表上时，会触发两个请求，一个请求返回一段html，一个请求返回一张生成的图片。html中并不包含实际数值，而是通过设置width和margin-left，来显示图片上的对应字符。并且请求参数上带有res、res1这种我们不知如何模拟的参数，所以用常规的模拟请求或者html爬取的方式，都很难爬到百度指数的数据。 ## 爬虫思路 怎么突破百度这种反爬虫方法呢，其实也很简单，就是完全不去管他是如何反爬虫的。我们只需模拟用户操作，将需要的数值截图下来，做图像识别就行。步骤大概是： 1. 模拟登录 2. 打开指数页面 3. 鼠标移动到指定日期 4. 等待请求结束，截取数值部分的图片 5....