@Secretmm 2020-10-21T01:19:52.000000Z 字数 5712 阅读 501

前端工程化

p6必备

补一下自己简历的坑，这里可以忽略

如何做到资源加载优化

后台管理系统第一版的时候没有使用vue-cli构建项目，webpack是自己配置的，主要做了三件事；
第一点：与后端完全独立，重构前的版本，开发环境的js挂载在后端的一个php界面上，要访问后端给的地址进行开发；重构后，通过package.json配置端口号，项目里新建一个index.html作为开发环境的挂载界面，做到开发环境与后端完全分离；
第二点：将静态资源整合进项目，重构前，图片和css都是独立于项目之外的，是放在服务器专门存放的资源目录里面；重构后，在项目中新建css文件夹存放css，新建assets文件夹存放图片，方便维护。
第三点：解决打包文件体积过大的问题，重构前，代码打包出一个js文件；重构后，实现代码分割，将打包文件分割为三个js文件，分别是vendor.js，app.js,mainfest.js, vendor.js里是第三方依赖模块单独打包出来的js，mainfest.js里是提取了所有入口节点的公共代码，另外给所有的打包出来的js和css加上hash值，避免由于同名导致页面更新不及时的问题。

对应的webpack配置：
1.css:安装依赖 extract-text-webpack-plugin，在webpck中请求该依赖，new ExtractTextPlugin({
filename: 'css/user.[contenthash:6].css'
})
2.图片加载：安装依赖url-loader,参数limit,代表图片大小小于该限制时，会自动转成base64，参数name，指定了打包根目录下的图片路径名，name: 'image/[name].[hash：6].[ext]'，加上6位hash值，避免图片重名问题
3.webpack.optimize.CommonsChunkPlugin 单独打包出另外两个js。name为js的名字，minchuncks,chuncks为对应的配置

slug-ui

配置

按需引入

https://juejin.im/post/5de9cc25f265da33b5072a2e

每个组件单独打包，以组件为单位生成多个模块，也就是多个js文件。使用时引入哪个组件就加载对应的文件。
前提是安装 babel-plugin-component插件。实现起来也不复杂(多入口打包，生成多个模块)

使用babel-plugin-component做按需引入的原理就是路径替换,以组件为单位进行拆分,组件和样式分开

message是如何实现挂载的【vue， react】

何谓高阶组件HOC

高阶组件是参数为组件，返回值为新组件的函数,HOC不会修改传入的组件，也不会使用继承来复制其行为。相反，HOC 通过将组件包装在容器组件中来组成新组件。HOC是纯函数，没有副作用。被包装组件接收来自容器组件的所有 prop，同时也接收一个新的用于 render 的 data prop。HOC不需要关心数据的使用方式或原因，而被包装组件也不需要关心数据是怎么来的。

TypeScript

超集：合法的js一定是合法的ts，ts对js做了类型检查之类扩展；
泛型：是指在定义函数、接口或类的时候，不预先指定具体的类型，在使用的时候再指定类型的一种特性。
优点： 1.函数参数，接口的定义更加清晰，增加了代码的可读性和可维护性；2.不显示的类型可以做出类型推论；3.即使ts编译报错，也可以生成js文件；4.类型提示；5.兼容不是ts写的第三方库
缺点：学习成本，开发成本

ts中public，private，protected

public哪里都能访问【实例，自己，子类】
private自己能访问
protected 自己和子类访问

ts interface 继承 type 继承

ts有哪些类型es6没有的

PWA(渐进式web应用)

概述

PWA应用同时具有web应用和原生应用的特性。它应该具有以下特点:
Discoverable, 内容可以通过搜索引擎发现。
Installable, 可以出现在设备的主屏幕。
Linkable, 你可以简单地通过一个URL来分享它。
Network independent, 它可以在离线状态或者是在网速很差的情况下运行。
Progressive, 它在老版本的浏览器仍旧可以使用，在新版本的浏览器上可以使用全部功能。
Re-engageable, 无论何时有新的内容它都可以发送通知。
Responsive, 它在任何具有屏幕和浏览器的设备上可以正常使用——包括手机，平板电脑，笔记本，电视，冰箱，等。
Safe, 在你和应用之间的连接是安全的，可以阻止第三方访问你的敏感数据。

