目录

前端工程化解决的是什么问题
企业项目面临的问题及解决方案
模块化进化过程
CommonJS
AMD
CMD
ESModule
CommonJS和ESModule规范对比
前端工程化关键技术之npm+webpack原理
npm
Webpack

前端工程化

前端工程化解决的是什么问题？

开发效率、开发规范、访问性能

1. js全局作用域冲突问题
2. 编码规范问题
3. 资源合并和压缩问题
4. 高版本js语法降级

企业项目面临的问题及解决方案

1. 项目量级增加：千行代码=》万级代码 》》》》》》》》》》》》》》模块化（CommonJS和ESM）、npm、webpack
2. 项目数量扩大：几个-> 几千个项目 》》》》》》》》》》》》》》》》研发平台、研发脚手架
3. 项目复杂度增加： web项目 -> PC/H5/小程序/服务端/脚手架 》》》》》工程脚手架（统一解决不同技术栈的工程差异）
4. 团队人数增加：几个 -> 几十、几百个 》》》》》》》》》》》》》》》研发平台、研发脚手架

模块化进化过程

1. 全局function模式，不同功能封装成不同函数：全局命名空间冲突；
2. 全局namespace模式，通过对象封装模块：外部能够修改模块内部数据；
3. IIFE模式，通过自执行函数创建闭包：无法解决模块间互相依赖的问题；
4. IIFE模式增强，支持传入自定义依赖：
   a. 多依赖项传入，代码阅读困难；
   b. 无法支持大规模模块化开发；
   c. 无特定语法支持，代码简陋；
   
   

CommonJS

CommonJS规范介绍

• Node.js默认模块化规范，每个文件就是一个模块，有自己的作用域
• Node中CJS模块加载采用同步加载方式
• 通过 require 加载模块，通过 exports 或 module.exports 输出模块

CommonJS规范特点

• 所有代码都运行在模块作用域，不会污染全局作用域。
• 模块可以多次加载，第一次加载时会运行模块，模块输出结果会被缓存，再次加载时，会从缓存结果中直接读取模块输出结果。
• 模块加载的顺序，按照其在代码中出现的顺序。
• 模块输出的值是值的拷贝，类似IIFE方案中的内部变量。

AMD

• AMD规范采用非同步加载模块，允许指定回调函数
• Node模块通常都位于本地，加载速度快，所以适用于同步加载
• 浏览器环境下，模块需要请求获取，所以适用于异步加载
• require.js是AMD的一个具体实现库

CMD

• CMD整合了CommonJS和AMD的优点，模块加载是异步的
• CMD专门用于浏览器端，sea.js是CMD规范的一个实现
• AMD和CMD最大的问题是没有通过语法升级解决模块化

ESModule

• ESModule设计理念是希望在编译时就确定模块依赖关系及输入输出
• CommonJS和AMD必须在运行时才能确定依赖和输入、输出
• ESM通过 import 加载模块，通过 export 输出模块

CommonJS和ESModule规范对比

• CommonJS模块输出的是值的拷贝，ES6模块输出的是值的引用
• CommonJS 模块是运行时加载，ES6 模块是编译时输出接口
• CommonJS 是单个值导出，ES6 Module可以导出多个值
• CommonJS模块为同步加载，ES Module支持异步加载
• CommonJS 的 this 是当前模块，ES Module的 this 是 undefined
• CommonJS 和 ES Module 的语法不同
  

前端工程化关键技术之npm+webpack原理

### npm

npm初步思路

• 集中管理所有模块，所有模块都上传到仓库（registry）
• 模块内创建package.json标注模块的基本信息
• 通过npm publish发布模块，上传到仓库（registry）
• 通过npm install安装模块，模块安装到node_modules目录

npm介绍

• npm解决的核心问题是模块管理问题
• npm包含cli、模块仓库、官网三大部分
• npm介绍：https://docs.npmjs.com/about-npm

npm原理

• npm init创建模块，npm install安装模块，npm publish发布模块
• npm link本地开发，npm config调整配置，npm run调用scripts
• npm规范：package.json管理模块信息，node_modules保存依赖

npm的局限

• npm只能解决模块的高效管理和获取问题
• npm无法解决性能加载性能问题
• 模块化发明后，制约其广泛应用的因素就是性能问题

Webpack

• 最初的webpack核心解决的问题就是代码合并与拆分
• webpack的核心理念是将资源都视为模块，统一进行打包和处理
• webpack提供了loader和plugins完成功能扩展

webpack核心概念

• entry：入口模块文件路径
• output：输出bundle文件路径
• module：模块，webpack构建对象
• bundle：输出文件，webpack构建产物
• chunk：中间文件，webpack构建的中间产物
• loader：文件转换器
• plugin：插件，执行特定任务

Webpack优化

1、Neumorphism

使用内阴影生成 Soft-UI CSS 样式。

2、Glow Generator

生成纯 CSS 跨浏览器的发光效果。

3、Glassmorphism

构建半透明、模糊的玻璃状背景。

4、Clipy

使用剪辑路径生成复杂形状的对象。

5、uiverse

组件样式集合

6、CSS Filters

生成和预览纯 CSS Instagram 风格的照片滤镜。

7、Cubic-Bezier

预览并生成高级三次贝塞尔动画。

vue

1. Vue3 + ts 干货👍手把手教你封装一个 SvgIcon 组件
   注：通过实践遇到的问题记录在此

1、安装 vite-plugin-svg-icon失败
失败原因：是现有vite版本太低
解决办法：升级vite版本

2、封装组件

现象：defineOption会报错，并且无法使用组件
解决办法：删掉这段代码，然后在index.ts注册组件那里从这样：

修改成这样：

然后就能正常使用组件了。

