前端性能优化-webpack构建优化

前言

本文主要总结 webpack 构建优化相关的事情

PS: webpack 的每次更新都会带来很多的新特性,因此学习新知识的时候,不要专注于流程的配置和调参。因为流程终会简化,参数(API)终会升级。要抓大放小,把精力放在最核心的内容上,因为核心的思想是最不容易过时的.

webpack 性能瓶颈

webpack 优化主要分为两个方向:

构建速度优化

  • 使用最新版本的 webpack,一般融合了最佳实践
  • 文件过滤:使用 include 和 exclude, ignorePlugin 等
  • 优化 resolve.modules 配置: 合理配置 resolve.modules,指定 Webpack 去哪些目录下寻找模块。避免过多的目录会加速模块的查找速度。
  • 优化 loader(减少 loader 链的复杂性, 如 thread-loader 或 cache-loader)
  • 利用多核 CPU 多进程构建( HappyPack 或者 Webpack 5 提供的 cache 和 parallel 选项)
  • 缓存(DLL 等空间换时间的方案)
  • 使用更轻量的 SourceMap(cheap-module-source-map)
  • 代码分割: 将代码拆分成小块,只加载在当前页面上需要的部分。
  • 合理配置打包版本
代码分割(拆包 splitChunks)

在不配置拆包的情况下,Webpack 会将所有的资源都打包在一个 js 文件中,这无疑会让请求时候的响应体积变得非常大,从而降低加载速度。

同时,不配置拆包,会在首次加载的时候加载一些无关的资源,浪费了一次宝贵的请求。合理配置拆包,让每次请求都只请求对应的核心资源,从而达到按需加载的程度。

拆包通常的逻辑:

  • 业务代码和第三方依赖进行拆分
  • 对于第三方依赖:
    • 将版本经常变动的与版本不怎么变动的进行拆分
    • 版本不怎么变动的依赖可以合理配置 CDN
  • 对于业务代码:
    • 将业务模块和公共模块进行拆分
    • 业务模块也根据调用的次数进行拆分
    • 将首屏模块单独进行拆分
合理配置打包版本

代码体积优化

  • Three shaking 移除项目中未使用的代码
  • 压缩代码: 如 terser-webpack-plugin, css-minimizer-webpack-plugin
  • 分割代码(Code Splitting)
  • 动态导入(Dynamic Import)
    • import('some-module').then(({ someModule }) => {// 使用 someModule});
  • 提取公共模块: 通过 Webpack 的 CommonsChunkPlugin 或 optimization.splitChunks 来提取公共模块,减小重复模块的体积
  • 图像、字体等资源优化

掌握优化策略,然后用到的时候直接通过官方文档查找最新的 API 即可或者搜索关键字即可

参考

本文首发于个人博客前端开发笔记,由于笔者能力有限,文章难免有疏漏之处,欢迎指正

相关推荐
DN金猿9 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子10 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
志存高远6622 分钟前
Kotlin 的 suspend 关键字
前端
www_pp_35 分钟前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
layman05281 小时前
node.js 实战——(Http 知识点学习)
http·node.js
2501_915373881 小时前
Node.js 学习入门指南
学习·node.js
天天扭码1 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛1 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
장숙혜1 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang1 小时前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet