类别:性能优化 / 日期:2023-01-12 / 浏览:310 / 评论:0
⽤webpack 优化前端性能是指优化 webpack 的输出结果,让打包的最 终结果在浏览器运⾏快速⾼效。
压缩代码:删除多余的代码、注释、简化代码的写法等等⽅式。可以 利⽤webpack的 UglifyJsPlugin 和 ParallelUglifyPlugin 来压缩 JS⽂件, 利⽤ cssnano (css-loader?minimize)来压缩 css
利⽤CDN 加速: 在构建过程中,将引⽤的静态资源路径修改为 CDN 上 对应的路径。可以利⽤webpack 对于 output 参数和各 loader 的 publicPath 参数来修改资源路径
Tree Shaking: 将代码中永远不会⾛到的⽚段删除掉。可以通过在启 动 webpack 时追加参数 --optimize-minimize 来实现
Code Splitting: 将代码按路由维度或者组件分块(chunk),这样做 到按需加载,同时可以充分利⽤浏览器缓存
提取公共第三⽅库: SplitChunksPlugin 插件来进⾏公共模块抽取, 利⽤浏览器缓存可以⻓期缓存这些⽆需频繁变动的公共代码
发表评论 / 取消回复