随笔分类 - 前端工程化
摘要：介入webpack 的打包流程，将某个包给mock 掉 在某些情况下，我们对于包的体积比较敏感，某些第三方的包引用了其他第三方的包，而且第三方的包不支持摇树，我们希望在打包的时候将第三方包所依赖的第三方包给去除掉，因为那部分功能我们并不使用。思路是采用mock 的方式，将第三方的第三方包给去除。 被
阅读全文
摘要：monorepo中如何共享bundle 在monorepo中的多个app,由于它们的npm 包都是在最顶层的workspace 管理安装的，在编译各个子应用的时候，为了节省bundle的大小，如何才能将每个应用中公用的vendor bundle 抽出来。本篇就是基于此对webpack的一些探讨 借助
阅读全文
摘要：Fast 中的 Decorator 在 typesciprt 及 js 中的差异 结论 ts 中约定属性的装饰器语法只有两个参数type PropDecorator<T> = (target: T, key:string):void; 而在 js 中旧的装饰器的语法var type PropDeco
阅读全文
摘要：csp 的条件下对于懒加载的影响 本文介绍在开启CSP的条件下，webpack 的懒加载会受到的影响。 Trusted Types 简单的说就是在使用Trusted Types的条件下，对于 DOM 的一些属性的赋值，必须要经过 policy,否则，浏览器会报错。这个安全机制是为了防止 XSS 攻击
阅读全文
摘要：Webpack 打包实战 本文从一个简单的例子出发，比较一下，我们的代码经过webpack 打包后会变成啥样，带有HMR的情况下，会有什么不同 我们的代码 // index.js import {greeting} from './moduleA' let cleanup=null; functio
阅读全文
摘要：介绍一下webpack hmr相关的API webpack首先将模块变成对象的一个属性，该属性是一个方法，调用它就返回最新的模块。模块的变更就变成了更新这些方法的定义。其次，webpack对于我们代码的import,做了拦截，会变成从它的模块对象里面去读取模块，同时它做了缓存。最后，当模块变化的时候
阅读全文
摘要：single-spa 源码解析 single-spa是一种微前端的实现方案。阿里的qiankun其实是基于这个项目做了二次开发，其实是做了个拓展，提供了html解析与js沙盒两个功能。本文从single-spa的代码实现角度解析一下它的实现原理。 前提假设 single-spa首先要求每个子应用需要
阅读全文
摘要：BaseHref 以及前端路由的问题 Base Href 是什么？ MDN, 说的直白一点就是，这个站点里面所有的访问主站的资源文件，都会在路由前面加上这个base href,包括*js,scss,image,ajax,......**。 如果一个DOM 里面有多个这样的base,只有第一个会起作用
阅读全文
摘要：qiankun 中的文件路径问题 qiankun 中entry 为什么是长这样//hostname/subpath/? import-html-entry中，采用了new url(entry,window.location);, 详细参考 MDN,简单说，它会采取当前的网络协议(http:/http
阅读全文
摘要：如何看待d.ts 这个是typescript的类型文件，tsc 编译器会产生这个文件，我们也可以手动的编写这个文件，这样可以在不重新编写js的前提下，还能享受到ts带来的好处 vscode 编译器的智能提示也是依靠这个文件 vscode 的只能提示是如何找到类型信息的 首先ts工程下的所有d.ts都
阅读全文
摘要：# 手撸一个js 的npm 包 ## 打包后的格式 ### commonjs vs esmodule vs AMD vs IIFE vs UMD - commonjs 早期社区js模块化的一种方式，适用于nodejs端，为了能够在浏览器中运行，可以借助[Browserify](https://bro
阅读全文
摘要：微前端中路由的跳转 针对基座与子应用都是Angular 的场景，实现应用间的路由跳转 基座往子应用的跳转 首先在路由中要定义一个空组件来承接子路由，可以在基座路由表中添加如下路由 { path: 'subapp', children: [ { path: '**', component: Empty
阅读全文
摘要：ng-package 文件的作用 什么是ng-package,它有什么作用 这个文件告诉Angular,这个目录里面的是一个Angular library。编译后该library 将会只有一个文件生成(fesmxx文件夹里面)。也就是说将这个文件夹下面的library打包成一个文件输出。 它与pac
阅读全文
