webpack4之代码分割splitChunks和压缩优化

最新推荐文章于 2024-08-21 08:21:25 发布

学崖无海

最新推荐文章于 2024-08-21 08:21:25 发布

阅读量4.5k

点赞数 1

分类专栏： webpack 文章标签： webpack4 splitChunks

本文链接：https://blog.csdn.net/xueyawuhai/article/details/102489855

版权

本文介绍了在webpack4中如何使用splitChunks进行代码分割，包括默认配置与自定义配置的示例，以及如何实现代码压缩，包括js、css和html的压缩。此外，还提到了其他优化策略，如resolve配置、图片处理和懒加载等。

摘要由CSDN通过智能技术生成

我们打包出来的js文件，只要修改或增加了内容，就会导致入口js文件的hash变化，从而重新打包。为了提高打包速度，每次变化仅仅是重新打包自定义代码部分，webpack4提供了optimization.splitChunks

回顾一下：webpack3时代，项目的代码分离抽取出来，是这样子的：使用new webpack.optimize.CommonsChunkPlugin，分别分离出第三方库，webpack运行时的代码文件，自定义公共代码部分

    new webpack.optimize.ModuleConcatenationPlugin(),
    // vendor，分离出的第三方库：node_modules的模块，这些是固定的
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks (module) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    // 分离出的运行时的代码，这些经常有修改，经常要webpack重新打包
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      minChunks: Infinity
    }),
    // 公共模块代码
    new webpack.optimize.CommonsChunkPlugin({
      name: 'app',
      async: 'vendor-async',
      children: true,
      minChunks: 3//模块被多少个chunk公共引用才被抽取出来成为commons chunk
    })

webpack4的代码分离splitChunks

自从webpack4以来，分离代码用的是optimization.splitChunks
官网SplitChunksPlugin说明

Since webpack v4, the CommonsChunkPlugin was removed in favor of optimization.splitChunks.

这个splitChunks,默认做好相关配置了

> New chunk can be shared OR modules are from the node_modules folder
> 模块被重复引用或者来自node_modules中的模块

> New chunk would be bigger than 30kb (before min+gz) 
> 在压缩前最小为30kb

>