首页  思维导图  详情

面试知识点梳理

2020-06-05 14:16:30   0  举报





AI智能生成

前端面试内容梳理

前端

面试

作者其他创作

大纲/内容

CSS

清除浮动

1、添加新元素

2、使用伪元素

3、触发父元素BFC

盒模型

flex

容器属性

flex-direction flex-wrap flex-flow justify-content align-items align-content

项目属性

order flex-grow flex-shrink flex-basis flex align-self

BFC

一列定宽一列自适应

作用域作用域链

this

闭包

变量提升

Promise

EventLoop

浏览器

vue全家桶

webpack

几个常见的loader

<ul><li>babel-loader：把 ES6 转换成 ES5</li></ul>

图片/字体文件处理

<ul><li>file-loader</li></ul>

<ul><li>url-loader</li></ul>

<ul><li>source-map-loader</li></ul>

处理样式文件

<ul><li>style-loader</li></ul>

<ul><li>css-loader</li></ul>

<ul><li>postcss-loader</li></ul>

<ul><li>sass-loader</li></ul>

<ul><li>less-loader</li></ul>

几个常见的plugin

<ul><li>html-webpack-plugin</li></ul>

<ul><li>DllPlugin</li></ul>

<ul><li>DLLReferencePlugin</li></ul>

<ul><li>SplitChunksPlugin</li></ul>

<ul><li>HotModuleReplacementPlugin</li></ul>

<ul><li>DefinePlugin</li></ul>

<ul><li>clean-webpack-plugin</li></ul>

处理CSS

<ul><li> mini-css-extract-plugin</li></ul>

<ul><li>optimize-css-assets-webpack-plugin</li></ul>

进阶

按需加载

import()

import() 语法，需要 @babel/plugin-syntax-dynamic-import 的插件支持， 但是因为当前 @babel/preset-env 预设中已经包含了 @babel/plugin-syntax-dynamic-import，因此我们不需要再单独安装和配置。

webpack 遇到 import(****) 这样的语法的时候，会这样处理：

<ul><li>以**** 为入口新生成一个 Chunk</li><li>当代码执行到 import 所在的语句时，才会加载该 Chunk 所对应的文件（如这里的1.bundle.8bf4dc.js）</li></ul>

热更新

<ol><li>首先配置 devServer 的 hot 为 true</li></ol>

2. 并且在 plugins 中增加  new webpack.HotModuleReplacementPlugin()

3. 在入口文件中新增

此时，再修改代码，不会造成整个页面的刷新

多页应用打包

配置

配置chunks 参数，指定html引入的js文件

查看 index.html 和 login.html 会发现，都同时引入了 index.f7d21a.js 和 login.f7d21a.js，通常这不是我们想要的， 我们希望，index.html 中只引入 index.f7d21a.js，login.html 只引入 login.f7d21a.js HtmlWebpackPlugin 提供了一个 chunks 的参数，可以接受一个数组，配置此参数仅会将数组中指定的js引入到html文件中， 此外，如果你需要引入多个JS文件，仅有少数不想引入，还可以指定 excludeChunks 参数，它接受一个数组

resolve 配置

resolve 配置 webpack 如何寻找模块所对应的文件。 webpack 内置 JavaScript 模块化语法解析功能，默认会采用模块化标准里约定好的规则去寻找， 但你可以根据自己的需要修改默认的规则。

配置项

modules

resolve.modules 配置 webpack 去哪些目录下寻找第三方模块，默认情况下，只会去 node_modules 下寻找， 如果你我们项目中某个文件夹下的模块经常被导入，不希望写很长的路径，那么就可以通过配置 resolve.modules 来简化

alias

resolve.alias 配置项通过别名把原导入路径映射成一个新的导入路径

extensions

用途

适配多端的项目

缺省文件后缀

在导入语句没带文件后缀时，会自动带上extensions 中配置的后缀后，去尝试访问文件是否存在， 因此要将高频的后缀放在前面，并且数组不要太长，减少尝试次数。 如果没有配置 extensions，默认只会找对对应的js文件

enforceExtension

如果配置了 resolve.enforceExtension 为 true，那么导入语句不能缺省文件后缀。

mainFields

有一些第三方模块会提供多份代码， 引入模块时，去找哪个文件以及查找的顺序

区分不同的环境

webpack-merge 专为 webpack 设计，提供了一个 merge 函数，用于连接数组，合并对象

定义环境变量

使用 webpack 内置插件 DefinePlugin 来定义环境变量

配置

使用

利用webpack解决跨域问题

配置代理

优化

1. exclude/include

确保转译尽可能少的文件。 顾名思义，exclude 指定要排除的文件，include 指定要包含的文件

2. cache-loader

在一些性能开销较大的 loader 之前添加 cache-loader，将结果缓存中磁盘中

只打算给 babel-loader 配置 cache 的话， 也可以不使用 cache-loader， 给 babel-loader 增加选项 cacheDirectory

cacheDirectory：默认值为 false。 当有设置时，指定的目录将用来缓存 loader 的执行结果。 之后的 Webpack 构建，将会尝试读取缓存，来避免在每次执行时，可能产生的、高性能消耗的 Babel 重新编译过程。 设置空值或者 true 的话，使用默认缓存目录：node_modules/.cache/babel-loader

