Vue 使用 CDN 减少打包体积

详细步骤

具体的步骤无需赘述了，index.html之中引入 CDN 的 script

    <!-- axios -->
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
    <!-- Vue -->
    <script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
    <!-- VueRouter -->
    <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
    <!-- ElementUI -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.11/index.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.11/theme-chalk/index.css" rel="stylesheet"/>

第二步在webpack里面配置externals:

  entry: {
    app: './src/main.js'
  },
  externals:{
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    "axios":"axios",
    "ElementUI":"ELEMENT",
  },

最后从组件中删除 import xxx from vue之类的即可。
事实上不删也无所谓，webpack打包时自会略去这一部分(前提是与external中配置的名称一致)。

- 阅读剩余部分 -

绝对不要使用 ctx.body = request.get(stream_link)

在我的一个本地Server中，制作了一个解析视频网站视频流的API

大概的形式是这样的，

由 nodejs 向 视频网站请求流，然后使用ctx.body = request.get(stream_link)的方式向本地播放器输出流。

但是这其中有一个非常大的问题，就是在关闭播放器，KOA也获取到 ECONNRESET 错误的情况下，无法 destory Request的流。

这就导致即使关闭了播放器，nodejs依然在下载对应的那个视频，如果多切换几个视频，后台就会有多个下载任务占用带宽。

找了半天没有找到处理办法，KOA的相关讨论也只是说尽量不要给ctx.body设置为HTTP流。

最后直接Hack了一下，在app上直接监听Error事件，发生ECONNRESET的时候直接process.exit(0),反正后台有 forever的Daemon。

至少目前还没有找到可靠的处理方法。

如果可以处理的话，思路大概这样，将HTTP stream的引用暂存起来，读取ECONNRESET，并且与对应的ctx对应，找到 stream ，想办法结束流。

这个就留待以后实现吧，仅在此做一个记录

这个很简单，以console.log举例吧

由于严格模式不能使用caller、callee和arguments，因此使用Error来拿到调用栈。

代码如下:

let log = console.log;
console.log = function myLog(...args){
    try{
        log(...args);
        throw(new Error("[!] - 检查到未被移除的Log调用:"));
    }catch(e){
        log(e.stack);
    }
}

大概就是两步，第一步，把这个函数拿出来，第二步，用另一个函数代理，然后抛出错误，打印e.stack即可

在尝试寻找并移除一个log提示时，为了打印该log的调用栈，而整理了这个方法。

Vcenter 踩坑记

“过度设计等于没有设计”

前言

Vcenter的后台框架经过一段时间的填充已经大体有模有样了，后台专门设置一个APIController，调用各个不同的模块来提供服务。但是在编码之余却又发现了一个坑点。

- 阅读剩余部分 -

最近在写Vcenter的时候，KOA老是会蹦出来一句

koa deprecated Support for generators will be removed in v3. See the documentation for examples of how to convert old middleware https://github.com/koajs/koa/blob/master/docs/migration.md webpack:\server\server.js?, <anonymous>:40:5

意思是你用了一个 KOA1时代的生成器写法，非常古老了，下个版本不兼容了，赶紧换了吧。

其实这个也没啥影响，只是一个warning，但是本强迫症看着非常难受。

于是有了以下非常焦躁的DEBUG经历。

- 阅读剩余部分 -