![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
文章平均质量分 66
前端同学
学习为主,兴趣为辅,致力于向前端更深层次发展。
展开
-
tree shaking的原理是什么?
别名叫摇晃树,最早是由Rollup实现,是一种采用删除不需要的额外代码的方式优化代码体积的技术tree-shaking会在打包过程中 静态分析 模块之间的导入导出,确定哪些模块导出值没有被使用,并将其删除,从而实现了打包产物的优化。在之前CommonJs、AMD、CMD的模块化方案中,这种导入导出是动态的,难以预测的,因此在打包阶段,是无法分析哪些模块被使用,例如:而ES 静态module方案下,模块之间的依赖关系是高度确定的静态的,与运行状态无关,可以进行可靠的静态分析,因此整个依赖树可以被静态地推导原创 2022-07-14 15:13:22 · 2939 阅读 · 0 评论 -
webpack配置优化
多进程打包,可以大大提高构建的速度,使用方法是将thread-loader放在比较费时间的loader之前,比如babel-loader。由于启动项目和打包项目都需要加速,所以配置在webpack.base.jscache-loader缓存资源,提高二次构建的速度,使用方法是将cache-loader放在比较费时间的loader之前,比如babel-loader,由于启动项目和打包项目都需要加速,所以配置在webpack.base.js开启热更新比如你修改了项目中某一个文件,会导致整个项目刷新,这非原创 2022-06-23 16:35:11 · 687 阅读 · 0 评论 -
require.context的使用
解释require.context是一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块使用说明require.context函数接受三个参数directory {String} -读取文件的路径useSubdirectories {Boolean} -是否遍历文件的子目原创 2022-05-26 16:03:54 · 1143 阅读 · 0 评论 -
npm和yarn的区别
npm 特点npm install的时候巨慢。特别是新的项目拉下来要等半天,删除node_modules,重新install的时候依旧如此。安装的时候,包会在同一时间下载和安装,中途某个时候,一个包抛出了一个错误,但是npm会继续下载和安装包。因为npm会把所有的日志输出到终端,有关错误包的错误信息就会在一大堆npm打印的警告中丢失掉,并且你甚至永远不会注意到实际发生的错误。同一个项目,安装的时候无法保持一致性(可以package-lock.json锁定版本)。由于package.json文件中版本号原创 2022-03-11 14:43:06 · 340 阅读 · 0 评论 -
Vite和Webpack的核心差异
webpack打包过程1.识别入口文件2.通过逐层识别模块依赖。(Commonjs、amd或者es6的import,webpack都会对其进行分析。来获取代码的依赖)3.webpack做的就是分析代码。转换代码,编译代码,输出代码4.最终形成打包后的代码webpack打包原理1.先逐级递归识别依赖,构建依赖图谱2.将代码转化成AST抽象语法树3.在AST阶段中去处理代码4.把AST抽象语法树变成浏览器可以识别的代码, 然后输出vite原理当声明一个 script 标签类型为 modul原创 2022-03-02 10:04:30 · 387 阅读 · 0 评论 -
WebPack面试题总结
一、常见的问题1、Loader和Plugin的区别?Loader直译为"加载器"。Webpack将⼀切⽂件视为模块,但是Webpack原⽣是只能解析JavaScript⽂件,如果想将其他⽂件也打包的话,就会⽤到Loader。所以Loader的作⽤是让Webpack拥有了加载和解析非JavaScript文件的能力;Plugin直译为"插件"。Plugin可以扩展Webpack的功能,让Webpack具有灵活性。在Webpack运⾏的⽣命周期中会⼴播出许多事件,Plugin可以监听这些事件,在合适的时机原创 2022-01-04 10:58:15 · 754 阅读 · 0 评论 -
package.json中^,~的详细说明
"dependencies": { "axios": "0.21.0", "core-js": "~3.6.5", "echarts": "^4.9.0", "antd": "^3.1.4" "quill-image-drop-module": "^1.0.3", "quill-image-resize-module": "^3.0.0", "vue": "^2.6.11", "vue-particles": "^1.0.9", "..原创 2021-05-28 16:42:09 · 189 阅读 · 0 评论 -
package-lock.json的作用
其实用一句话来概括很简单,就是锁定安装时的包的版本号,并且需要上传到git,以保证其他人在npm install时大家的依赖能保证一致。这里举个例子:"dependencies": { "@types/node": "^8.0.33",},这里面的 向上标号^是定义了向后(新)兼容依赖,指如果 types/node的版本是超过8.0.33,并在大版本号(8)上相同,就允许下载最新版本的 types/node库包,例如实际上可能运行npm install时候下载的具体版本是8.0.35packa原创 2021-04-27 14:25:19 · 144 阅读 · 0 评论