前端之webpck的优化

一、webpack的打包流程/webpack的机制/原理/webpack是怎么打包的

1 webpack是根据运行的指令来决定一个基本的业务流程

2 如果是build 就是执行打包,如果是 配合了devServer就是就行本地化的调试。 两者其实在本质上没有太大区别,只是devServer会运行一个node服务器来进行本地化调试,打包的文件只是临时的缓存。

3 确定入口:在配置文件当中我们会指定一个入口文件(entry)

4 编译模块: 根据入口文件,遍历他所有的引入的文件。然后根据不同的文件类型使用不同的loader或者是对应的插件进行处理,而且在文件当中的其他引入会依次递归寻找。重复同样的流程。

5 完成编译:loader和插件对于我们的各种的引入模块进行编译处理最终形成一个有效的文件依赖。

6 输出资源: 根据入口和各模块之间的依赖关系, 组装成一个个包含多个模块的chunk,再把每个chunk转换成一个单独的文件加入到输出列表。

7 文件生成: 最终我们会把这些确定好到要打包的文件 写入到我们的文件系统当中。

二、cdn优化

原先我们使用一个包的方式都是 npm i 安装包。然后 import 到代码里面使用。 这样做会导致对应的包也会被打包到我们的js当中。 会增加了我们的打包的压力和大小。所以对于一些体积较大 但是比较稳定的包,我们应该直接使用cdn加速服务来处理(意思就是我们在上线的时候 通过html代码引入这个 js包使用即可,而不是打包到我们的js当中。) 所以这些成熟的而且提交较大的类库我们其实可以放到cdn服务器上面,所以我们配置webpack区忽略这些包的打包。

webpack排除打包

复制代码
{
  ...其他配置,
  externals:{
    'vue':'Vue',
    'element-ui':'ELEMENT',
    'xlsx':'XLSX'

}

cdn服务器上的地址注入到模板当中

三、使用 module.noParse

假设我们不采用cdn引入一些公共的类库比如说 ecahrt或者是 jquery等等这些,但是我们又在我们的代码里面进行了引入,默认情况下webpack还是会对这些引入的库进行解析处理。这些包的其实都是很稳定而且比较庞大的包,webpack去解析这些文件耗时又没有实际的意义,因为我们基本不会改动里面的内容。

所以我们可以主动的去配置 告诉webpack哪些文件不需要去解析

复制代码
 module: {
    noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/
  }
相关推荐
AverageJoe199127 分钟前
一次vite热更新不生效问题排查
前端·debug·vite
努力只为躺平29 分钟前
🔥 油猴脚本开发指南:从基础API到发布全流程
前端·javascript
bitbitDown31 分钟前
我用Playwright爬了掘金热榜,发现了这些有趣的秘密... 🕵️‍♂️
前端·javascript·vue.js
陈随易35 分钟前
VSCode v1.102发布,AI体验大幅提升
前端·后端·程序员
ma7739 分钟前
JavaScript 获取短链接原始地址的解决方案
前端
该用户已不存在39 分钟前
关于我把Mac Mini托管到机房,后续来了,还有更多玩法
服务器·前端·mac
tianchang43 分钟前
SSR 深度解析:从原理到实践的完整指南
前端·vue.js·设计模式
闲蛋小超人笑嘻嘻44 分钟前
前端面试十一之TS
前端
摆烂为不摆烂44 分钟前
😁深入JS(四): 一文让你完全了解Iterator+Generator 实现async await
前端
DoraBigHead1 小时前
🧠 别急着传!大文件上传里,藏着 Promise 的高级用法
前端·javascript·面试