elpis 前端工程化学习笔记

我以往对工程化的理解全赖于这篇文章浅谈前端工程化在很久前看到这篇文章奠定了我前端工程的一些概念（文章很久之前，但是到现在看内容也不落后）

工程化原理理解

这是根据Kimi汇总的一些工程化原理
模块化
构建原理
自动化
依赖管理
代码复用
性能优化
构建优化
代码规范和质量保证
配置管理
团队协作

大致描述的一些模块我认为平时开发工作中也是经常接触的，特别是代码复用和代码规范。

直到现在学习了一下【抖音"哲玄前端"《大前端全栈实践》】，每行代码重新打一遍有了些新的理解。

目前在学习过程中主要体现工程化的有几个核心模块，解析编译、模块分包、压缩优化，这些是前端开发工程师处理代码开发外打交道比较多的模块。这些操作在日常中常常通过一些打包工具完成，如webpack、vite等。

热更新原理

监听能力、通知能力 webpack-dev-middleware、webpack-hot-middleware 文件改变后监听文件改变，通知开发服务器重新启动

js 复制代码

// webpack.dev.js

Object.keys(baseConfig.entry).forEach((v) => {
  // 第三方包不作为 hmr 的入口
  if (v !== "vendor") {
    baseConfig.entry[v] = [
      // 主入口文件
      baseConfig.entry[v],
      // hmr 更新入口，官方指定的 hmr 路径
      `webpack-hot-middleware/client?path=http://${DEV_SERVER_CONFIG.HOST}:${DEV_SERVER_CONFIG.PORT}/${DEV_SERVER_CONFIG.HMR_PATH}&timeout=${DEV_SERVER_CONFIG.TIMEOUT}`,
    ];
  }
});

js 复制代码

// webpack.dev.js
plugins: [
    // HotModuleReplacementPlugin 用于实现热模块替换（Hot Module Replacement，简称 HMR）
    // 模块热替换允许在应用程序运行时替换模块
    // 极大的提升开发效率，因为能让应用程序一直保持运行状态
    new webpack.HotModuleReplacementPlugin({
      multiStep: false,
    }),
  ],

分包策略核心

目的：把改动和引用频率不一样的 js 区分出来，以达到更好利用浏览器缓存的效果

实现：通常把 js 文件打包成3种类型

vendor ：第三方库, 基本不会改动，除非依赖版本升级
common ：业务组件代码的公共部份抽取出来，改动较小
entry.{page}: 不用页面 entry 里的业务组件代码的差异部份，会经常改动（基于elpis）

进行按需加载，减少初始加载时间，合理利用缓存

示例代码

javascript 复制代码

splitChunks: {
      chunks: "all", // 对同步和异步模块都进行分割
      maxAsyncRequests: 10, // 每次异步加载的最大并行请求数
      maxInitialRequests: 10, // 入口点的最大并行请求数
      cacheGroups: {
        vender: {
          // 第三方依赖库
          test: /[\\/]node_modules[\\/]/, // 打包 node_module 中的文件
          name: "vender", // 模块名称
          priority: 20, // 优先级，值越大，优先级越高
          enforce: true, // 强制执行
          reuseExistingChunk: true, // 复用已存在的模块
        },
        common: {
          // 公共模块
          name: "common", // 模块名称
          minChunks: 2, // 被2处引用即被归为公共模块
          minSize: 1, // 最小分割文件大小
          priority: 10, // 优先级，值越大，优先级越高
          reuseExistingChunk: true, // 复用已存在的模块
        },
      },
    },

其他知识点记录

单页和多页打包区别

单页应用SPA

webpack 复制代码

entry: './src/index.js',

多页应用MPA

webpack 复制代码

  entry: {
    main: './src/index.js',
    list: './src/list.js',
  },