重要技术

Service workers：充当Web应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理。它能够创建有效的离线体验，拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。它还允许访问推送通知和后台同步API。
Service worker运行在worker上下文，不能访问DOM。相对于主JavaScript线程，它运行在其他线程中，不会造成阻塞。只能由HTTPS承载。
Manifest、Add to Home Screen：manifest的目的是将Web应用程序安装到设备的主屏幕，为用户提供更快的访问和更丰富的体验。Add to Home Screen（简称A2HS）是现代智能手机浏览器中的一项功能，使开发人员可以轻松便捷地将自己喜欢的Web应用程序（或网站）的快捷方式添加到主屏幕中，以便他们随后可以通过单点访问它。要将应用添加到主屏幕，需要满足以下条件：
应用通过HTTPs提供服务—Web正朝着更加安全的方向发展，许多现代web技术（包括A2HS）将仅工作在安全的环境中；
从HTML头链接具有正确字段的manifest文件；
有合适的图标可显示在主屏幕上；
Chrome浏览器还要求该应用程序注册一个service worker（例如，使其在离线状态下可以运行）。
Notifications API：允许网页控制向最终用户显示系统通知 —这些都在顶级浏览上下文视口之外，因此即使用户已经切换标签页或移动到不同的应用程序，也可以显示。

web性能优化

开启浏览器缓存
非核心资源cdn分发
图片压缩，webp，图片懒加载
iconfont
资源压缩js,css的gzip
非核心资源异步加载
预加载
使用外链样式而非内联样式
loading或者骨架屏
动画
异步组件

web性能优化.png

webpack

loader和plugin

loader让webpack能够处理非js文件，是文件加载器/转换器，能够加载资源文件，比较单纯的文件转换过程；
plugin是一个扩展器，它丰富了webpack本身，针对是loader结束后，webpack打包的整个过程，基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务，比如资源管理、bundle文件优化、合并压缩等操作

import

babel/babel-polyfill/babel-runtime作用

babel：负责语法转换，比如将ES6的语法转换成ES5。但不转换新的API。例如，Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法。
babel-polyfill：负责转换上述新对象和一些新方法，转换会用到一些工具函数，可能出现工具函数代码的大量重复。
babel-runtime：将polyfill会用到的工具函数抽离，在转换的时候调用，避免了工具函数代码的重复。同时用独立的全局命名空间为npm包。开发者与使用者隔离全局命名空间，解决了全局命名空间污染的问题。

babel6和babel7的区别

版本、依赖包的各种符号

版本号

major、minor、patch、premajor、preminor、prepatch、prerelease
[major.minor.patch-release]:[主版本号.副版本号.修复版本号-预发布版本号]
升级major：不兼容的api修改
升级minor：向下兼容的功能性新增
升级patch：向下兼容的问题修正

以下用代码形式表示：
1.npm version major

if(!release) {
    major = major + 1;
    minor = 0;
    patch = 0;
    //3.0.0 => 4.0.0
    //3.1.2 => 4.0.0
}
if(release) {
    delete release;
    if(minor !== 0 || patch !== 0) {
        major = major + 1;
        minor = 0;
        patch = 0;
    }
    //3.0.0-0 => 3.0.0;
    //3.0.0-1 => 3.0.0;
    //3.0.1-0 => 4.0.0;
    //3.0.1-1 => 4.0.0;
    //3.1.1-1 => 4.0.0;
}

2.npm version minor

if(!release) {
    minor = minor + 1;
    patch = 0;
    //3.0.0 => 3.1.0
    //3.1.2 => 3.2.0
}
if(release) {
    delete release;
    if (patch !== 0) {
        minor = minor + 1；
        patch = 0；
    }
    //3.0.0-0 => 3.0.0
    //3.0.0-1 => 3.0.0
    //3.1.0-0 => 3.1.0
    //3.1.0-1 => 3.1.0
    //3.1.1-0 => 3.2.0
}

