打包优化
本话题发布打包优化相关的问答文章和技术分享，将持续更新，为您推荐了36篇问答，访问即可查看更多精彩内容。
-
1
回答
24浏览
分包后首屏加载反而变慢了，是我的策略有问题吗？
最近在用 Webpack 做分包优化，原本以为把 node_modules 拆成 vendor 包、业务代码拆成 main，再配合动态 import 按需加载，首屏应该更快才对。结果上线后 Light...
-
1
回答
37浏览
预加载图片资源到底该用 link preload 还是 img hidden？
我在做一个图片画廊页面，首屏要快速展示缩略图，但高清大图需要预加载。试过用 <link rel="preload">，也试过用隐藏的 <img> 标签，但不确定哪种方式更靠谱，...
-
1
回答
34浏览
mini-css-extract-plugin 提取的 CSS 顺序为什么乱了？
我用 mini-css-extract-plugin 把样式抽离成单独的 CSS 文件，但发现最终生成的 CSS 顺序和我 import 的顺序不一致，导致样式覆盖出问题。明明我是先引入 reset....
-
1
回答
36浏览
Webpack 打包时 UglifyJS 报错怎么解决？
我用 Webpack 打包项目时，启用了 uglifyjs-webpack-plugin，结果一构建就报错，说“Unexpected token: punc (})”。我检查了 JS 代码没发现语法问...
-
2
回答
39浏览
Webpack插件里怎么拿到编译后的资源列表？
我正在写一个自定义的 Webpack Plugin，想在编译完成后获取所有输出的资源文件名（比如 main.js、index.css 这些），但不知道该在哪个钩子里拿，也不清楚具体怎么访问到这些信息。...
-
2
回答
32浏览
Webpack HMR为啥改了代码不自动刷新？
我本地开发时启用了 Webpack 的 HMR，但改了 JS 文件后页面没反应，控制台也没报错。明明之前好好的啊！ 我的 entry 里加了 'webpack/hot/dev-server'，devS...
-
2
回答
40浏览
HTTP缓存策略到底该怎么配才有效？
我给静态资源加了 Cache-Control: max-age=31536000，但每次刷新页面还是会重新请求，浏览器根本不走缓存，这是为啥？ 我试过在 Nginx 里这样配置： location ~...
-
1
回答
53浏览
如何正确设置关键CSS资源的加载优先级？
我在优化页面首屏加载速度时，发现关键CSS还是被浏览器低优先级加载了。明明用了preload，但Lighthouse还是提示“未发现关键请求链”。 我试过把关键样式内联，也试过用preload预加载外...
-
2
回答
34浏览
External外部化后CDN资源加载失败怎么办？
我在用Webpack做打包优化，把React和ReactDOM配置成external了，想用CDN加载。本地开发没问题，但部署到测试环境后页面直接白屏，控制台报错说React is not defin...
-
2
回答
55浏览
Flutter列表滚动卡顿怎么优化？
我用ListView.builder加载了上百条带图片的数据，滑动时明显掉帧，试过加const widget和cacheExtent也不太行。是不是图片没处理好？ 这是我在Item里用的样式： .it...
-
2
回答
36浏览
Webpack打包时如何合理拆分Chunk避免重复代码？
我用Webpack打包项目，发现多个页面引用了相同的第三方库（比如lodash和axios），但每个chunk里都包含了这些库的代码，体积特别大。 我试过用splitChunks配置，但效果不明显，甚...
-
1
回答
37浏览
Webpack 的 optimization.splitChunks 配置为什么没生效？
我项目里用了 Webpack 5，想把 node_modules 里的第三方库单独打包成 vendor.js，但配置了 splitChunks 后发现输出文件还是只有 main.js，没生成 vend...
-
2
回答
28浏览
Webpack打包后输出文件路径不对怎么办？
我用 Webpack 打包项目的时候，发现生成的 bundle.js 路径总是和我配置的 output.path 不一致。我在本地开发时没问题，但一构建到服务器上，引用的路径就变成根目录了，导致资源 ...
-
1
回答
35浏览
微前端子应用加载太慢，怎么优化首屏性能？
我们用 qiankun 搭了个微前端项目，主应用加载很快，但子应用首次进入时白屏好几秒，用户体验很差。试过动态 import 和预加载，但效果不明显。 子应用入口是通过 script 标签注入的，像这...
-
1
回答
57浏览
Webpack 中 resolve.alias 配置后为啥还是找不到模块？
我用 Webpack 搭了个项目，想通过 resolve.alias 简化 import 路径，但配置完之后一直报错说找不到模块，明明路径是对的啊？ 比如我把 @ 指向 src 目录，然后在组件里写 ...
-
2
回答
42浏览
Webpack5打包体积过大，怎么优化才能减小vendor.js？
最近项目升级到Webpack5后，发现打包出来的 vendor.js 超过2MB，首屏加载特别慢。我已经用了 SplitChunksPlugin 做了基础拆分，但效果不明显。试过把 node_modu...
-
2
回答
186浏览
Webpack 打包后体积太大怎么办？
我用 Webpack 打了个 React 项目，结果 vendor.js 快 2MB 了，页面加载特别慢，有没有什么靠谱的优化方法？ 我已经试过配置 splitChunks，但效果不明显。还用了 co...
-
2
回答
36浏览
Code Splitting 后 CSS 重复加载怎么解决？
我用 Webpack 做了路由级别的 Code Splitting，但发现每个 chunk 都打包了一份相同的全局样式，导致页面切换时样式重复加载甚至闪烁。 比如下面这段全局重置样式，在多个入口里都被...
-
2
回答
41浏览
Node.js 后端接口响应慢，前端 Vue 页面加载卡顿怎么办？
我用 Node.js 写了个接口，返回用户列表数据，但每次请求都要 2-3 秒，导致 Vue 页面白屏很久。已经试过加缓存，但效果不明显，是不是哪里写得不对？ 前端是用 Vue 3 + Axios 请...
-
2
回答
33浏览
Webpack打包后体积太大，怎么有效压缩JS和CSS？
我们项目用的是 Webpack 5 + React，最近发现首屏加载特别慢，看了下打包后的 main.js 居然有 2.3MB（未压缩）。我已经开了 mode: 'production'，也试过用 T...
