webpack4 optimization配置

27 篇文章 0 订阅
25 篇文章 0 订阅

从webpack4开始官方移除了commonchunk插件,改用了optimization属性进行更加灵活的配置,这也应该是从V3升级到V4的代码修改过程中最为复杂的一部分,下面的代码即是optimize.splitChunks 中的一些配置参考

module.exports = {
  optimization: {
    runtimeChunk: {
      name: 'manifest'
    },
    minimizer: true, // [new UglifyJsPlugin({...})]
    splitChunks:{
      chunks: 'async',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      name: false,
      cacheGroups: {
        vendor: {
          name: 'vendor',
          chunks: 'initial',
          priority: -10,
          reuseExistingChunk: false,
          test: /node_modules\/(.*)\.js/
        },
        styles: {
          name: 'styles',
          test: /\.(scss|css)$/,
          chunks: 'all',
          minChunks: 1,
          reuseExistingChunk: true,
          enforce: true
        }
      }
    }
  }
}

 

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
optimizationwebpack 的一个配置项,用于优化打包后的代码。 optimization 中包含了一些优化的配置项,例如: - minimize:是否开启代码压缩,默认为 true; - minimizer:指定使用哪些压缩插件,例如 UglifyJsPlugin、TerserPlugin 等; - splitChunks:用于代码分割,提取公共代码,避免重复打包; - runtimeChunk:用于提取每个入口文件的运行时代码,避免重复打包。 其中,splitChunks 和 runtimeChunk 都是用于代码分割的配置项。 splitChunks 配置项的默认值如下: ``` splitChunks: { chunks: 'async', minSize: 30000, maxSize: 0, minChunks: 1, maxAsyncRequests: 5, maxInitialRequests: 3, automaticNameDelimiter: '~', name: true, cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, priority: -10 }, default: { minChunks: 2, priority: -20, reuseExistingChunk: true } } } ``` 这个配置项会将所有符合条件的模块打包成一个单独的文件,并且自动处理模块间的依赖关系。例如,如果有两个入口文件都引用了同一个模块,webpack 会将这个模块提取成一个单独的文件,避免重复打包。 runtimeChunk 配置项的默认值如下: ``` runtimeChunk: { name: entrypoint => `runtime-${entrypoint.name}` } ``` 这个配置项会将每个入口文件的运行时代码提取成一个单独的文件,避免重复打包。例如,如果有两个入口文件都使用了相同的第三方库,webpack 会将这个库的代码提取成一个单独的文件,并且将每个入口文件的运行时代码提取成另一个单独的文件。这样做的好处是,当我们修改了某个入口文件的代码时,只需要重新打包这个入口文件和它对应的运行时代码,而不需要重新打包第三方库的代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值