elpis 一个企业级应用 —— webpack(工程化)篇

zYear
186 阅读5分钟

工程化

为什么要进行工程化

在日常的代码开发中，我们会运用第三方框架去开发代码。此类方法虽说可以加快程序员开发的速度，但浏览器无法对我们开发的代码进行解析，从而我们便需要将此类代码转换为浏览器能够解析的代码类型。但由于在开发中我们需要频繁的对代码进行更改，如果每一次都需要我们进行手动转换代码类型则会浪费大量的时间和精力，并且不同的浏览器会存在兼容性的问题等问题，这些非开发的问题，对于程序员来说只是单纯的“体力活”。因此我们便需要一种方式来替程序员去处理这部分的事情，这便是为什么需要工程化的原因。

webpack 总结

工程化的工具有很多 vite、webpack、rolldown等，但工具始终只是工具，掌握工程化的核心理念才是重中之重。本文只是单一对于 webpack 的总结，但其中的思路可以运用至其他的工程工具之中。

打包引擎解析:

找到入口 => 解析依赖 => 解析编译 => 分包 => 压缩优化 => 输出目标产物 => koa 渲染目标产物 => 输出页面

image.png

基础打包配置思路(进行基础配置)

    1. 获取所有 app/pages 下的所有入口文件与构造最终要渲染的页面文件 (入口文件名字约定为 entry.xx.js)
    1. entry: 配置打包输入入口
    1. module: 模块解析配置
    • .vue: vue-loader
    • .js: babel-loader
    • .(png|jpg|jepg|gif): url-loader
    • .css: style-loader, css-loader
    • .less: style-loader, css-loader, less-loader
    • .(eot|svg|ttf|woff|woff2): file-loader
    1. output: 不对产物的输出路径做配置，该路径由生产或开发环境各自进行配置
    1. resolve: 配置 webpack 如何找到并解析相应的文件
    1. plugin: webpack 插件
    • vue-loader: 解析 .vue 文件的必需插件
    • webpack.ProvidePlugin: 将第三方库的内容暴露到 window.context 下
    • webpack.DefinePlugin: 定义一些全局的常量
    • html-webpack-plugin: 将文件构建为可渲染的页面
    1. optimization: 分包
    • 将 js 文件分为3种类型的文件(根据代码的改动和使用频率进行分包)
    • 目的: 如果一个文件被多个模块运用到，则可以运用浏览器的缓存机制，从而提高页面速度
      • vendor(第三方插件的包)
      • common(公共功能的包)
      • default(正常相应页面相应的包)

生产环境下的打包思路(主要为压缩大小与加快速度)

    1. 将生产环境的打包配置与基础打包配置融合
    1. 定义生产环境的打包输出位置
    1. 提升打包速度，以及将一些用于调试的代码进行屏蔽
    1. 运用到的插件:
    • happyPack: 可以将 webpack 的文件解析任务分为多个子线程处理，提升打包速度 ==> happyPack 以停止维护，可用 thread-loader 替代
    • mini-css-extract-plugin: 将 css 文件提取到单独的文件，为每一个包含 css 的 js 文件创建一个 css 文件
    • clean-webpack-plugin: 清空 webpack 目录下的所有文件，以及未使用的 webpack 资源
    • css-minimizer-webpack-plugin: 压缩 css 资源
    • html-webpack-inject-attributes-plugin: 浏览器在请求资源时，不发送用户的身份凭证
    • terser-webpack-plugin: 使用 terser-webpack-plugin 中的并发和缓存来提升压缩阶段的性能

开发环境的打包思路

image.png

整体打包思路
  • 将 tpl 类模板文件进行打包落地，而 js、css类则存入 devServer 服务器中
  • 在页面渲染时，页面端从服务器引入相应的资源进行渲染
  • devMiddleware 监控本地文件是否改变，当改变时重新进行解析打包
  • hotMiddleware 对业务文件(js、css等)进行监视，如果改变则通知浏览器
  • 浏览器重新渲染页面，然后从服务器获取最新的文件资源
热更新(HMR)

通过对本地文件的监控，使得页面在开发时，能因为一些代码的修改而相应的更新页面。

相应的功能模块
  • elpis 的热更新框架选用 express
  • 将需要更新的文件通过
    • devServer: 负责启动服务与一些前置配置
      • HOST: 服务的地址
      • PORT: 服务的端口
      • HMR_PATH: 官方定义的 HMR 路径
      • TIMEOUT: 超时时间
    • express 通过 express 启动另一个服务来存放文件与资源
    • webpack-dev-middleware(监听能力): 时刻监听本地业务代码文件是否有改变
      • 将过滤后的文件写入指定的磁盘位置 // 将 .tpl 的文件存储在磁盘，其他文件则放置在服务上
      • 将 devMiddleware 绑定到该路径
    • webpack-hot-middleware(通知能力): 监听资源文件有无更新，然后通知浏览器请求新的 js、css文件
      • 当代码发生变化后，将变化后的代码资源文件重新注入页面
  • devServer 负责一些前期的配置的设置，而 devMiddleware 负责对本地文件的监控，hotMiddleware 负责对文件实施热更新
方便调试代码
  • source-map 开发工具: 让代码呈现映射关系，便于开发调试
解决跨域的问题
  • 在 headers 请求头中添加 Access-Control-Allow-Origin

总结

在工程化部分，首先我们需要确定属于自己项目的产物需求，不同的运行环境我们需要进行不同的配置，从而提高效率，在开发环境中，由于项目不需要真正的运行上线，因此我们不需要考虑到相应的性能问题，而是需要考虑如何更好的方便程序员去编写代码，热更新以及一些跨域问题的处理都是开发阶段需要考虑的。在生产环境中由于我们的项目需要考虑上线，因此如何减少文件的大小与如何考虑文件的复用性，是在生产阶段所需要考虑的。

avatar
文章
阅读
粉丝