webpack打包体积过大的问题

webpack把我们所有的文件都打包成一个js文件,即使你是小项目,打包后的文件也非常大

1)去掉不必要的插件

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

2)提取第三方库

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

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

3)代码压缩

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

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

https://blog.csdn.net/liuqi332922337/article/details/53020992

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

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

不支持es6的模块系统

5)设置缓存

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果您的 Vue 3.0 代码量过大导致 webpack 打包失败,我可以提供一些解决方案: 1. 优化代码:首先,检查您的代码是否存在重复、冗余或不必要的部分。尽量使用模块化的方式组织代码,避免在全局范围内定义过多的变量和函数。使用 webpack 的代码拆分功能,将大型代码库拆分成较小的模块,按需加载。 2. 使用动态导入:Vue 3.0 支持使用动态导入(dynamic import)来按需加载组件和模块。通过这种方式,可以减少初始加载的代码量,提应用的性能。您可以将一些不常用或初始加载时不必要的组件放在异步加载,以减小初始打包体积。 3. 配置优化插件:在 webpack 配置,您可以使用一些插件来优化打包结果。例如,使用 TerserWebpackPlugin 来进行代码压缩和混淆,使用 HtmlWebpackPlugin 自动生成 HTML 文件,并自动注入打包后的资源。 4. 按需加载第三方库:如果您在项目使用了一些较大的第三方库(如图表库、富文本编辑器等),可以考虑按需加载它们的模块。这样可以避免将整个库打包到最终的 bundle 文件,减小打包体积。 5. 考虑使用CDN:对于一些通用的库或框架,您可以考虑使用 CDN(内容分发网络)来引入它们,而不是将其打包项目。这可以减小打包体积并加快页面加载速度。 6. 升级 webpack 版本:如果您使用的是较旧的 webpack 版本,尝试升级到最新版本。每个 webpack 版本都有不同的优化和改进,可能会有助于解决打包失败的问题。 希望以上建议对您有所帮助!如果问题仍然存在,请提供更多详细信息,我将尽力提供更具体的解决方案。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值