面试知识点梳理
2020-06-05 14:16:30 0 举报
AI智能生成
登录查看完整内容
前端面试内容梳理
作者其他创作
大纲/内容
面试知识点梳理
CSS
清除浮动
1、添加新元素
2、使用伪元素
3、触发父元素BFC
盒模型
flex
容器属性
flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content
项目属性
orderflex-growflex-shrinkflex-basisflexalign-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,因此我们不需要再单独安装和配置。
webpack 遇到 import(****) 这样的语法的时候,会这样处理:
以**** 为入口新生成一个 Chunk当代码执行到 import 所在的语句时,才会加载该 Chunk 所对应的文件(如这里的1.bundle.8bf4dc.js)
热更新
我们配置了 HotModuleReplacementPlugin 之后,会发现,此时我们修改代码,仍然是整个页面都会刷新。不希望整个页面都刷新,还需要修改入口文件
首先配置 devServer 的 hot 为 true
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.jsHtmlWebpackPlugin 提供了一个 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解决跨域问题
配置代理
优化
带你深度解锁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
将频率最高的后缀放在第一位,并且控制列表的长度,以减少尝试次数
项目较小时,优化效果不明显
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文件
<script src=\"/dll/react.dll.9dcd9d.js\"></script>
效果
构建速度
构建时间缩短,尤其是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 查看一下是哪些包的体积较大
使用 splitChunks 进行拆分
13.webpack自身的优化
tree-shaking
如果使用ES6的import 语法,那么在生产环境下,会自动移除没有使用到的代码
scope hosting 作用域提升
变量提升,可以减少一些变量声明。在生产环境下,默认开启
babel 配置的优化
开启gzip
webpack编译优化
cache-loaderDllPluginthreadLoader
性能优化
框架
0 条评论
回复 删除
下一页