webpack 了解性能优化的几个点

Happyileaf
864 阅读3分钟

「这是我参与11月更文挑战的第13天，活动详情查看：2021最后一次更文挑战」

webpack性能优化

之前了解到的webpack是一个构建工具，然后利用webpack可以提高性能。至于为什么可以提高性能，如何提高性能一直没有了解。有一次面试的时候被面试官问得尬住了。这篇文章主要是对webpack的性能优化做一个简单的介绍。

webpack的性能优化主要可以分为两个部分。

  • 开发环境性能优化
  • 生产环境性能优化

一、开发环境性能优化

  1. 优化打包构建速度
  • HMR HMR: hot module replacement 热模块替换 / 模块热替换 也叫热更新。
    作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块） 可以极大提升构建速度
  • 样式文件：可以使用HMR功能：因为style-loader内部实现了~
  • js文件：默认不能使用HMR功能 --> 需要修改js代码，添加支持HMR功能的代码
  • 注意：HMR功能对js的处理，只能处理非入口js文件的其他文件。
  • html文件: 默认不能使用HMR功能.同时会导致问题：html文件不能热更新了~ （不用做HMR功能）
  • 解决：修改entry入口，将html文件引入
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true,
    // 开启HMR功能
    // 当修改了webpack配置，新配置要想生效，必须重新webpack服务
    hot: true
  }
  1. 优化代码调试
  • source-map

source-map: 一种提供源代码到构建后代码映射技术（如果构建后代码出错了，通过映射可以追踪源代码错误）

内联和外部的区别：

  1. 外部生成了文件，内联没有
  2. 内联构建速度更快

开发环境：速度快，调试更友好
速度快(eval>inline>cheap>...)
eval-cheap-souce-map
eval-source-map
调试更友好
souce-map
cheap-module-souce-map
cheap-souce-map

eval-source-map / eval-cheap-module-souce-map

生产环境：源代码要不要隐藏? 调试要不要更友好
内联会让代码体积变大，所以在生产环境不用内联
nosources-source-map 全部隐藏
hidden-source-map 只隐藏源代码，会提示构建后代码错误信息

source-map / cheap-module-souce-map

devtool: 'eval-source-map'

二、生产环境性能优化

  • 优化打包构建速度
    • oneOf
    • babel缓存
    • 多进程打包
    • externals
    • dll
  • 优化代码运行的性能
    • 缓存(hash-chunkhash-contenthash)
    • tree shaking
    • code split
    • 懒加载/预加载
    • pwa

缓存：
babel缓存

cacheDirectory: true

让第二次打包构建速度更快

文件资源缓存
hash: 每次wepack构建时会生成一个唯一的hash值。
问题: 因为js和css同时使用一个hash值。如果重新打包，会导致所有缓存失效。（可能我却只改动一个文件）
chunkhash：根据chunk生成的hash值。如果打包来源于同一个chunk，那么hash值就一样
问题: js和css的hash值还是一样的。因为css是在js中被引入的，所以同属于一个chunk
contenthash: 根据文件的内容生成hash值。不同文件hash值一定不一样

让代码上线运行缓存更好使用

avatar
文章
阅读
粉丝