webpack
前端代码为何要进行构建和打包?
第一点,代码层面:
- 体积更小(
Tree-Shaking
、压缩、合并),加载更快 - 编译高级语言或语法(
TS
、ES6+
、模块化、scss
) - 兼容性和错误检查(
Polyfill
、postcss
、eslint
)
第二点,研发流程方面:
- 统一、高效的开发环境
- 统一的构建流程、产出标准
- 集成公司构建规范(提测、上线等)
module chunk bundle分别什么意思,有何区别?
module
—— 各个源码文件,webpack中一切皆模块chunk
—— 多模块合并成的,如entry
import()
splitChunk
bundle
—— 最终的输出文件
loader 和 plugin 的区别?
loader
模块转换器,如 less -> css 。常见loader
: json-loader、cache-loader、babel-loader、html,css,less,imports…plugin
拓展插件,如HtmlWebpackPlugin
,把js
或css
塞进html
文件里。常见puglin
:DefinePlugin、BannerPlugin、DllPlugin、IgnorePlugin等
babel 和 webpack 的区别?
babel
——JS
新语法编译工具、不关心api
、不关心模块化webpack
—— 打包构建工具,是多个loader
、Plugin
的集合
如何产出一个lib?
webpack如何实现懒加载?
- imort()
- 结合
Vue
React
异步组件 - 结合
Vue-router
React-router
异步加载路由
为何Proxy 不能被 Ployfill
- 如
class
可以用function
模拟 - 如
Promise
可以用callback
来模拟 - 但
Proxy
的功能用Object.defineProperty
无法模拟
babel-runtime 和 babel-ployfill的区别?
babel-ployfill
会污染全局babel-runtime
不会污染全局- 产出第三方
lib
需要用babel-runtime
webpack常见性能优化?
构建速度优化
- 优化
babel-loader
:babel
编译ES6+
到ES5
过程会有较大消耗
IgnorePlugin
:避免一些Plugin
noParse
:不去解析哪些happyPack
(开发和生成环境均可):多进程打包工具
ParallelUglifyPlugin
(仅生产环境):开启多进程并进行JS
代码压缩
例如:
var a=10;
var b=20;
var c=a+b;
优化之后: var c=30;
关于开启多进程
项目较大,打包较慢,开启多进程能够提高速度
项目较小,打包很快,开启多进程会降低速度(增加进程开销)
因此,按需使用
-
自动刷新(不用于生产环境):保存之后,编译完成后,浏览器会自动刷新(默认开启)
-
热更新(不用于生产环境):自动刷新升级版,修改后,浏览器不用刷新,代码就生效
关于自动刷新的问题:整个网页全部刷新,速度较慢,状态会丢失,另外,对于
SPA
网页,如果有深层路由的话,一旦代码修改,路由就会返回首页。
而热更新的好处是,新代码生效,网页不刷新,状态不丢失。
DllPlugin
(动态链接库插件,不用于生产环境):针对比较大的第三方插件,没有必要每次打包都要让它打包一遍,可以优先打包好后,即打包dll
文件,然后再引用它,具体使用通过DllReferencePlugin
来使用dll
文件。
产出代码优化
为了达到如下效果:
- 体积更小
- 合理分包,不重复加载
- 速度更快、内容使用更少
处理:
-
小图片
base64
编码,减少网络请求 -
bundle
加hash
-
懒加载
-
提取公共代码
-
IgnorePlugin
-
使用
CDN
加速 -
使用
production
自动开启压缩代码
Vue
React
等会自动删掉调试代码(如开发环境的warning
)
(ES6 Module
才能让tree-shaking
生效,而commonjs
不行,因为只有静态引用才可生效,见下文区别) -
Scope Hosting
代码体积更小
创建函数作用域更少
代码可读性更好
ES6 Module 和 Commonjs 区别
- ES6 Module 静态引入,编译时引入(直接引用,不能用代码变量判断是否引用)
- Commonjs 动态引入,执行时引入
彩蛋
之前一直折腾美团那个项目,在视频介绍有说过,做完项目就继续整理我的笔记仓库。如下图所示,自己还是觉得有不错的回应吧,建立仓库之初还没有想过会有人给我 star
,更别说 fork
之后 pull request
了。诶,没想到还真有,✿✿ヽ(°▽°)ノ✿
如果您觉得不错,那么请毫不留情地给个 star
吧,您的支持是我继续创作的动力!star
数越多,就会有更多的小伙伴能够看到,或许更多的人在前端有了方向不是。
目前,可以说前端知识梳理篇正式出炉啦,请读者跟上俺的步伐,一起学习前端知识吧,不妨关注一波不迷路~
此外,我的微信公众号:小狮子前端Vue
也运作啦,目前已经开设前端每日一题专栏,每天会发布一篇文章,具体如下图所示,仅需几分钟,就能获得知识,岂不是白嫖的感觉~
此次灵感也是来自于在微信 看一看
,我看到了考研大军的激情,有着每日一句的专栏,每天可能就只需要那么几分钟的时间,就能学习英语。我觉得是挺不错的,那我也想尝试这样做,一方面,我能每天整理一点学习笔记来,另一方面,也算是自己每天学习打卡。一小步或许就是未来一大步,要来一起打卡吗✿✿ヽ(°▽°)ノ✿
最后,没啥要总结的了,小狮子笔记仓库会一直更新下去,每日一题专栏我也会坚持记录。我想,能影响一些人就已经不错啦,曾经也是受过很多dalao影响,目前也是在回馈开源。好啦,下期再见,一个不是只会写业务代码的前端攻城狮在下一期又会写什么呢?
点赞收藏评论,三连支持,下期早点见哈哈哈哈哈~
学如逆水行舟,不进则退