没有实践：编写自定义 vite 插件，增强 name 字段类型提示 下面的内容。

常用优化手段

优化方向

1. 打包速度：提升开发效率；
2. 打包体积：提高用户体验，降低服务器资源成本；

打包速度优化

1. 优化loader搜索范围
   对于 loader 来说，影响打包效率首当其冲必属 Babel 了。因为 Babel 会将代码转为字符串生成 AST，然后对 AST 继续进行转变最后再生成新的代码，项目越大，转换代码越多，效率就越低。优化正则匹配、使用 include 和 exclude 指定需要处理的文件,忽略不需要处理的文件。
   

2. 多线程/多进程
   受限于 node 是单线程运行的，所以 webpack 在打包的过程中也是单线程的，特别是在执行 loader 的时候，长时间编译的任务很多，这样就会导致等待的情况。我们可以使用一些方法将 loader 的同步执行转换为并行，这样就能充分利用系统资源来提高打包速度了。
   

3. 分包
   在使用 webpack 进行打包时候，对于依赖的第三方库，比如 vue，vuex 等这些不会修改的依赖，我们可以让它和我们自己编写的代码分开打包，这样做的好处是每次更改我本地代码的文件的时候，webpack 只需要打包我项目本身的文件代码，而不会再去编译第三方库，那么第三方库在第一次打包的时候只打包一次，以后只要我们不升级第三方包的时候，那么 webpack 就不会对这些库去打包，这样可以快速提高打包的速度。因此为了解决这个问题，DllPlugin 和 DllReferencePlugin 插件就产生了。这种方式可以极大的减少打包类库的次数，只有当类库更新版本才需要重新打包，并且也实现了将公共代码抽离成单独文件的优化方案。
   

4. 开启缓存
   当设置 cache.type: “filesystem” 时，webpack 会在内部以分层方式启用文件系统缓存和内存缓存，将处理结果结存放到内存中，下次打包直接使用缓存结果而不需要重新打包。
   

5. 打包分析工具
   显示测量打包过程中各个插件和 loader 每一步所消耗的时间,然后让我们可以有针对的分析项目中耗时的模块对其进行处理。。
   

6. ignorePlugin
   这是 webpack 内置插件, 它的作用是忽略第三方包指定目录，让这些指定目录不要被打包进去，防止在 import 或 require 调用时，生成以下正则表达式匹配的模块。

• requestRegExp 匹配（ test ）资源请求路径的正则表达式。
• contextRegExp（ 可选 ）匹配（ test ）资源上下文（ 目录 ）的正则表达式。
  

7. 优化文件路径
   • alias：省下搜索文件的时间，让 webpack 更快找到路径。
   • mainFiles：解析目录时要使用的文件名。
   • extensions：指定需要检查的扩展名，配置之后可以不用在 require 或是 import 的时候加文件扩展名,会依次尝试添加扩展名进行匹配。

打包体积优化

1. 构建体积分析
   npm run build 构建，会默认打开： http://127.0.0.1:8888/，可以看到各个包的体积,分析项目各模块的大小，可以按需优化。
   

2. 项目图片资源优化压缩处理
   对打包后的图片进行压缩和优化，降低图片分辨率，压缩图片体积等。
   

3. 删除无用css样式
   有时候一些项目中可能会存在一些 css 样式被迭代废弃，需要将其删除，可以使用 purgecss-webpack-plugin 插件，该插件可以去除未使用的 css。
   

4. 代码压缩
   对 js 文件进行压缩，从而减小 js 文件的体积，还可以压缩 html 、css 代码。
   

5. 开启Scope Hoisting
   Scope Hoisting 又译作“作用域提升”。只需在配置文件中添加一个新的插件，就可以让 webpack 打包出来的代码文件更小、运行的更快, Scope Hoisting 会分析出模块之间的依赖关系，尽可能的把打包出来的模块合并到一个函数中去，然后适当地重命名一些变量以防止命名冲突。
   

6. 提取公共代码
   将项目中的公共模块提取出来，可以减少代码的冗余度，提高代码的运行效率和页面的加载速度。
   

7. 代码分离
   代码分离能够将工程代码分离到各个文件中，然后按需加载或并行加载这些文件，也用于获取更小的 bundle，以及控制资源加载优先级,在配置文件中配置多入口，输出多个 chunk。
   

8. Tree-shaking
   tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码（ dead-code ）。它依赖于 ES2015 模块语法的 静态结构 特性，例如 import 和 export。

9. CDN加速
   CDN 的全称是 Content Delivery Network，即内容分发网络。CDN 是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN 的关键技术主要有内容存储和分发技术。在项目中以 CDN 的方式加载资源，项目中不需要对资源进行打包，大大减少打包后的文件体积。

10. 生产环境关闭SourceMap
    sourceMap 本质上是一种映射关系，打包出来的 js 文件中的代码可以映射到代码文件的具体位置,这种映射关系会帮助我们直接找到在源代码中的错误。但这样会使项目打包速度减慢，项目体积变大，可以在生产环境关闭 sourceMap

11. 按需加载
    在开发项目的时候，项目中都会存在十几甚至更多的路由页面。如果我们将这些页面全部打包进一个文件的话，虽然将多个请求合并了，但是同样也加载了很多并不需要的代码，耗费了更长的时间。那么为了页面能更快地呈现给用户，我们肯定是希望页面能加载的文件体积越小越好，这时候我们就可以使用按需加载，将每个路由页面单独打包为一个文件。以下是常见的按需加载的场景。

    • 路由组件按需加载
    • 按需加载需引入第三方组件
    • 对于一些插件，如果只是在个别组件中用的到，也可以不要在 main.js 里面引入，而是在组件中按需引入