专注成都jJava培训,就业为目标,市场为导向。提升Java实战能力学编程找IT工作就上良将Java培训。 了解技术加老师微信号: he910713 手机:17778634846
良将LOGO图
学编程找IT工作就上良将Java培训。
首页webpack体积怎么优化?有哪些方法?

webpack体积怎么优化?有哪些方法?

更新时间:2023-03-18 14:44:13来源:良将浏览1013次

前端图片信息 (1)

webpack打包优化可以从以下几个方面来调整

1)去掉不必要的插件

开发环境和生产环境使用同一个webpack配置文件,导致生产环境打包的js文件包含很多没必要的插件(如:NoEmitOnErrorsPlugin)

2)提取第三方库

第三方库和源代码在一起打包体积会很大

前端图片信息 (23)

CommonsChunkPlugin 提取代码中公共模块,然后将公共模块打包到一个独立的文件中,以便在其他的入口和模块中使用。

3)代码压缩

内置插件UglifyPlugin,加入这个插件编译速度会变慢,所以一般只在生产环境启用

4)代码分割(webpack的code split配合router)

前端图片信息 (26)

·webpack的code spliting特性可以将代码库分割成按需加载的块(chunks)

·AMD/commmonJS指定不同的方法去做代码按需加载,他们支持代码分割并充当分割点

·不支持es6的模块系统

5)设置缓存

前端图片信息 (11)

对于静态文件,第一次获取之后,文件内容没有改变的话直接读取缓存,但是如果缓存时间过长文件要更新的话可以打包后的文件名加入hash值。

文章来源于网络,不代表本站任何观点。如有侵权或需授权才可以转载请联系管理员,我们核实信息后会在第一时间删除

返回顶部