10.webpack 和 babel
2020-04-16 11:14:56 8 举报
AI智能生成
登录查看完整内容
webpack babel 配置 面试题
作者其他创作
大纲/内容
前端框架及项目面试聚焦Vue/React/Webpack— 课程笔记
第10章 webpack 和 babel
10-1 webpack考点梳理
1. webpack已是前端打包构建的不二选择2. 每日必用,面试必考3. 成熟的工具,重点在于配置和使用,原理并不高优
webpack
1. 基本配置2. 高级配置3. 优化打包效率4. 优化产出代码5. 构建流程概述6. babel
讲解范围
10-2 webpack基本配置串讲(上)10-3 webpack基本配置串讲(下)
1. vue-cli create-react-app2. 常用上述脚手架,但是自己不会配置webpack3. 面试不会通过
面试状况
拆分
merge
拆分配置和merge
proxy,设置代理,可以跨域请求其他接口
启动本地服务devServer
testincludeexclude作用都要知道
需要配置.bebelrc
处理ES6
postcss-loader,是处理css浏览器兼容性的less-loadercss-loaderstyle-loader
transform: rotate(-45deg可以给这些样式加一些前缀
使用postcss-loader时,需要配置postcss.config.js
处理样式
开发环境中
生产环境中
处理图片
1. 拆分配置和merge2. 启动本地服务3. 处理ES6(babel-loader)4. 处理样式(postcss-loader,是处理css浏览器兼容性的、 less-loader、 css-loader style-loader)5. 处理图片(file-loader)6. (模块化)
outputcontentHash
基本配置
10-4 webpack如何配置多入口10-5 webpack如何抽离压缩css文件10-6 webpack如何抽离公共代码和第三方代码10-7 webpack如何实现异步加载JS
面试情况
1. entry2. output3. 针对每个入口都要生成一个.html文件
多入口配置
抽离css文件后,css样式是以外部链接文件的形式引入的
不抽离css时,css会放到<style>中
线上打包,必须抽离CSS文件
抽离CSS文件
两个文件引入了同一个模块,会打包两次
lodash文件较大每次修改业务代码时,lodash都要重新打包,但是lodash并没有改变根本不需要重新打包应该把lodash拆出去单独打包,当业务代码改变时,loadsh会命中缓存,加载会快
第三方模块
可以设置minSize来限制多大的第三方模块单独打包如果文件非常小,可以不抽离,直接和业务代码一起打包
minChunks: 2 // 公共模块最少复用过几次比如公共模块至少复用了2次,就把它抽离出来单独打包,比如math
chunks & 缓存分租
抽离公共代码和第三方代码
懒加载也会产生一个chunk
懒加载
@babel/preset-react
处理JSX
vue-loader
处理vue
1. 多入口配置2. 抽离css文件(考察重点)3. 抽离公共代码和第三方代码(考察重点)4. 懒加载(考察重点)5. 处理JS(@babel/preset-react)6. 处理vue(vue-loader)
webpack高级配置
10-8 module chunk bundle 的区别
1. module-各个源码文件,webpack中一切皆模块(能被引入的文件都是模块,不管是什么类型,比如css js 图片)2. chunk-多模块合并成的,如entry、import() 、splitChunk都可以生成chunk3. bundle-最终的输出文件
module chunk bundle的区别
10-9 webpack优化构建速度-知识点串讲 10-10 用IngorePlugin忽略无用文件10-11 happyPack是什么10-12 webpack如何配置热更新10-13 何时使用DllPlugin10-14 webpack优化构建速度-考点总结和复习
面试时,不要让面试官觉得你在背面试题
注意
1. 大厂必考 & 社区热议话题2. 优化打包构建速度-开发体验和效率3. 优化产出代码-产品性能
webpack性能优化
开启缓存: 用cacheDirectory,只要ES6代码没变,就不会重新编译,会缓存下来第二次编译时,没改的部分使用缓存
includeexclude
明确范围
优化babel-loader
1. JS单线程,开启多进程打包2. 提高构建速度(特别是多核CPU)
happyPack多进程打包
1. webpack内置Uglify工具压缩JS2. JS 单线程,开启多进程压缩更快3. 和happyPack同理
在开发环境下使用压缩
1. 项目较大,打包较慢,开启多进程能提高速度2. 项目较小,打包很快,开启多进程会降低速度(进程开销)3. 按需使用要理解不要背书,什么情况下使用什么情况下不适用
关于开启多进程
ParallelUglify多进程压缩JS
开发环境下使用,生产环境没有自动刷新在开发环境下配置devServer时,就默认开启自动刷新
自动刷新
1. 自动刷新:整个网页全部刷新,速度较慢2. 自动刷新:整个网页全部刷新,状态会丢失(比如填写表单时,网页刷新会导致表单内容丢失。 或者路由跳转了很多次,网页刷新后会跳转到首页)3. 热更新:新代码生效,网页不刷新,状态不丢失
热更新配置
网页刷新对开发体验影响很大时,开启热更新否则就用网页刷新
自己配置哪些模块需要热更新
热更新HotModuleReplacementPlugin
1. 前端框架如vue React,体积大,构建慢2. 较稳定,不常升级版本3. 同一个版本只构建一次即可,不用每次都重新构建
react.dll.js 是打包后的内容react.manifest.json是索引
DllPlugin-打包出dll文件
DllReferencePlugin-使用dll文件
1. webpack已内置DllPlugin支持2. DllPlugin-打包出dll文件3. DllReferencePlugin-使用dll文件
思路就是,先提前打包一次,再引用之前打包的文件
DllPlugin动态链接库插件
1. 优化babel-loader2. IgnorePlugin3. noParse4. happyPack5. ParallelUglify6. 自动刷新7. 热更新8. DllPlugin
webpack优化构建速度(可用于生产环境)
1. 自动刷新2. 热更新3. DllPlugin
webpack优化构建速度(不可用于生产环境!)
适用环境
优化构建速度
10-15 webpack优化产出代码-考点串讲10-16 什么是Tree-Shaking10-18 什么是Scope Hosting
1. 体积更小2. 合理分包,不重复加载3. 速度更快,内存使用更少
小图片base64编码
bundle 加 hash
提取公共代码
修改所有静态url的前缀(CDN前缀)
引用cdn地址
把打包的文件上传到CDN服务器上去
可以用于js css 图片
使用cdn加速
1. 自动开启代码压缩2. Vue React等会自动删掉调试代码(如开发环境的warning)3. 自动启动Tree-Shaking
production
什么是Tree-Shaking
js和css都可以treeShaking
ES6 Module才能让tree-shaking生效 commonjs不可以因为ES6 Module是静态引入,Commonjs是动态引入
两个文件,对应两个函数,一个函数产生一个作用域
文件越多,产生的函数越多,每个函数都有一个作用域,对js代码执行和内存消耗非常不友好
打包结果
代码体积越大,Scope Hosting效果越好
开启Scope Hosting
1. 代码体积更小2. 创建函数作用域更少3. 代码可读性更好
作用
怎么使用
多个函数合并成一个函数,作用域会减少
Scope Hosting
1. 小图片base64编码2. bundle 加 hash3. 懒加载 import 对大文件使用4. 提取公共代码5. IgnorePluging6. 使用CDN加速7. 使用production 自动压缩、 删掉调试代码 自动开启tree-Shaking8. Scope Hosting
webpack性能优化-产出代码
10-17 ES Module 和 Commonjs 的区别
1. ES6Module是静态引入,编译时引入 直接引入,打包时能直接识别到,不能在条件中判断是否引用2. Common动态引入,执行时引入3. 只有ES6 Module才能静态分析,实现Tree-Shaking
区别
10-19 babel基本概念串讲10-20 babel-polyfill是什么10-21 babel-polyfill如何按需引入10-22 babel-runtime是什么
1. 前端开发环境必备工具2. 同webpack,需要了解基本的配置和使用3. 面试考察概率不高,但要求必会
面试要求
1. 环境搭建2. .babelrc配置3. presets和plugins
环境搭建和基本配置
@babel/preset-env(转换es6 es7 es8语法)@babel/preset-flow@babel/preset-react (转换jsx语法)@babel/preset-typescript (转换ts语法)
选项
@babel/preset-env是一个babel插件的集合是一个预设置,代替我们写很多的plugins
npx babel src/index.js用babel把ES6语法编译成ES5语法
@babel/preset-env
presets
babel 是编译 es6 的核心工具。babel-loader 是借用了 babel ,封装了一下,将 babel 用于 webpack 的打包流程。这一点,很类似于 less 和 less-loader 。
babel和babel-loader的区别
babel
1. 什么是Polyfill(对一些浏览器不支持的函数做补丁或者兼容)2. core-js和regenerator core-js: 集成了一些新语法的补丁 https://github.com/zloirock/core-js 提供了es5、es6的polyfills,包括promises、symbols、collections、iterators、typed arrays、ECMAScript 7+ proposals、setImmediate 等等。 但是它不支持generator regenerator:支持generator3. babel-polyfill即两者的集合
babel-polyfill现已被弃用1. Babel7.4之后,弃用babel-polyfill|2. 推荐直接使用core-js和regenerator3. 但并不影响面试会考察它
babel-polyfill是什么?
配置
代码
转化结果,转了箭头函数,不处理API
代码演示
不用babel-polyfill时
转化结果
babel只负责解析语法,不处理API也不管模块化(webpack处理模块化)babel处理完交给webpackwebpack把babel-polyfill引入进来polyfill解析Promise和includes,API就可以在浏览器正常运行
babel-polyfill功能
使用babel-polyfill时
1. babel-polyfill文件较大2. 只使用其中一部分功能,无需全部引入
为什么按需引入
配置这个配置,满足babel7.4版本后babel-polly被弃用的配置
不需要import(@babel/polyfill)
按需引入的效果不会require(\"@babel/polyfill)\"只引入需要的core-js的语法特性
babel-polyfill如何按需引入
_promise _includes 不会污染全局环境使用方使用时没有副作用
效果
babel-polyfill的问题
babel-polyfill
10-23 webpack考点总结和复习
1. 拆分配置和merge 2. 启动本地服务 proxy代理3. 处理ES64. 处理样式5. 处理图片
1. 多入口2. 抽离CSS文件3. 抽离公共代码和第三方库4. 懒加载5. 处理JSX6. 处理vue
高级配置
1. 优化babel-loader2. IgnorePlugin3. noParse4. happyPack5. ParallelUglifyPlugin
可用于生产环境
不可用于生产环境
1. 小图片base64编码2. bundle 加 hash3. 懒加载 import 对大文件使用4. 提取公共代码5. IgnorePluging6. 使用CDN加速7. 使用production 自动压缩、 删掉调试代码 自动开启tree-Shaking8. Scope Hosting
优化产出代码
1. 环境搭建&基本配置2. babel-polyfill3. babel-runtime
10-24 webpack面试真题-前端代码为何要打包10-25 webpack面试真题-为何Proxy不能被Polyfill 10-26 webpack面试真题-常见性能优化方法
代码层面
1. 统一、高效的开发环境2. 统一的构建流程和产出标准3. 集成公司构建规范(提测、上线等)
打包流程、前端工程化方面
前端代码为何要打包
1. module-各个源码文件,webpack中一切皆模块2. chunk-多模块合成,如entry import() splitChunk3. bundle-最终产出的文件
1. loader模块转换器,如less->css2. plugin扩展插件,如HtmlWebpackPlugin
loader和plugin的区别
常见loader和plugin有哪些
1. babel-JS 新语法编译工具,不关心模块化2. webpack-打包构建工具,是多个loader plugin的集合
babel和webpack的区别
1. 参考wbpack.dll.js2. output.library
如何产出一个lib
1. babel-polyfill会污染全局2. babel-runtime不会污染全局3, 产出第三方lib要用babel-runtime
babel-polyfill和babel-runtime的区别
1. import()2. 结合Vue React异步组件3. 结合Vue-router React-router异步加载路由
webpack如何使用懒加载
1. 如Class可以用function模拟2. 如Promise可以用callback来模拟3. 但Proxy的功能用Object.defineProperty无法模拟
为何Proxy不能被Polyfill ?
1. 优化babel-loader2. IgnorePlugin3.noParse4. happyPack5. ParellelUglifyPlugin
不能用于生产环境!
1. 小图片base64编码2. bundle 加hash3. 懒加载4. 提取公共代码5. 使用CDN加速6.ignorePlugin7. 使用production8. Scope Hosting
wbpack面试题
0 条评论
回复 删除
下一页