当前位置: 首页 > 面试题库 >

使用webpack打包React项目,怎么减小生成的js大小?

柯唯
2023-03-14
本文向大家介绍使用webpack打包React项目,怎么减小生成的js大小?相关面试题,主要包含被问及使用webpack打包React项目,怎么减小生成的js大小?时的应答技巧和注意事项,需要的朋友参考一下

打包优化的问题解决思路:

  • 代码压缩:UglifyjsWebpackPlugin
  • 代码分组 commonsChunkPlugin, SplitChunksPlugin
  • 网络传输压缩gzip: CompressionWebpackPlugin
  • 抽取css代码:mini-css-extract-plugin
  • 组件动态加载:react-loadable
 类似资料:
  • vue2 打包后总会生成一个超大的js,里面重复包含了我的整个项目,不知道到底是哪里的配置出了问题?

  • 本文向大家介绍webpack打包文件太大怎么办?相关面试题,主要包含被问及webpack打包文件太大怎么办?时的应答技巧和注意事项,需要的朋友参考一下 webpack把我们所有的文件都打包成一个JS文件,这样即使你是小项目,打包后的文件也 会非常大。可以从去除不必要的插件,提取第三方库,代码压缩,代码分割,设置缓存几个 方面着手优化。 详细参见:http://www.jianshu.com/p/a

  • 我有一个使用react开发的网站,它只有一个页面,但产品包大小是1.11MIB。我正在使用firestore、firebase storage、material UI、react redux,该应用程序运行良好,除了捆绑包大小外,一切正常。 我的网页包配置文件 我不知道我在这里错过了什么来减小节点模块的大小。如果我们有任何其他选择,以减少捆绑大小,请给我一个建议。

  • Vue-cli项目中,如何只插入process.env.VUE_APP_xx 参数,而不是插入全部参数 .env文件: `VUE_APP_MENU = '1' VUE_APP_MAP_KEY = '123456' ` index.js: webpack打包后的结果: webpack打包会插入全部的VUE_APP_参数,即便没有使用,这会导致在入口js泄露一些参数如地图的key:VUE_APP_MA

  • 项目中使用了比较常见的svg封装方式,如下图所示 打包之后入口js文件比较大,1.5MB,点开一看好像把很多svg都编码进去了 这会影响到首屏加载速度吧,我希望svg进入页面之后再按需加载,怎么优化呢

  • 我们的项目有大约10个SpingBoot模块,我们使用maven来管理依赖项。10罐大小约2克。最近,我们需要减少jar的大小,以方便我们的客户部署。 我有了一个想法,提取common jar(不经常更改),比如spring-.jar、spring-boot-.jar、jodd*.jar、elasticsearch等,只要>=2个项目使用一个相同的依赖关系,我们称之为“common jar”。 如