项目描述

git repository：https://gitee.com/larvide/dailyCoding.git

• 用来记录新技术学习
• 源码阅读
• markdown参考
  • markdown基本语法
  • markdown表情符号

webpack@5

配置以及调优

• HMR

  mode为development时会和.browserslistrc冲突，此时设置target: 'web' js模块热更新：

  if(module.hot){
      module.hot.accept(['./foo.js', './utils.js', 启用热更新的模块...], ()=>{
          console.log('更新完成回调')
      })
  }
  

• asset

  asset资源模块允许使用资源文件（字体，图标等）而无需配置额外 loader

  • asset/resource 将资源分割为单独的文件，并导出 url，类似之前的 file-loader 的功能.
  • asset/inline 将资源导出为 dataUrl 的形式，类似之前的 url-loader 的小于 limit 参数时功能.
  • asset/source 将资源导出为源码（source code）. 类似的 raw-loader 功能.
  • asset 会根据文件大小来选择使用哪种类型，当文件小于 8 KB（默认） 的时候会使用 asset/inline，否则会使用 asset/resource

• browserslist

  根据平台占有率来让babel、postcss等执行兼容哪些平台

    > 0.25%
    last 2 version
    not dead
  

• postcss

  postcss工具集使用文档 postcss-loader使用文档

• babel in webpack

  通过使用@babel/preset-env预设来避免手动安装一系列插件

• polyfill

  在webpack@5版本中，要使用polyfill需要手动引入。

    import "core-js/stable";
    import "regenerator-runtime";
  

• external

• source-map

  将打包前后的代码进行映射，方便调试定位，在webpack@5中由 devtool 选项来控制

• resolve

  设置模块解析

  resolve: {
      extensions: ['.jsx', '.js', '.css', '.less', '.ts', '.tsx', '...'], //顺序优先级， ... 扩展运算符代表默认配置
      modules: [resolveApp('src'), 'node_modules'], //优先 src 目录下查找需要解析的文件，会大大节省查找时间
      alias: {
          '~': resolveApp('src'),
          '@': resolveApp('src'),
          'components': resolveApp('src/components')
      }
  }
  

• splitchunks

  react代码分割和动态加载组件 使用 splitchunks 来拆分代码块，配合动态加载+preload和prefetch，优化页面性能 runtimeChunk用于额外生成模块导入导出处理的文件，用于长效缓存

• terserpugin

  使用TerserWebpackPlugin压缩js代码

• treeShaking

  • usedExports

    标记未使用的代码(unused harmony exports...)，结合minimizer-->terserWebpackPlugin实现tree shaking

  • sideEffects

    在package.json中设置"sideEffects": false，去除所有模块副作用，包括整个css文件 可以设置为数组精准管理文件或单独在webpack config中的css规则设置，避免css被摇掉

  • PurgeCSSPlugin

    PurgeCSSPlugin 用于css treeShaking，注意⚠️在本项目中当css选择器名称小于四个字母时不生效，其他地方不清楚

• compression

  使用CompressionPlugin压缩资源以供http传输压缩资源（Content-Encoding）

• plugin

  Compiler模块是 webpack 的主要引擎，扩展自 Tapable 类，用来注册和调用插件。

• loader

  • 作用：处理/编译转换资源文件，分为以下3类：
    1. 编译转换类 将资源模块转换为js模块，例如：css-loader，babel-loader
    2. 文件操作类 将资源模块拷贝到输出目录，导出访问目录的路径，例如：file-loader
    3. 代码检查类 统一代码风格，提高代码质量，例如：eslint-loader
  • 开发一个loader: loader在处理资源时，类似于使用管道操作，在这个过程中可以链式使用多个loader，之后处理结果必须是js代码。

tapable

Webpack是使用tapable的事件流来驱动编译，在编译过程中把不同的plugin串联起来，其中最为核心的是负责本次编译任务的compiler和负责创建bundles的completion，这两个都是tapable的实例对象。

tapable的核心工作流程：

• 实例化hook注册事件监听
• 通过hook触发事件监听
• 执行懒编译生成的代码

hook本质是tapable的实例对象，hook分为同步和异步。hook的执行特点：

• hook:普通钩子，监听相互独立不影响
• BailHook:熔断钩子，某个监听返回非undefined时，后续逻辑不执行
• WaterfallHook:瀑布钩子，上一个监听返回的值可以传给下一个监听
• LoopHook:循环钩子，当前不返回false一直执行

commonJS模块打包

ESM模块打包

dataStructures

• 栈
• 链表
• 队列
• 散列表

ES6

ES6+学习

exsample-cli

脚手架

FunctionalProgramming

函数式编程思想学习

gulp

gulp学习

mobx-tutorial

mobx@6

react-ssr

尝试自己搭个react服务端渲染

rollup

rollup学习

source-load

性能优化测试--资源加载

TS

typescript学习