打包优化
本话题发布打包优化相关的问答文章和技术分享，将持续更新，为您推荐了13篇问答，访问即可查看更多精彩内容。
-
2
回答
14浏览
图片懒加载没效果，怎么调整资源加载优先级？
大家好，我在做首屏优化时发现图片加载还是卡顿，虽然用了loading="lazy"属性，但页面加载时图片还是阻塞了其他资源。我尝试给图片加了loading="lazy"和decoding="async...
-
2
回答
29浏览
Webpack的Source Map配置后为什么调试时显示的代码行号不对？
我在项目里用了source-map，但控制台报错的行号还是指向打包后的bundle.js，而不是源代码文件。比如这个函数报错时显示的是第3421行，但实际代码只有3行： function calcul...
-
1
回答
52浏览
为什么Webpack配置了Tree Shaking后，某些未引用的代码依然被打包进去？
我在项目里配置了Webpack的Tree Shaking，但发现未使用的模块还是被打包了。比如这个组件里只用了utils.js的add函数： // component.jsx import { add...
-
2
回答
28浏览
CSS拆分后为什么Chunk还是没变小？
我在用Webpack打包项目时，把组件的CSS单独抽离成动态导入的文件，但生产环境里这些CSS还是被打包到vendors_chunk里了。我按文档写了这样的CSS： /* Button.module....
-
2
回答
26浏览
Webpack Bundle分析时，为什么第三方库占比过大却看不到具体文件？
在用webpack-bundle-analyze分析打包结果时，第三方库显示占比60%但点击后全是vendor_chunk_0.js这样的抽象文件名，根本看不出是哪个库占的空间？ 我试过用webpac...
-
1
回答
19浏览
为什么Webpack打包时提示”Module not found: Error: Can’t resolve ‘./utils'”？
我在用Webpack打包项目时遇到了奇怪的问题，明明utils.js就在当前目录下，但打包时一直报Module not found错误。配置文件里已经设置了resolve.extensions: ["...
-
2
回答
82浏览
为什么用了cache-loader还是每次构建都重新编译？
在Vue项目里按文档把cache-loader加到loader链开头了，但每次运行npm run build都会重新编译所有文件。之前尝试过删掉node_modules和dist目录，甚至改过load...
-
2
回答
66浏览
Service Worker注册成功但无法拦截请求，是什么原因？
我在给PWA应用添加Service Worker时遇到了奇怪的问题。按照教程写好了fetch事件监听，控制台也显示注册成功，但刷新页面时网络面板显示所有请求都是直接走的网络，没有触发缓存逻辑。已经检查...
-
2
回答
78浏览
使用mini-css-extract-plugin打包后CSS样式在React组件里不显示怎么办？
刚把项目里的style-loader换成mini-css-extract-plugin，结果页面样式全没了。之前用style-loader没问题，现在打包后的css文件能生成，但浏览器里组件样式就是不...
-
2
回答
35浏览
小程序页面频繁渲染导致卡顿，怎么优化？
在开发小程序时遇到一个性能问题，页面列表滑动时特别卡顿。我尝试过用setData防抖和减少数据更新频率，但效果不明显。比如这个列表渲染逻辑： Page({ onScroll() { this.setD...
-
1
回答
90浏览
Webpack代码分割配置后，vendors chunk为什么还是很大？
在优化项目时，我按文档配置了SplitChunks，但打包后的vendors chunk依然有800KB。我尝试把minSize设成0，调整cacheGroups的test正则，甚至手动命名split...
-
1
回答
41浏览
预获取（prefetch）在单页应用中如何正确使用？为什么我的页面加载反而变慢了？
我在开发一个Vue单页应用时，尝试给下一页的图片列表页面添加预获取。按文档写了类似下面的代码，但发现首页加载反而变慢了，控制台显示预加载了大量图片资源。这是不是预获取用错了？ <template...
-
2
回答
35浏览
webpack配置source-map后为什么看不到原始代码？
大家好，我在webpack里设置了devtool: 'source-map'，但浏览器调试时还是显示打包后的代码，原始ES6语法全编译成ES5了，这是为啥？ 我已经在output里指定pathinfo...
