面试知识点梳理
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
flex-wrap
flex-flow
justify-content
align-items
align-content
项目属性
order
flex-grow
flex-shrink
flex-basis
flex
align-self
flex-grow
flex-shrink
flex-basis
flex
align-self
BFC
一列定宽一列自适应
JS
作用域作用域链
this
闭包
变量提升
Promise
EventLoop
浏览器
vue全家桶
webpack
几个常见的loader
- babel-loader：把 ES6 转换成 ES5
图片/字体文件处理
- file-loader
- url-loader
- source-map-loader
处理样式文件
- style-loader
- css-loader
- postcss-loader
- sass-loader
- less-loader
几个常见的plugin
- html-webpack-plugin
- DllPlugin
- DLLReferencePlugin
- SplitChunksPlugin
- HotModuleReplacementPlugin
- DefinePlugin
- clean-webpack-plugin
处理CSS
- mini-css-extract-plugin
- optimize-css-assets-webpack-plugin
进阶
按需加载
import()
import() 语法，需要 @babel/plugin-syntax-dynamic-import 的插件支持，
但是因为当前 @babel/preset-env 预设中已经包含了 @babel/plugin-syntax-dynamic-import，因此我们不需要再单独安装和配置。
但是因为当前 @babel/preset-env 预设中已经包含了 @babel/plugin-syntax-dynamic-import，因此我们不需要再单独安装和配置。
webpack 遇到 import(****) 这样的语法的时候，会这样处理：
- 以**** 为入口新生成一个 Chunk
- 当代码执行到 import 所在的语句时，才会加载该 Chunk 所对应的文件（如这里的1.bundle.8bf4dc.js）
热更新
- 首先配置 devServer 的 hot 为 true
2. 并且在 plugins 中增加
new webpack.HotModuleReplacementPlugin()
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 参数，它接受一个数组
我们希望，index.html 中只引入 index.f7d21a.js，login.html 只引入 login.f7d21a.js
HtmlWebpackPlugin 提供了一个 chunks 的参数，可以接受一个数组，配置此参数仅会将数组中指定的js引入到html文件中，
此外，如果你需要引入多个JS文件，仅有少数不想引入，还可以指定 excludeChunks 参数，它接受一个数组
resolve 配置
resolve 配置 webpack 如何寻找模块所对应的文件。
webpack 内置 JavaScript 模块化语法解析功能，默认会采用模块化标准里约定好的规则去寻找，
但你可以根据自己的需要修改默认的规则。
webpack 内置 JavaScript 模块化语法解析功能，默认会采用模块化标准里约定好的规则去寻找，
但你可以根据自己的需要修改默认的规则。
配置项
modules
resolve.modules 配置 webpack 去哪些目录下寻找第三方模块，默认情况下，只会去 node_modules 下寻找，
如果你我们项目中某个文件夹下的模块经常被导入，不希望写很长的路径，那么就可以通过配置 resolve.modules 来简化
如果你我们项目中某个文件夹下的模块经常被导入，不希望写很长的路径，那么就可以通过配置 resolve.modules 来简化
alias
resolve.alias 配置项通过别名把原导入路径映射成一个新的导入路径
extensions
用途
适配多端的项目
缺省文件后缀
在导入语句没带文件后缀时，会自动带上extensions 中配置的后缀后，去尝试访问文件是否存在，
因此要将高频的后缀放在前面，并且数组不要太长，减少尝试次数。
如果没有配置 extensions，默认只会找对对应的js文件
因此要将高频的后缀放在前面，并且数组不要太长，减少尝试次数。
如果没有配置 extensions，默认只会找对对应的js文件
enforceExtension
如果配置了 resolve.enforceExtension 为 true，那么导入语句不能缺省文件后缀。
mainFields
有一些第三方模块会提供多份代码，
引入模块时，去找哪个文件以及查找的顺序
引入模块时，去找哪个文件以及查找的顺序
区分不同的环境
webpack-merge 专为 webpack 设计，提供了一个 merge 函数，用于连接数组，合并对象
定义环境变量
使用 webpack 内置插件 DefinePlugin 来定义环境变量
配置
使用
利用webpack解决跨域问题
配置代理
优化
1. exclude/include
确保转译尽可能少的文件。
顾名思义，exclude 指定要排除的文件，include 指定要包含的文件
顾名思义，exclude 指定要排除的文件，include 指定要包含的文件
2. cache-loader
在一些性能开销较大的 loader 之前添加 cache-loader，将结果缓存中磁盘中
只打算给 babel-loader 配置 cache 的话，
也可以不使用 cache-loader，
给 babel-loader 增加选项 cacheDirectory
也可以不使用 cache-loader，
给 babel-loader 增加选项 cacheDirectory
cacheDirectory：默认值为 false。
当有设置时，指定的目录将用来缓存 loader 的执行结果。
之后的 Webpack 构建，将会尝试读取缓存，来避免在每次执行时，可能产生的、高性能消耗的 Babel 重新编译过程。
设置空值或者 true 的话，使用默认缓存目录：node_modules/.cache/babel-loader
当有设置时，指定的目录将用来缓存 loader 的执行结果。
之后的 Webpack 构建，将会尝试读取缓存，来避免在每次执行时，可能产生的、高性能消耗的 Babel 重新编译过程。
设置空值或者 true 的话，使用默认缓存目录：node_modules/.cache/babel-loader
3. happypack
把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程
当你的项目不是很复杂时，不需要配置 happypack，
因为进程的分配和管理也需要时间，并不能有效提升构建速度，甚至会变慢
因为进程的分配和管理也需要时间，并不能有效提升构建速度，甚至会变慢
4.thread-loader
除了使用 Happypack 外，我们也可以使用 thread-loader ，
把 thread-loader 放置在其它 loader 之前
把 thread-loader 放置在其它 loader 之前
thread-loader 和 Happypack 我对比了一下，构建时间基本没什么差别。
不过 thread-loader 配置起来为简单
不过 thread-loader 配置起来为简单
5.开启 JS 多进程压缩
虽然很多 webpack 优化的文章上会提及多进程压缩的优化，
不管是 webpack-parallel-uglify-plugin 或者是 uglifyjs-webpack-plugin 配置 parallel。
不过这里我要说一句，没必要单独安装这些插件，它们并不会让你的 Webpack 构建速度提升
不管是 webpack-parallel-uglify-plugin 或者是 uglifyjs-webpack-plugin 配置 parallel。
不过这里我要说一句，没必要单独安装这些插件，它们并不会让你的 Webpack 构建速度提升
当前 Webpack 默认使用的是 TerserWebpackPlugin，默认就开启了多进程和缓存
6. HardSourceWebpackPlugin
HardSourceWebpackPlugin 为模块提供中间缓存，
缓存默认的存放路径是: node_modules/.cache/hard-source
缓存默认的存放路径是: node_modules/.cache/hard-source
首次构建时间变化不大，第二次开始，构建时间降低效果很明显
7. noParse
如果一些第三方模块没有AMD/CommonJS规范版本，可以使用 noParse 来标识这个模块，
这样 Webpack 会引入这些模块，但是不进行转化和解析，
从而提升 Webpack 的构建性能 ，例如：jquery 、lodash
这样 Webpack 会引入这些模块，但是不进行转化和解析，
从而提升 Webpack 的构建性能 ，例如：jquery 、lodash
如果你使用到了不需要解析的第三方依赖，
那么配置 noParse 很显然是一定会起到优化作用的
那么配置 noParse 很显然是一定会起到优化作用的
8. resolve
resolve 配置 webpack 如何寻找模块所对应的文件
resolve.moudles
resolve.extensions 配置，默认是 ['.js', '.json']
将频率最高的后缀放在第一位，
并且控制列表的长度，以减少尝试次数
并且控制列表的长度，以减少尝试次数
项目较小时，优化效果不明显
9. IgnorePlugin
webpack 的内置插件，作用是忽略第三方包指定目录
减小包体积
10. externals
可以将一些JS文件存储在 CDN 上(减少 Webpack打包出来的 js 体积)，
在 index.html 中通过 <script> 标签引入
在 index.html 中通过 <script> 标签引入
希望在使用时，仍然可以通过 import 的方式去引用(如 import $ from 'jquery')，
并且希望 webpack 不会对其进行打包，此时就可以配置 externals
并且希望 webpack 不会对其进行打包，此时就可以配置 externals
11. DllPlugin
有些时候，如果所有的JS文件都打成一个JS文件，会导致最终生成的JS文件很大，
这个时候，我们就要考虑拆分 bundles
这个时候，我们就要考虑拆分 bundles
DllPlugin 和 DLLReferencePlugin 可以实现拆分 bundles，
并且可以大大提升构建速度，
DllPlugin 和 DLLReferencePlugin 都是 webpack 的内置模块
并且可以大大提升构建速度，
DllPlugin 和 DLLReferencePlugin 都是 webpack 的内置模块
使用 DllPlugin 将不会频繁更新的库进行编译，
当这些依赖的版本没有变化时，就不需要重新编译
当这些依赖的版本没有变化时，就不需要重新编译
配置
在一个新建的配置文件中，
把第三方库单独打包成一个动态链接库
把第三方库单独打包成一个动态链接库
在主配置文件中
在html文件中引入dll文件
<script src="/dll/react.dll.9dcd9d.js"></script>
效果
构建速度
构建时间缩短，
尤其是modules with no loaders，这项构建时间缩短较为明显
尤其是modules with no loaders，这项构建时间缩短较为明显
体积
打包后的bundle.js体积减少
12. optimization.splitChunks
抽离公共代码
抽离公共代码
抽离公共代码是对于多页应用来说的，
如果多个页面引入了一些公共模块，那么可以把这些公共的模块抽离出来，单独打包。
公共代码只需要下载一次就缓存起来了，避免了重复下载
如果多个页面引入了一些公共模块，那么可以把这些公共的模块抽离出来，单独打包。
公共代码只需要下载一次就缓存起来了，避免了重复下载
抽离公共代码对于单页应用和多页应该在配置上没有什么区别，
都是配置在 optimization.splitChunks 中
都是配置在 optimization.splitChunks 中
即使是单页应用，同样可以使用这个配置，
例如，打包出来的 bundle.js 体积过大，
我们可以将一些依赖打包成动态链接库，然后将剩下的第三方依赖拆出来。
这样可以有效减小 bundle.js 的体积大小
当然，你还可以继续提取业务代码的公共模块
例如，打包出来的 bundle.js 体积过大，
我们可以将一些依赖打包成动态链接库，然后将剩下的第三方依赖拆出来。
这样可以有效减小 bundle.js 的体积大小
当然，你还可以继续提取业务代码的公共模块
效果
配置DllPlugin 和 SplitChunks 后，General output time有所减少（不包含dll打包时间）
runtimeChunk
runtimeChunk 的作用是将包含 chunk 映射关系的列表从 main.js 中抽离出来，
在配置了 splitChunk 时，记得配置 runtimeChunk.
在配置了 splitChunk 时，记得配置 runtimeChunk.
optimization: {
runtimeChunk: {
name: 'manifest'
}
}
runtimeChunk: {
name: 'manifest'
}
}
终构建出来的文件中会生成一个 manifest.js
借助 webpack-bundle-analyzer 进一步优化
在做 webpack 构建优化的时候，vendor 打出来超过了1M，react 和 react-dom 已经打包成了DLL。
因此需要借助 webpack-bundle-analyzer 查看一下是哪些包的体积较大
因此需要借助 webpack-bundle-analyzer 查看一下是哪些包的体积较大
配置
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
。。。
plugins: [
//...
new BundleAnalyzerPlugin(),
]
。。。
plugins: [
//...
new BundleAnalyzerPlugin(),
]
使用 splitChunks 进行拆分
13.webpack自身的优化
tree-shaking
如果使用ES6的import 语法，
那么在生产环境下，会自动移除没有使用到的代码
那么在生产环境下，会自动移除没有使用到的代码
scope hosting 作用域提升
变量提升，可以减少一些变量声明。
在生产环境下，默认开启
在生产环境下，默认开启
babel 配置的优化
开启gzip
webpack编译优化
cache-loader
DllPlugin
threadLoader
DllPlugin
threadLoader
性能优化
框架
0 条评论
下一页