3.npm version patch

if(!release) {
    patch = patch + 1;
    //3.0.0 => 3.0.1
    //3.0.1 => 3.0.2
}
if(release) {
    delete release;
    //3.0.0-0 => 3.0.0
    //3.0.0-1 => 3.0.0
    //3.1.1-1 => 3.1.1
    //3.0.1-1 => 3.0.1
}

4.npm version premajor

major = major + 1;
minor = 0;
patch = 0;
release = 0;
//3.0.0 => 4.0.0-0
//3.1.0 => 4.0.0-0
//3.1.2 => 4.0.0-0
//3.1.2-1 => 4.0.0-0

5.npm version preminor

minor = minor + 1;
patch = 0;
release = 0;
//3.0.0 => 3.1.0-0
//3.0.1 => 3.1.0-0
//3.2.1 => 3.3.0-0
//3.2.1-1 => 3.3.0-0

6.npm version prepatch

patch = patch + 1;
release = 0;
//3.0.0 => 3.0.1-0
//3.0.1 => 3.0.2-0
//3.2.1 => 3.2.2-0
//3.2.1-1 => 3.2.2-0

7.npm version prerelease

if(release) {
    release = release + 1;
    //3.0.0-0 => 3.0.0-1
    //3.1.0-1 => 3.1.0-2;
}
if(!release) {
    patch = patch + 1;
    release = 0;
    //等同于 npm version prepatch
}

依赖包的符号

版本号~和^的区别：
~会匹配最近的修复版本依赖包，比如~1.2.3会匹配所有1.2.x版本，但是不包括1.3.0
^会匹配最新的副版本依赖包，比如^1.2.3会匹配所有1.x.x的包，包括1.3.0，但是不包括2.0.0

`dependencies`与`devDependencies`

devDependencies 里面的插件只用于开发环境，不用于生产环境，而dependencies是需要发布到生产环境的。
比如我们写一个项目要依赖于jQuery，没有这个包的依赖运行就会报错，这时候就把这个依赖写入dependencies ；
而我们使用的一些构建工具比如glup、webpack,babel这些只是在开发中使用的包，上线以后就和他们没关系了，所以将它写入devDependencies。

package.json

https://juejin.im/post/5d561b78e51d4562061159fa
主要用来定义项目中需要依赖的包以及相关执行命令与附加信息。

package-lock.json

在npm install时候生成该文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号。
^:放在版本号之前，表示向后兼容依赖，就是在大版本号不变的情况下下载最新版的包。项目中引入的包版本号之前经常会加^号，每次在执行npm install之后下载的包都会发生变化。为了系统的稳定性考虑，每次执行完npm install之后会对应生成package-lock.json文件，该文件记录了上一次安装的具体的版本号，这样就提供了一个参考，在出现版本兼容性问题的时候，就可以参考这个文件来修改版本号即可。

yarn.lock

Yarn是一个快速可靠安全的依赖管理工具。
主要的三个特点：
极其快速，Yarn会缓存它下载的每个包，所以无需重复下载。它还能并行化操作以最大化资源利用率。
特别安全，Yarn会在每个安装包被执行前校验其完整性
超级可靠， Yarn使用格式详尽而又简洁的lockfile文件和确定性算法来安装依赖，能够保证在一个系统上的运行的安装过程也会以同样的方式运行在其他系统上

yarn.lock的作用

Yarn使用确定性算法，在将文件放置到需要的位置之前构建整个依赖关系树。安装过程中重要信息存储到yarn.lock文件中，以便可以在安装依赖关系的每个系统之间共享！此文件包含有关已安装的每个依赖项的确切版本的信息以及代码的校验和以确保代码完全相同。
此文件会锁定你安装的每个依赖项的版本，这可以确保你不会意外获得不良依赖；
并且会避免由于开发人员意外更改或则更新版本，而导致糟糕的情况！

使用npm安装生成了一个package-lock.json文件来注册所有的安装的依赖. 然而它不能保证每次npm install都会安装里面的指定的包的版本，但是yarn.lock可以。