搜索历史

{{ i+1 }}{{ v }}

搜索推荐

{{ i+1 }}{{ v }}

"如何利用webpack来优化前端性能？"

转载翻译原创

问答题 · 前端 · webpack · @{ formatTime(detail.create_time) }

如何利用webpack来优化前端性能？

压缩代码。uglifyJsPlugin 压缩js代码， mini-css-extract-plugin 压缩css代码
利用CDN加速，将引用的静态资源修改为CDN上对应的路径，可以利用webpack对于output参数和loader的publicpath参数来修改资源路径
删除死代码（tree shaking），css需要使用Purify-CSS
提取公共代码。webpack4移除了CommonsChunkPlugin (提取公共代码)，用optimization.splitChunks和optimization.runtimeChunk来代替

PS：写作不易，如要转裁，请标明转载出处。

猜你想看: 什么是bundle,什么是chunk，什么是module?; 什么是Tree-shaking？CSS可以Tree-shaking吗?; HMR是什么?; webpack Loader 和 Plugin 的区别？; webpack require.context的主要作用是什么？

回顶部