FrankKai.github.io
FrankKai.github.io copied to clipboard
FrankKai
FE blog
 之前尝试过一些在webpack3的基础上做的构建优化，例如引入HappyPack优化构建速度，开启loader缓存和优化包查找路径等等，详情可以查看[前端webpack构建优化](https://github.com/FrankKai/FrankKai.github.io/issues/221) 但是随着时间的推移，这种优化产生的效果越来越弱化，**手上的项目体积越来越大，对本地开发热更新速度和生产打包发布速度都有了很大的影响。** webpack3升级到webpack4迫在眉睫，这篇博文将记录一些我在升级过程中遇到的坑。 当你遇到这些坑时，通过搜索引擎找到我这篇文章，如果能够解决了手上的webpack配置问题，然后发自内心的感到 **”Save my day！“，”It helps me！“，”Solved my problem！“，”Works for me！“** ，我会感觉自己的这篇博文很有意义。 - 升级到 webpack 4 - 移除 CommonsChunkPlugin，默认使用 SplitChunksPlugin 分割代码 - 升级 html-webpack-plugin - 移除 extract-text-webpack-plugin，引入...
 >从0到1负责手上项目一年多了，webpack虽然是老生常谈的话题，但只有出现问题时，才会去思考怎么去优化。由于项目里引入了越来越多的依赖，所以本地开发编译过程越来越慢，因此才有了这一次的webpack优化。顺便对一些生产环境的静态资源也做了一些优化。 ### 一.HappyPack多线程编译 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz 8核16线程 webpack 3.12.0 ThreadPool.size:16 本地构建速度： 51281ms（未引入happypack） 43750ms（引入happypack eslint-loader） 35862ms（引入happypack eslint-loader, vue-loader） 35476ms（引入happypack eslint-loader, vue-loader, babel-loader） 打包dist速度： 58192ms（未引入happypack） 49745ms（引入happypack eslint-loader） 46505ms（引入happypack...
- 测试localStorage存储限制 - 测试浏览器所有storage的限制 - PC: Chrome/Firefox/IE/Safari的localStorage/sessionStorage限制 - Mobile: Android Browser/iOS Browser的localStorage/sessionStorage限制 - PC端localStorage/sessionStorage限制至多10MB，如何使用更大的存储空间？ - Mobile端localStorage/sessionStorage限制至多10MB，如何使用更大的存储空间？（待实践） - V站讨论：[localStorage 和 sessionStorage 什么场景下存储达到上限呢？](https://www.v2ex.com/t/647457) ### 测试localStorage存储限制的网站 最大存储char数。 https://arty.name/localstorage.html ### 测试浏览器所有storage的限制 KB，MB细粒度测试localStorage，sessionStorage，IndexedDB，WebSQL和FileSystem的存储上限。 https://demo.agektmr.com/storage/ ###...
 现代化前端的全局引入是一个很有趣的东西。 先来看下以下几个场景： - 在webpack中，我们可以在resolve的alias中定义一个层级较高的目录为一个自定义变量。例如`resolve: { alias: { '@': path.join(__dirname, '..', 'src') }}`。 - 在webpack中，我们也可以通过DefinePlugin将配置文件按照环境变量进行区分，高效的完成配置文件的按环境引入，无论是开发构建还是生产构建，都十分有用。 - 在vue中，我们可以将一个常用的方法或者库定义在Vue.ptototye上，可以通过直写属性，也可以通过vue中的plugin install上去。例如`Vue.prototype.$_ = lodash`，在应用了vue的应用上下文中，可以通过this.$_获得对lodash的引用。 - 在vue中，还有mixins，inject以及vuex等等这些全局绑定或者叫混入、注入方式的全局引入的实现。 来思考一个问题： ``` 如果我们再Vue.prototype上绑定了太多，太大的第三方库，会不会导致root vue过大？ 答案是肯定的。 有没有办法解决这个问题？ 你可能会说，我不用this.xxx。用到的vue单文件组件直接import或者require就好了。 如果数以百计，数以千计甚至是数以万计的.vue文件中用到了呢？一直引入吗？...
- 初识任务和微任务 - 什么是微任务？ - 常见的微任务队列有哪些？ - 任务 vs 微任务 - 如何理解任务？ - 如何理解微任务？ - 如何使用微任务？ - 队列微任务 - 什么时候使用微任务 - 使用Promise确保条件判断排序 - 避免发送重复请求 - 使用微任务的例子 - 最简微任务例子 - Timeout和微任务例子...
在这个模块我们将学习重要的与异步编程相关的概念，以及它们在web浏览器和JavaScript中的表现。在学习其他文章之前，首先需要学会这些概念。 - 什么是异步？ - 阻塞的代码 - 线程 - 异步的代码 - 总结 ### 什么是异步？ 通常情况下，程序的代码是直接运行的，只运行一次。如果一个函数依赖于另一个函数的结果，它就需要等待另一个函数结束并返会返回值。在此之前，从用户的角度看，整个程序是停止的。 看一段代码感受一下： ```js function block(){ const start = Math.floor(Date.now()/1000); let i = 0; while(i { let myDate;...
- 初识并发模型和事件循环 - 运行时概念 - 可视化呈现 - 栈（stack） - 堆（Heap） - 队列（Queue） - 事件循环 - 初识事件循环 - ”执行到完成“ - 增加消息 - 零延迟（Zero delay） - 多个运行时互相通信 - 从不阻塞
- web worker解决什么问题？ - vue-cli3 项目配置( webpack4 worker-loader2 ) - 手上项目测试demo( webpack3 worker-loader1 ) - 手上项目web worker 实践（迁移热力图计算逻辑） - 总结与思考 ### web worker解决什么问题？ 由于JavaScript是单线程的，当一段js代码执行耗时过久时，会有阻塞的情况出现。 web worker就是解决阻塞的一种方式。它开启了一个一个worker thread，将复杂计算放在worker线程中运行，将同步代码转换为异步代码。 可以看这个例子。 #### main...
几乎所有使用Vue的开发者都知道，Vue的双向绑定是通过Object.defineProperty()实现的，也知道在getter中收集依赖，在setter中通知更新。 那么除了知道getter和setter之外，Object.defineProperty()还有哪些值得我们去注意的地方呢？是不是有很多细节的东西不懂呢？ 你可能会说，除了getter和setter之外，Object.defineProperty()还有value，writable，enumerable，configurable。 那么问题来了？ - value或writable与getter，setter可以共存吗？与enumerable，configurable呢？ - 概括讲下writable，enumerable，configurable分别是什么意思？ - enumerable在Object.keys()和for...in以及展开操作符...是如何表现的？ - configurable会限制哪些属性不可redefine？value会被限制吗？会限制属性的删除吗？ - 通过obj.foo和Object.defineProperty(obj,foo)方式定义的属性有何区别？ - `data descriptor、accessor descriptor、shared descriptor`是什么？ 如果看了上面这些问题一脸懵逼，不要惊慌，我们先来看一道非常直观易懂的题目： ```js // 实现下面的逻辑 console.log(a+a+a); // 'abc' ``` 题目看完了，带着问题开始阅读下面的内容吧。 如果能耐心看完的话对于个人的前端技术提升会非常大。 往近了说，不出意外上面这些问题全部可以迎刃而解，对于a+a+a题目的题解也会理解更加透彻。...