3. happypack

把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程

当你的项目不是很复杂时，不需要配置 happypack， 因为进程的分配和管理也需要时间，并不能有效提升构建速度，甚至会变慢

4.thread-loader

除了使用 Happypack 外，我们也可以使用 thread-loader ， 把 thread-loader 放置在其它 loader 之前

thread-loader 和 Happypack 我对比了一下，构建时间基本没什么差别。 不过 thread-loader 配置起来为简单

5.开启 JS 多进程压缩

虽然很多 webpack 优化的文章上会提及多进程压缩的优化， 不管是 webpack-parallel-uglify-plugin 或者是 uglifyjs-webpack-plugin 配置 parallel。 不过这里我要说一句，没必要单独安装这些插件，它们并不会让你的 Webpack 构建速度提升

当前 Webpack 默认使用的是 TerserWebpackPlugin，默认就开启了多进程和缓存

6. HardSourceWebpackPlugin

HardSourceWebpackPlugin 为模块提供中间缓存， 缓存默认的存放路径是: node_modules/.cache/hard-source

首次构建时间变化不大，第二次开始，构建时间降低效果很明显

7. noParse

如果一些第三方模块没有AMD/CommonJS规范版本，可以使用 noParse 来标识这个模块， 这样 Webpack 会引入这些模块，但是不进行转化和解析， 从而提升 Webpack 的构建性能，例如：jquery 、lodash

如果你使用到了不需要解析的第三方依赖， 那么配置 noParse 很显然是一定会起到优化作用的

8. resolve

resolve 配置 webpack 如何寻找模块所对应的文件

resolve.moudles

resolve.extensions 配置，默认是 ['.js', '.json']

将频率最高的后缀放在第一位， 并且控制列表的长度，以减少尝试次数

项目较小时，优化效果不明显

9. IgnorePlugin

webpack 的内置插件，作用是忽略第三方包指定目录

减小包体积

10. externals

可以将一些JS文件存储在 CDN 上(减少 Webpack打包出来的 js 体积)， 在 index.html 中通过 <script> 标签引入

希望在使用时，仍然可以通过 import 的方式去引用(如 import $ from 'jquery')， 并且希望 webpack 不会对其进行打包，此时就可以配置 externals

11. DllPlugin

有些时候，如果所有的JS文件都打成一个JS文件，会导致最终生成的JS文件很大， 这个时候，我们就要考虑拆分 bundles

DllPlugin 和 DLLReferencePlugin 可以实现拆分 bundles， 并且可以大大提升构建速度， DllPlugin 和 DLLReferencePlugin 都是 webpack 的内置模块

使用 DllPlugin 将不会频繁更新的库进行编译， 当这些依赖的版本没有变化时，就不需要重新编译

配置

在一个新建的配置文件中， 把第三方库单独打包成一个动态链接库

在主配置文件中

在html文件中引入dll文件

效果

构建速度

构建时间缩短， 尤其是modules with no loaders，这项构建时间缩短较为明显

体积

打包后的bundle.js体积减少

12. optimization.splitChunks     抽离公共代码

抽离公共代码是对于多页应用来说的， 如果多个页面引入了一些公共模块，那么可以把这些公共的模块抽离出来，单独打包。 公共代码只需要下载一次就缓存起来了，避免了重复下载

抽离公共代码对于单页应用和多页应该在配置上没有什么区别， 都是配置在 optimization.splitChunks 中

即使是单页应用，同样可以使用这个配置， 例如，打包出来的 bundle.js 体积过大， 我们可以将一些依赖打包成动态链接库，然后将剩下的第三方依赖拆出来。 这样可以有效减小 bundle.js 的体积大小 当然，你还可以继续提取业务代码的公共模块

效果

配置DllPlugin 和 SplitChunks 后，General output time有所减少（不包含dll打包时间）

runtimeChunk

runtimeChunk 的作用是将包含 chunk 映射关系的列表从 main.js 中抽离出来， 在配置了 splitChunk 时，记得配置 runtimeChunk.

optimization: {     runtimeChunk: {         name: 'manifest'     } }

终构建出来的文件中会生成一个 manifest.js

借助 webpack-bundle-analyzer 进一步优化

在做 webpack 构建优化的时候，vendor 打出来超过了1M，react 和 react-dom 已经打包成了DLL。 因此需要借助 webpack-bundle-analyzer 查看一下是哪些包的体积较大

配置

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; 。。。 plugins: [ //...     new BundleAnalyzerPlugin(), ]

使用 splitChunks 进行拆分

13.webpack自身的优化

tree-shaking

如果使用ES6的import 语法， 那么在生产环境下，会自动移除没有使用到的代码

scope hosting 作用域提升

变量提升，可以减少一些变量声明。 在生产环境下，默认开启

babel 配置的优化

开启gzip

webpack编译优化

cache-loader DllPlugin threadLoader

性能优化

框架

 收藏

立即使用

防勒索

 收藏

立即使用

前端性能优化原理与实践

 收藏

立即使用

前端面试之道

 收藏

立即使用

安全

toored

职业：硕

去主页





0 条评论

下一页

为你推荐

查看更多



TYT-cargo-owner-index

Prices Structure In Index

show_state_index_page

08-2

MEA02