#自动化工具

去年接触了公司内一个开发运行了两年多的项目,整体应用是基于 React 技术栈的,多个单页应用有构成了多页应用。可以理解为比较独立的子业务之间是 MPA 形式跳转,而子业务内部则是 SPA 形式。

项目的构建使用了 webpack,发现存在较大问题:

  • 在生产环境上线编译大致需要 13 min+;
  • 本地开发环境下,代码改动后的热更新(增量编译)需要大概 10~20s 的时间,使得开发体验很差。

相信这些问题在很多上线迭代了很长时间的、使用了 webpack 的团队中都会遇到,所以把自己的优化实践经历写出来,和大家交流下。我在优化的时候也参考了许多网络上介绍的优化手段,当然,有些具有不错效果,有些可能对我们来说不适用。这并不是一篇罗列各种 webpack 优化技巧的文章,除了优化实践,还会有一些期间的反思。

阅读更多>>

「 你能回答这十问么?」

  1. webpack默认配置是在哪处理的,loader有什么默认配置么?
  2. webpack中有一个resolver的概念,用于解析模块文件的真实绝对路径,那么loader和普通模块的resolver使用的是同一个么?
  3. 我们知道,除了config中的loader,还可以写inline的loader,那么inline loader和normal config loader执行的先后顺序是什么?
  4. 配置中的module.rules在webpack中是如何生效与实现的?
  5. webpack编译流程中loader是如何以及在何时发挥作用的?
  6. loader为什么是自右向左执行的?
  7. 如果在某个pitch中返回值,具体会发生什么?
  8. 如果你写过loader,那么可能在loader function中用到了this,这里的this究竟是什么,是webpack实例么?
  9. loader function中的this.data是如何实现的?
  10. 如何写一个异步loader,webpack又是如何实现loader的异步化的?

阅读更多>>

webpack 的成功之处,不仅在于强大的打包构建能力,也在于它灵活的插件机制。

本文的第一部分会先介绍钩子(hook)这个重要的概念与 webpack 插件的工作方式。然而,熟悉的朋友会发现,这种灵活的机制使得 webpack 模块之间的联系更加松散与非耦合的同时,让想要理清 webpack 内部源码结构与联系变得更困难。第二部分将会介绍 webpack 内部插件与钩子关系的可视化展示工具📈,用一张图理清 webpack 内部这种错综复杂的关系。

阅读更多>>

Babel 是一个非常强大的工具,作用远不止我们平时的 ES6 -> ES5 语法转换这么单一。在前端进阶的道路上,了解与学习 Babel 及其灵活的插件模式将会为前端赋予更多的可能性。

本文就是运用 Babel ,通过编写 Babel 插件 解决了一个实际项目中的问题。

阅读更多>>

随着前端项目的不断扩大,原本简单的 JS 文件可能变得越来越庞大。尤其在近期流行的单页面应用中,打包工具将相互依赖的模块直接打包成一个 bundle 。页面第一次载入时,就会将所有的 JS 全部载入。但许多的场景中,我们并不需要使用所有的 JS 模块。例如,一个订单管理后台,用户进入订单列表时,没有用到的系统管理相关的资源则无需加载。在这种时候,我们就可以考虑进行代码拆分( code splitting )。

阅读更多>>

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×