Tag: frontend-engineering
All the articles with the tag "frontend-engineering".
Redux TechStack
Published: at 16:00+ combineReduers + bindActionCreator + connect + Provider + mapStateToProps + mapDispatchToProps + redux + react-redux + redux-thunk + redux-saga + redux-actions + resele
style
Published: at 16:00在打包器,比如 webpack 中,需要借用 loader 将非 JS 资源转化成可识别为 Javascript 的 module。 在 webpack 中,处理 css 稍微比较费劲,需要借用两个 loader 来做成这件事情: 1. $1: 处理 CSS 中的 url 与 @import ,并将其作为模块引入 1. $1: 将样式注入
Tree Shaking
Published: at 16:00class 是否可以 Tree Shaking + CONCATENATED MODULE Tree Shaking 指基于 ES Module 进行静态分析,通过 AST 将用不到的函数进行移除,从而减小打包体积。 有例为证: > 以下示例可在 $1 中进行在线演示 最终打包过程中, sub 没有被引用到,将不会对它进行打包。以下为打包
如何提升 webpack 的构建速度
Published: at 16:00使用 $1 可评估每个 loader/plugin 的执行耗时。 webpack5 内置了关于缓存的插件,可通过以下配置开启。它将 Module 、 Chunk 、 ModuleChunk 等信息序列化到磁盘中,二次构建避免重复编译计算,编译速度得到很大提升。 如对一个 JS 文件配置了 eslint 、 typescript 、 bab
Code Spliting
Published: at 16:00Code Spliting 往往归为两个方面: 1. 通过 splitChunksPlugin 提取公共子模块,把第三方模块打包为 vendor.js 。一般被称作 Bundle Spliting 。 1. 通过 import() 动态加载模块,进行按需加载。一般被称作 Code Spliting 。 Code Spliting 可显著提