Tag: frontend-engineering

All the articles with the tag "frontend-engineering".

• Redux TechStack

  Published:2019年12月31日 |  at 16:00

  + combineReduers + bindActionCreator + connect + Provider + mapStateToProps + mapDispatchToProps + redux + react-redux + redux-thunk + redux-saga + redux-actions + resele

• style

  Published:2019年12月31日 |  at 16:00

  在打包器，比如 webpack 中，需要借用 loader 将非 JS 资源转化成可识别为 Javascript 的 module。 在 webpack 中，处理 css 稍微比较费劲，需要借用两个 loader 来做成这件事情: 1. $1: 处理 CSS 中的 url 与 @import ，并将其作为模块引入 1. $1: 将样式注入

• Tree Shaking

  Published:2019年12月31日 |  at 16:00

  class 是否可以 Tree Shaking + CONCATENATED MODULE Tree Shaking 指基于 ES Module 进行静态分析，通过 AST 将用不到的函数进行移除，从而减小打包体积。 有例为证: > 以下示例可在 $1 中进行在线演示 最终打包过程中， sub 没有被引用到，将不会对它进行打包。以下为打包

• 如何提升 webpack 的构建速度

  Published:2019年12月31日 |  at 16:00

  使用 $1 可评估每个 loader/plugin 的执行耗时。 webpack5 内置了关于缓存的插件，可通过以下配置开启。它将 Module 、 Chunk 、 ModuleChunk 等信息序列化到磁盘中，二次构建避免重复编译计算，编译速度得到很大提升。 如对一个 JS 文件配置了 eslint 、 typescript 、 bab

• Code Spliting

  Published:2019年12月31日 |  at 16:00

  Code Spliting 往往归为两个方面: 1. 通过 splitChunksPlugin 提取公共子模块，把第三方模块打包为 vendor.js 。一般被称作 Bundle Spliting 。 1. 通过 import() 动态加载模块，进行按需加载。一般被称作 Code Spliting 。 Code Spliting 可显著提