详解webpack构建优化

本文详细探讨了webpack构建的优化策略,包括使用webpackbar、speed-measure-webpack-plugin和webpack-bundle-analyzer等分析工具,以及多进程构建(如happypack和thread-loader)、缓存利用(如cache-loader和hard-source-webpack-plugin)、include/exclude规则、动态链接库、代码分割、动态import、treeShaking、代码压缩、雪碧图和gzip压缩等优化技巧,旨在提升构建速度并减小构建体积。
摘要由CSDN通过智能技术生成

当项目越来越复杂时,会面临着构建速度慢和构建出来的文件体积大的问题。webapck构建优化对于大项目是必须要考虑的一件事,下面我们就从速度和体积两方面来探讨构建优化的策略。

分析工具

在优化之前,我们需要了解一些量化分析的工具,使用它们来帮助我们分析需要优化的点。

webpackbar

webpackbar可以在打包时实时显示打包进度。配置也很简单,在plugins数组中加入即可:

const WebpackBar = require('webpackbar')
module.exports = {
   
  plugins: [    ...    new WebpackBar()  ]
}

speed-measure-webpack-plugin

使用speed-measure-webpack-plugin可以看到每个loader和plugin的耗时情况。

和普通插件的使用略有不同,需要用它的wrap方法包裹整个webpack配置项。

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const smp = new SpeedMeasurePlugin()
module.exports = smp.wrap({
   
  entry: './src/main.js',
  ...
})

打包后,在命令行的输出信息如下,我们可以看出哪些loader和plugin耗时比较久,然后对其进行优化。

image,.png

webpack-bundle-analyzer

webpack-bundle-analyzer以可视化的方式让我们直观地看到打包的bundle中到底包含哪些模块内容,以及每一个模块的体积大小。我们可以根据这些信息去分析项目结构,调整打包配置,进行优化。

在plugins数组中加入该插件。构建完成后,默认会在http://127.0.0.1:8888/展示分析结果。

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
   
  plugins: [    ...    new BundleAnalyzerPlugin()  ]
}

image.png webpack-bundle-analyzer会计算出模块文件在三种情形下的大小:

  • stat:文件未经过任何转换的原始大小
  • parsed:文件经过转换后的输出大小(比如babel-loader转换ES6->ES5、UglifyJsPlugin压缩等等)
  • gzip:parsed后的文件,经过Gzip压缩的大小
    使用speed-measure-webpack-pluginwebpack-bundle-analyzer本身也会增加打包时间(webpack-bundle-analyzer特别耗时),所以建议这两个插件在开发分析时使用,而在生产环境去掉。

image.png

优化构建速度

多进程构建

运行在Node.js之上的 Webpack 是单线程的,就算有多个任务同时存在,它们也只能一个一个排队执行。当项目比较复杂时,构建就会比较慢。如今大多数CPU都是多核的,我们可以借助一些工具,充分释放 CPU 在多核并发方面的优势。参考webpack视频讲解:进入学习

比较常见的有happypackthread-loader

happypack

happypack能够将构建任务分解给多个子进程去并发执行,子进程处理完后再把结果发送给主进程。使用配置如下,就是把原有的loader的配置转移到happyPack中去处理。

const Happypack = require('happypack')
module.exports = {
   
  module:{
   
    rules:[
      {
   
        test: /\.js$/,
        use: 'happypack/loader?id=babel'   //问号后面的查询参数指定了处理这类文件的HappyPack实例的名字
      },
    ]
  },
  plugins:[
    new Happypack({
   
      id: 'babel',     //HappyPack实例名,对应上面rules中的“id=babel”
      use
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值