全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术干货

如何减少 Webpack 打包体积

发布时间:2022-09-07 16:58:00
发布人:wjy

  1. 按需加载

  在开发 SPA 项目的时候,项目中都会存在很多路由页面。如果将这些页面全部打包进一个 JS 文件的话,虽然将多个请求合并了,但是同样也加载了很多并不需要的代码,耗费了更长的时间。那么为了首页能更快地呈现给用户,希望首页能加载的文件体积越小越好,这时候就可以使用按需加载,将每个路由页面单独打包为一个文件。当然不仅仅路由可以按需加载,对于 loadash 这种大型类库同样可以使用这个功能。

  按需加载的代码实现这里就不详细展开了,因为鉴于用的框架不同,实现起来都是不一样的。当然了,虽然他们的用法可能不同,但是底层的机制都是一样的。都是当使用的时候再去下载对应文件,返回一个 Promise,当 Promise 成功以后去执行回调。

  2. Scope Hoisting

  Scope Hoisting 会分析出模块之间的依赖关系,尽可能的把打包出来的模块合并到一个函数中去。

  比如希望打包两个文件:

  

 

  对于这种情况,打包出来的代码会类似这样:

  

 

  但是如果使用 Scope Hoisting ,代码就会尽可能的合并到一个函数中去,也就变成了这样的类似代码:

  

 

  这样的打包方式生成的代码明显比之前的少多了。如果在 Webpack4 中你希望开启这个功能,只需要启用 optimization.concatenateModules 就可以了:

  

 

  3. Tree Shaking

  Tree Shaking 可以实现删除项目中未被引用的代码,比如:

  

 

  对于以上情况,test 文件中的变量 b 如果没有在项目中使用到的话,就不会被打包到文件中。

  如果使用 Webpack 4 的话,开启生产环境就会自动启动这个优化功能。

相关文章

敏捷中的故事编写工作坊是什么?

敏捷中的故事编写工作坊是什么?

2023-10-14
scrum master的核心竞争力是什么?

scrum master的核心竞争力是什么?

2023-10-14
什么项目适合使用Scrum?

什么项目适合使用Scrum?

2023-10-14
scrum敏捷软件开发是什么?

scrum敏捷软件开发是什么?

2023-10-14

最新文章

常见网络安全面试题:Windows常用的命令有哪些?

常见网络安全面试题:Windows常用的命令有哪些?

2023-10-09
常见网络安全面试题:根据设备告警如何展开排查?

常见网络安全面试题:根据设备告警如何展开排查?

2023-10-09
常见网络安全面试题:mysql加固呢?(数据库加固)

常见网络安全面试题:mysql加固呢?(数据库加固)

2023-10-09
常见网络安全面试题:windows和linux加固?(操作系统加固)

常见网络安全面试题:windows和linux加固?(操作系统加固)

2023-10-09
在线咨询 免费试学 教程领取