【宝藏】浏览器端的模块化问题(1)

news/2024/11/8 23:41:42 标签: 前端, webpack

接下来我们一起进入webpack的课程学习中,本课程的特点在于:

  1. 合适的深度webpack 使用层面相对简单,但其原理层面非常复杂。
  2. 合适的广度webpack 生态圈极其繁荣,有海量的第三方库可以融入到 webpack 中。

课程结构大致可以分为以下几个专题:

  • webpack核心功能
  • 常用扩展
  • css工程化
  • js兼容性
  • 性能优化

接下来我们将讲解webpack的核心功能,我们将从浏览器模块化开始展开

浏览器端的模块化

在现代前端开发中,模块化是一个非常重要的概念。然而,浏览器端的模块化面临以下几个主要问题:

  1. 效率问题:精细的模块划分带来了更多的 JS 文件,更多的 JS 文件带来了更多的请求,降低了页面访问效率。
  2. 兼容性问题:浏览器目前仅支持 ES6 的模块化标准,并且还存在兼容性问题。
  3. 工具问题:浏览器不支持 npm 下载的第三方包。

这些问题不仅仅是前端工程化的一个缩影,当开发一个具有规模的程序时,还会遇到许多非业务问题,如执行效率、兼容性、代码的可维护性和可扩展性、团队协作、测试等。这些问题被称为工程问题,它们深刻影响开发进度,如果没有好的工具解决这些问题,开发进度会变得极其缓慢,开发者也会陷入技术的泥潭。

根本原因

为什么在 Node.js 端没有那么明显的问题,而在浏览器端却变得如此严重?

根本原因:在浏览器端,开发时态(devtime)和运行时态(runtime)的侧重点不同。

开发时态(devtime):

  1. 模块划分越细越好。
  2. 支持多种模块化标准。
  3. 支持 npm 或其他包管理器下载的模块。
  4. 能够解决其他工程化的问题。

运行时态(runtime):

  1. 文件越少越好。
  2. 文件体积越小越好。
  3. 代码内容越乱越好(即经过压缩和混淆)。
  4. 所有浏览器都要兼容。
  5. 能够解决其他运行时的问题,主要是执行效率问题。

这种差异在小项目中表现得并不明显,但随着项目规模的增大,问题会越来越突出。如果不解决这些问题,前端项目的规模化将难以实现。

解决办法

由于开发时态和运行时态面临的局面有巨大的差异,因此,我们需要一个工具,这个工具能够让开发者专心在开发时态写代码,然后利用这个工具将开发时态编写的代码转换为运行时态需要的东西。这样的工具称为构建工具

构建工具的工作流程如下:

  1. 开发时态:开发者编写模块化、可维护的代码。
  2. 构建过程:构建工具将开发时态的代码进行处理,包括模块打包、代码压缩、资源优化等。
  3. 运行时态:生成的最终文件在浏览器中高效运行。
常见的构建工具
  1. webpack:目前最流行的前端构建工具之一,支持多种模块化标准,具有强大的插件生态系统。
  2. Grunt:早期的构建工具,基于任务配置,功能较为基础。
  3. Gulp:基于流的构建工具,配置相对简洁,适合中小型项目。
  4. Browserify:将 CommonJS 模块化标准的 Node.js 代码转换为浏览器可运行的代码。
  5. FIS:百度开源的前端构建工具,支持多种模块化标准和优化策略。
  6. 其他:如 Rollup、Parcel 等,各有特色,适用于不同的场景。

通过使用构建工具,如 webpack,我们可以有效地解决浏览器端模块化带来的效率、兼容性和工具问题。构建工具将开发时态的代码转换为运行时态所需的高效、兼容的代码,从而使前端项目的规模化成为可能。


http://www.niftyadmin.cn/n/5744566.html

相关文章

ubuntu离线部署ollama

一、ollama部署 1、ollama官网安装教程,可以参考这个进行部署,下载对应版本 以intel为例下载安装包 curl -L https://ollama.com/download/ollama-linux-amd64.tgz -o ollama-linux-amd64.tgz sudo tar -C /usr -xzf ollama-linux-amd64.tgz2、运行安装…

【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案

作者:CSDN-PleaSure乐事 欢迎大家阅读我的博客 希望大家喜欢 使用环境:WebStorm 目录 问题概述 原因 解决方案 解决方法 潜在问题修改 最终效果呈现 额外内容 管理员界面路由配置 WebStorm背景更换 法一: 法二: 问题概…

esp32学习:利用虫洞ESP32开发板,快速实现无线图传

我们的虫洞开发板,能够完美运行esp who AI代码,所以实现无线图传那是非常容易的,我们先看看examples目录: 里面有比较多的web例程,在这些例程下,稍作修改,就可以快速实现我的图传无线功能&#…

【动态规划-划分型 DP】力扣2369. 检查数组是否存在有效划分

给你一个下标从 0 开始的整数数组 nums ,你必须将数组划分为一个或多个 连续 子数组。 如果获得的这些子数组中每个都能满足下述条件 之一 ,则可以称其为数组的一种 有效 划分: 子数组 恰 由 2 个相等元素组成,例如,…

[产品管理-58]:安索夫矩阵矩阵帮助创业者确定研发出来的产品在市场中定位策略

目录 一、提出背景 二、核心思想与结构 三、应用背景与领域 四、实践案例 安索夫矩阵(Ansoff Matrix),也被称为产品/市场方格或成长矢量矩阵,其应用背景可以从以下几个方面进行详细阐述: 一、提出背景 安索夫矩阵…

大数据Informatica面试题及参考答案

目录 什么是 Informatica?它主要解决什么问题? 什么是 Informatica PowerCenter? Informatica PowerCenter 的主要组成部分有哪些? 解释 Informatica PowerCenter 的主要组件。 Informatica PowerCenter 与 DataStage 有何区别? 解释 Informatica 中的源 (Source) 和…

Python邮差:如何用代码精确投递商品快递费用的密信

目录 一、准备工作 二、编写API请求脚本 三、解析与处理快递费用数据 四、案例应用:模拟电商平台的快递费用计算 五、自动化邮件通知 六、总结 在电子商务的广阔天地里,精确计算并快速传递商品快递费用是一项至关重要的任务。作为Python邮差&#…

高速电机的设计有七个主要问题你知道吗?

在电机技术不断进步的今天,高速电机因其在诸多应用场景中展现出的高效能和紧凑性而备受瞩目。然而,设计一款性能优良的高速电机是一项复杂而富有挑战性的任务。 一、热管理问题 在高速运行条件下,高速电机会产生大量热量,这会直…