Memo

首页 » Archive by category 'Memo' (Page 4)

thunkli

async await 原理

ES2017 标准引入了 async 函数,它就是 Generator 函数的语法糖。 async 函数的实现原理,就是将 Generator 函数和自动执行器,包装在一个函数里。 Generator 函数是 ES6 提供的一种异步编程解决方案,调用 Generator 函数,会返回一个内部指针(即遍历器)g。这是 Generator 函数不同于普通函数的另一个地方,即执行它不会返回结果,返回的是指针对象。调用指针g的next方法,会移动内部指针(即执行异步任务的第一段),指向第一个遇到的yie … 继续阅读

发表在 Memo |
thunkli

Higher-Order Components与 Render Props

Higher-Order Components 这里是一个响应鼠标事件的Higher-Order Components例子: import React from ‘react’ import ReactDOM from ‘react-dom’ const withMouse = (Component) => { return class extends React.Component { state = { x: 0, y: 0 } handleMouseMove = (event) =& … 继续阅读

发表在 Memo | |
thunkli

IntelliJ IDEA ESLint autofix/prettier

Action 搜索Actions选择Fix ESLint Problems(Cmd-Shift-A on OS X or Ctrl+Shift+A on Windows and Linux): File Watchers 保存文件时自动eslint –fix: 保存文件时自动prettier –write: 适用于IntelliJ IDEA/PHPStorm/WebStorm 参考链接: File Watchers How to Set Up ESLint Autofix and Prett … 继续阅读

发表在 Memo | |
thunkli

webpack中Hash、chunkhash与contenthash区别

hash hash字段是根据每次编译compilation的内容计算所得,也可以理解为项目总体文件的hash值,而不是针对每个具体文件的。 chunkhash chunkhash代表的是chunk的hash值。简单讲,chunk就是模块。chunkhash也就是根据模块内容计算出的hash值。 contenthash 使用extract-text-webpack-plugin单独编译输出css文件,造成上一节js/css共用hash指纹 extract-text-webpack-plugin提供 … 继续阅读

发表在 Memo | |
thunkli

Preload与Resource Hints

preload <!– preload stylesheet resource via declarative markup –> <link rel=”preload” href=”/styles/other.css” as=”style”> <!– or, preload stylesheet resource via JavaScript –> <script> var res = document.createElement(“li … 继续阅读

发表在 Memo |
thunkli

WebView与JavaScript通信

本文所说的APP指IOS APP(Swift),不包括Android APP。 APP如何渲染网页? 苹果提供了UIWebView组件,像浏览器一样可以加载任何网页。iOS8以后,苹果推出了新框架Webkit,提供了替换UIWebView的组件WKWebView。速度更快,占用内存少。 WKWebView 执行JavaScript //home.html //… <h1>Welcome!</h1> //… <script> function redHe … 继续阅读

发表在 Memo | |
thunkli

优化webpack打包速度

随着项目复杂度的提升,react、react-dom、react-route等一系列框架的引入,再加上babel-preset-es2015、babel-preset-react等一系列插件,webpack变得越来越慢。webpack提供了DllPlugin和DllReferencePlugin插件可以让构建速度飞起来。 DllPlugin 这个插件专门用于单独的webpack配置来创建一个dll-only-bundle。 它创建一个manifest.json文件,由DllReferencePl … 继续阅读

发表在 Memo | |
thunkli

Webpack实时监听在IntelliJ IDEA中修改的文件

由于很多编辑器支持“safe write”功能,并且默认启用它,这使dev server无法实时监听到文件的修改。“safe write”意味着修改不会直接写入原始文件,而是写入临时文件,当保存操作完成时,将重命名并替换原始文件。因为原始文件被删除,因此会导致文件监视器提丢失轨道。为了防止此问题,你可以在编辑器中禁用“safe write”功能。 IntelliJ – Settings > System Settings > Synchronization > di … 继续阅读

发表在 Memo | |
thunkli

webpack动态加载

假如你正在开发一个单页应用,随着项目功能的不断增加,打包后的文件也越来越大,此时为减少页面的初始加载时间和避免不必要的多余加载,我们就需要实现动态加载,或者叫按需加载。 翻一下webpack的官网,很容就会发现2个方法: require.ensure require.ensure(dependencies: String[], callback: function([require]), [chunkName: String]) dependencies:是一个数组指明所依赖的文件 callba … 继续阅读

发表在 Memo | |