my-blog
my-blog copied to clipboard
luoxue-victor
公众号【前端技匠】作者
## webpack编译优化 本章内容 1. cache-loader 2. DllPlugin 3. threadLoader ### cache-loader `cache-loader` 主要是将打包好的文件缓存在硬盘的一个目录里，一般存在 `node_modules/.cache` 下，当你再次 `build` 的时候如果此文件没有修改就会从缓存中读取已经编译过的文件，只有有改动的才会被编译，这样就大大降低了编译的时间。尤其是项目越大时越明显。 此项目使用前后数据对比 3342ms --> 2432ms 效果还是比较明显 这里只对 babel 加入了 cache-loader，因为我们的 ts/js 都是由 babel 进行编译的，不需要对...
## 一个组件应该有以下特征： 1. 可组合（Composeable）：一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件，那么说父组件拥有（own）它创建的子组件，通过这个特性，一个复杂的 UI 可以拆分成多个简单的 UI 组件； 2. 可重用（Reusable）：每个组件都是具有独立功能的，它可以被使用在多个 UI 场景； 3. 可维护（Maintainable）：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护； 4. 可测试（Testable）：因为每个组件都是独立的，那么对于各个组件分别测试显然要比对于整个 UI 进行测试容易的多。 ## 开发一个组件需要的考虑 1. 规范性：是否符合一个常规组件的使用方法，目录、命名、格式是否规范 2. 质量可靠性：是否经得住长时间考验 3. 可扩展性：是否可以容易快速扩展新的功能 4. 兼容性：是否兼容了各个平台 5. 易用性：是否简单易用，将学习成本降到最低...
作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的。
可选链说明 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/%E5%8F%AF%E9%80%89%E9%93%BE babel 地址 https://www.babeljs.cn/docs/babel-plugin-proposal-optional-chaining ## 手写一个loader，实现可选链 本章内容 1. 什么是 webpack loader 2. 可选链介绍 3. loader 实现可选链 ### 什么是 webpack loader `webpack loader` 是 `webpack` 为了处理各种类型文件的一个中间层，`webpack` 本质上就是一个 `node` 模块，它不能处理 `js`...
## 课题 1: js 是如何引用 css 的？ > 打包 src 下的 index.js index.css 到 dist/bundle.js css 并不能被 webpack 识别，但是可以通过 loader 来将 css 转换成 js 可以分为以下几步实现 1. dev 打包出未压缩文件 2. build...
## 课题 2：搭建可插拔的开发环境跟生产环境 本章提要： - 需要哪些包？ - 构建开发环境（devServer） - 构建生产环境 - 自动生成 html - 提取 css ### 需要哪些包？ package.json ```json { "scripts": { "dev": "cross-env NODE_ENV=development node build/dev.js", "build": "cross-env...
本章提要： - 配置 babel - 使用 babel 配置 ts - ts 静态类型检查 - 友好错误提示插件 - 配置样式，style，css、less、sass、postcss 等 - 编译前后 css 对比 - postcss 配置 - 配置 autoprefixer - 开启 source...
本章讲解 1. 分离 Manifest 2. Code Splitting（代码分割） 3. Bundle Splitting（打包分割） 4. Tree Shaking（删除死代码） 5. 开启 gzip ### 分离 Manifest ```js module.exports = (config, resolve) => { return () => {...
1. 原型链继承的缺点 一是字面量重写原型会中断关系，使用引用类型的原型，并且子类型还无法给超类型传递参数。 2. 借用构造函数（类式继承） 借用构造函数虽然解决了刚才两种问题，但没有原型，则复用无从谈起。所以我们需要原型链+借用构造函数的模式，这种模式称为组合继承 3. 组合式继承 组合式继承是比较常用的一种继承方法，其背后的思路是 使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数复用，又保证每个实例都有它自己的属性。 For detail：https://segmentfault.com/a/1190000002440502