作者： 神Q超人 译者：前端小智 来源：medium 前阵子在和朋友聊 Webpack 的时候，突然提到 Tree Shaking，但很惭愧的是我没有办法好好说明 Webpack 是如何做到 Tree Shaking 的，因此就趁这个年假的第一天抽空读 Webpack 的文件，然后把理解到的心得写下来，如果你也有兴趣，就一起看下去吧 🙌。 Tree Shaking 是什麽 Tree Shaking 是个优化的方式，在 JavaScript 中用来表示移除没用的代码的一个常见术语，之所以叫做 Tree Sha
文 | kamidox 微信小程序发布有一段时间了，但目前小程序的兼容性问题，特别是 Android 平台兼容性问题，特别严重。据我观察，好多小程序都曾踩过兼容性的坑。 掉坑里不要紧，更让人捉急的是，微信审核人员打回了紧急修复兼容性的版本。这就好比从坑里爬上来的时候，手刚抓到坑沿，又被微信官方踩到，再次跌落坑底。 这下，就只能眼睁睁地看着后台用户在破口大骂：「什么东西都没有啊，什么破小程序」。 微信小程序的兼容性问题除了微信本身的 Bug 外，大部分是目标平台对 JavaScript 标准库支持程度不同造成
👆点击“博文视点Broadview”，获取更多书讯 摇树优化Tree Shaking是Webpack里非常重要的优化措施，它的优化效果在Webpack 5中又得到了进一步的提升。 Tree Shaking可以帮我们检测模块中没有使用到的代码块，并在Webpack打包时将没有用到的代码块移除掉，减小打包后的资源体积大小。 它的名字也非常形象，通过摇晃树把树上干枯无用的叶子摇掉。 01 使用Tree Shaking的原因 我们来看一个例子。 b.js文件的内容如下： var name = 'Jack'
今天聊 JavaScript 的最新提案，这是我 最新技术提案 专栏的第 16 篇文章了，感谢读者们一如既往的支持！
5.执行npm run build，发现那些被拆分的包，没有打进业务代码中，符合预期
浅谈script标签中的async和defer script标签用于加载脚本与执行脚本，在前端开发中可以说是非常重要的标签了。 直接使用script脚本的话，html会按照顺序来加载并执行脚本，在脚本加载&执行的过程中，会阻塞后续的DOM渲染。 现在大家习惯于在页面中引用各种的第三方脚本，如果第三方服务商出现了一些小问题，比如延迟之类的，就会使得页面白屏。 好在script提供了两种方式来解决上述问题，async和defer，这两个属性使得script都不会阻塞DOM的渲
对于script元素，新增async属性与defer属性，他们的作用都是加快页面的加载速度，使脚本代码的读取不再妨碍页面上其他元素的加载。
现在大家习惯于在页面中引用各种的第三方脚本，如果第三方服务商出现了一些小问题，比如延迟之类的，就会使得页面白屏。 好在script提供了两种方式来解决上述问题，async和defer，这两个属性使得script都不会阻塞DOM的渲染。 但既然会存在两个属性，那么就说明，这两个属性之间肯定是有差异的。
公司的新项目迁移到了 React 16 和 Webpack 4.0，写一篇文章来总结一下。
本文由 IMWeb 团队成员 eden 首发于腾讯内部 KM 论坛。点击阅读原文查看 IMWeb 社区更多精彩文章。 前言 随着前端构架工具的不断发展，提供了很多提高我们的开发体验和开发效率的能力，同时构建已经成为前端技术栈中常见的技术。 webpack 也是众多构建工具中崭露头角一员，早期的 webpack 配置复杂难懂，随着其发展，相关配置也不断简化，性能也不断提高，但是对于深入使用的开发人员，通常它的默认配置并不适用于业务开发，需要针对自己业务调整适配。 你对 webpack 了解多少？如何针对业务
访问-> 200 -> 退出浏览器 -> 第二次进来-> 200(from disk cache) -> 刷新 -> 200(from memory cache)
之前小伙伴写了一个性能上报的 SDK，近期做重构了之后要兼容 script import 方式的引入，同时还要引入 Google 新推出的性能衡量指标，肉眼可见随着该项目的发展，项目体积、文件数量都会与日俱增。在此大背景下，我尝试了 Cypress 添加了集成测试。
关于 React 应用加载的优化，其实网上类似的文章已经有太多太多了，随便一搜就是一堆，已经成为了一个老生常谈的问题。
关于 React 应用加载的优化，其实网上类似的文章已经有太多太多了，随便一搜就是一堆，已经成为了一个老生常谈的问题。 但随着 React 16 和 Webpack 4.0 的发布，很多过去的优化手段其实都或多或少有些“过时”了，而正好最近一段时间，公司的新项目迁移到了 React 16 和 Webpack 4.0，做了很多这方面的优化，所以就写一篇文章来总结一下。 零、基础概念 我们先要明确一次页面加载过程是怎样的（这里我们暂时不讨论服务器端渲染的情况）。 一次渐进式加载的全过程 用户打开页面，这个时候
本文针对 babel 7.4.0+ ，处理方式仍然是寻找相应 Babel polyfill。
Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但对于 IE9+，Vue 底层是支持。
在此之前或许你已经用过babel，也许听说过什么 babel-loader babel-core、babel-cli、babel-plugin-...、babel-preset-env 反正各种乱七八糟的做项目随便用一一下就可以了，对他只有个一知半解，甚至不知道他到底是干什么的，反正项目要用，照着用就行了，至少博主之前的状态是这样，如果只对他有个一知半解甚至都不了解，那么项目出bug了你都不知道怎么去调试，只能复制-->粘贴-->百度。 基于此，写下自己对Babel的理解。
测试是开发周期中的一个重要组成部分。没有测试的代码被称为：遗留代码。对于我而言，第一次学习 React 和 JavaScript 的时候，感到很有压力。如果你也是刚开始学习 JS/React，并加入他们的社区，那么也可能会有相同的感觉。想到的会是：
vue.js有著名的全家桶系列，包含了vue-router，vuex， vue-resource，再加上构建工具vue-cli，就是一个完整的vue项目的核心构成。
在平常的项目开发中肯定会遇到同步异步执行的问题，还有的就是当执行某一个操作依赖上一个执行所返回的结果，那么这个时候你会如何解决这个问题呢；
关于 es6 的内容想必大家都已不再陌生，因为 es10 都已经出来了，只要不是太老的浏览器版本基本都支持 es6 的大多数特性了。可以看这里：http://kangax.github.io/compat-table/es6/ 当然，要保证 es6 或者 es7 的语法进行源码编写后完全可用，我们可以用 babel 将其转成 es5。Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。 关于 babel 的使用方法和原理都可以单列一个系列了，在此我们只讲述 babel 如何结合 webpack 使用。
整理 ｜ Tina 商业公司和开源社区必须团结起来，找到一种方法来承认和奖励维护者的宝贵贡献。如果牺牲个人才是参与开源的先决条件，我们就会继续将这些聪明有才华的人排斥在开源之外。 数百万网站使用的 core-js 库的维护者 Denis Pushkarev 表示，他准备放弃开源开发，因为很少有人为他们所依赖的软件付费。 “免费开源软件的根基已经崩塌了”，他在 core-js 存储库的注释中写道。“其实我可以直接转身离去，但面对这片自己曾经倾注了热情的社区，我还是想最后说点什么，也是给开源最后一次机会。
为了优化前端工程, 我们通常会将静态文件压缩,减少带宽占用; 将静态文件合并,减少http请求, webpack可以轻易实现静态文件的压缩合并以及打包的功能, 除此之外, webpack还支持众多的loader插件, 通过loader插件可实现众多类型(如vue, less, jpg, css)资源的打包 webpack的文档写的相当出色, 为了方便读者学习, 下面每一类配置的注释里, 都附上了参考的原文档地址, 如果以后配置更新了,也方便查看更新的文档 如果不想自己配置, 可以直接拷贝最后的配置文档到自己
提到前端编译工具链方面，可能大家最新想到的是诸如@babel/preset-env、core-js、regenerator-runtime等工具。不过，我们今天要讲的是官方的 Vite 插件@vitejs/plugin-legacy，以及如何将这些底层的工具链接入到 Vite 中，并实现开箱即用的解决方案。
core-js[1]是JavaScript的模块化标准库，包括了ECMAScript到2021年的新api的向后兼容实现。它和babel高度集成，是babel解决新特性在浏览器中兼容问题的核心依赖。
webpack2和vue2已经不是新鲜东西了，满大街的文章在讲解webpack和vue，但是很多内容写的不是很详细，对于很多个性化配置还是需要自己过一遍文档。Vue官方提供了多个vue-templates，基于vue-cli用的最多，不过对于很多人来说，vue-cli 的配置还是过于复杂，对于我们了解细节实现不是很好，所以想自己从零开始搭建一个模板工程，也顺便重新认识一下webpack和vue工程化。
1、找个android真机测试下（机型版本为4.4以上），真机联调测试（如果不知道怎么联调，那么请看这里：Android真机 - 联调chrome调试）
描述 npm run build打包后，生成 dist文件夹。从该文件夹打开 dist/index.html页面，发现页面空白，且控制台报错。原因是路径配置有问题。方案根目录打开/新建 vue.config.js，配置路径：
今天组长跟我们讨论了个问题，说是文章存储占用有点大，消耗宽带流量费，让我看看能不能找个方法解决一下（文章存储的是html字符串）。第一反应是没什么头绪，能想到的就是将相同的字符串替换成一个标识之类的，小程序再通过标识替换回原本的字符（感觉就不是很靠谱...）。
在项目根目录下新建 webpack.config.js，作为 webpack 的默认配置文件。
webpack从0到1-使用babel打包 讲下webpack中的loaders的概念，然后结合使用babel-loader来对项目中的es6语法做下转换。 git仓库：webpack-demo 1、什么是loaders？ 先看官网对Loaders的解释：webpack enables use of loaders to preprocess files。 简单一点来说就是一个可以帮我们处理文件的东西，比如一个js文件，在webpack打包的时候看到这个js文件就会走我们定义的比如接下来要说的bab
babel 是 JavaScript 的编译器，可以将最新 ES 语法的代码轻松转换成任意版本的 JavaScript 代码，其实现原理是先使用 Babylon 解释器将 JavaScript 语法解析成 AST，然后通过遍历处理这颗树实现代码转换。在 babel 中可以通过配置 browserslist 来针对不同的浏览器组合，生成不同的适配代码。
用React build项目，部署后 IE 浏览器打不开（我用的是 IE11），控制台报错：SCRIPT438：对象不支持"assign"属性或方法。
Polyfill 是一块代码（通常是 Web 上的 JavaScript），用来为旧浏览器提供它没有原生支持的较新的功能。
大家好，我是 @zloirock （Denis Pushkarev），一名全职开源开发者。
本文介绍了在WebAssembly中利用async/await实现异步编程的方法，通过WebAssembly编译器将异步代码编译成同步代码，并利用WebAssembly的运行时特性实现异步调用，从而在浏览器中实现类似于Node.js的异步编程体验。同时，针对目前主流的前端框架和库，如Vue.js、React等，也介绍了相应的实现方法。
对于前端开发者来说，caniuse网站是一个非常有用的工具，它可以帮助我们查询JavaScript API在不同浏览器版本中的兼容性情况。以fetch为例，我们可以在网站上查到其兼容性如下图所示：
背景 babel的官网说babel是下一代的js语法编译器，现在自己也在很多项目中使用了babel，可是自己对babel的认识呢，只停留在从google和别人项目中copy的配置代码上，内心感到很不安，最近花了点时间整理了一下，分享给大伙。 babel常用配置 通常在前端或node项目中，进行以下配置： 入口文件app.babel.js里面配置： // babel require('babel-core/register')({ presets: ['es2015', 'stage-0'] }); re
无论是日常业务架构、前端框架设计甚至在前端面试过程中，一定会存在 Babel 的身影。
在项目开发中，接口请求是必不可少的，为了方便使用和维护，大家都会将接口请求的方法二次封装。下面小编将我项目中接口封装使用的方法分享给大家，希望可以帮到大家。喜欢的给个三连击再走哟。
查看安卓debug，报错，可能有箭头函数语法错误，或者其他语法问题，那可能是ES6语法问题。
core-js 是关于 ES 标准最出名的 polyfill，polyfill 意指当浏览器不支持某一最新 API 时，它将帮你实现，中文叫做垫片。你也许每天都与它打交道，但你毫不知情。
需要注意的是, babel-loader和babel-polyfill。前者负责语法转化，比如：箭头函数；后者负责内置方法和函数，比如：new Set()。
在之前「为vue项目添加骨架屏」一文中，介绍了骨架屏的概念以及在 Vue 项目中的应用。本文将介绍如何加快浏览器对骨架屏的渲染。
JavaScript语言的更新，也伴随着 Babel 的成长， 对于一个前端而言，JavaScript 新的 API 自然很香，但代价就是我们要转译它，比较常用工具的就是 Babel 。
关于WebVR 最近VR的发展十分吸引人们的眼球，很多同学应该也心痒痒的想体验VR设备，然而现在的专业硬件价格还比较高，入手一个估计就要吃土了。但是，对于我们前端开发者来说，我们不仅可以简单地在手机上进行视觉上的VR体验，还可以立马上手进行Web端VR应用的开发！ WebVR是一个实验性的Javascript API，允许HMD（head-mounted displays）连接到web apps，同时能够接受这些设备的位置和动作信息。这让使用Javascript开发VR应用成为可能（当然已经有很
简单地讲，Paint API就是允许你通过JavaScript注册一个背景函数，类似于linear-gradient()那种，在定义时候可以提供Canvas的2Dcontext给你自行绘制，你通过JS注册这个背景函数后呢，就可以自由地在CSS中通过以下方式使用该背景
在现代 Web 应用中，为了让代码能在生产环境高性能的运营，源代码往往需要被编译打包，进行死码删除，代码转换等处理。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
