![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
文章平均质量分 92
webpack相关配置及优化等
不止会JS
这个作者很懒,什么都没留下…
展开
-
Webpack性能优化:代码分包,CDN内容分发网络,摇树,代码压缩
webpack作为前端代码的打包工具,本身不会影响前端代码在生产环境下的代码执行过程,不过前端代码通常作为静态资源传输,尽可能减小前端代码的体积可以加快浏览器请求前端代码的速度,提高单页面应用切换及首评渲染的速度,而webpack作为代码的打包工具,则可以通过配置尽可能减少代码大小,实现性能优化。原创 2024-08-28 13:58:35 · 725 阅读 · 0 评论 -
Webpack:Loader执行策略,如何自定义Loader
假设存在这三个loader存在并对js文件进行处理,那么他们的执行顺序就是03>02>01,那么为什么如此奇怪呢,为什么要从下向上进行处理呢,因为每个loader还有一个属性pitch,是一个函数(loader本身也是一个函数) ,我们称这个属性未pitchloader,而我们的loader称为normalloader,runloader函数在遍历执行loader时(源码中的函数,想要了解webpack源码,可以看我的另一篇文章。决定调用那些loader,并且按照上文中说的顺序来执行。原创 2023-08-25 18:43:27 · 545 阅读 · 0 评论 -
babel原理及使用,polyfill原理及使用,ts-loader和babel处理ts代码的区别以及具体使用
Babel提供了babelrcRoots配置,通过这个配置可以实现,单独配置某一个子包。首先是babelrc.js,在Babel文档中将此文件叫做相对文件配置,当babel编译时会自动检索此文件进行读取,直到读取到package.json,便会停止搜索,这乍一看没什么问题,但如今的项目中具有依赖包,其中包含大量package.json,而生产环境的依赖包也是需要编译的,那么完成这个需求,我们就需要将每个子包都配置一个babelrc.js,这也是为什么他叫相对文件配置,因为它只管自己包内的文件。原创 2023-08-21 14:46:22 · 680 阅读 · 2 评论 -
webpack原理,webpack源码解析,超详细
直到所有模块都被构建完成后,才会跳出循环。编译代码需要一个合适的环境啊,除了编译代码的环节,其他的如解析更改配置文件,以及将我们写的配置换成对应插件,以及注册钩子(就是我们之前说的tapAsync)以及输出文件等等,基本除了转换代码的活,都是他在做,而compilation对象的作用仅仅是转换代码,所以创建了这个对象,也意味着我们进入了转换代码的阶段了。简单点说,当我们配置不止一个入口文件时,那么每个入口文件都是独立的编译任务,此时便会给每一个入口分配一个compiler对象,这就是多编译模式。原创 2023-08-24 23:53:31 · 1087 阅读 · 1 评论