Webpack Plugins例子

SplitChunksPlugin例子

例子一：

// index.js
import('./a') // 按需加载

//a.js
import 'react'

**结果：**将会生成一个包含react的独立的chunk，并且将会在导入时并行加载；
原因：

• 包含一个来自 node_modules 的模块
• react大于30kb
• 并行请求数量是2
• 不会影响到初次加载时的请求数
  react的代码并不会像项目代码一样频繁变化，所以分包有利于对这个包进行单独的缓存

例子二：

// entry.js
import('./a'); // 按需加载
import('./b');

// a.js
import './helpers'; // helper是40kb

// b.js
import './helpers';
import './more-helpers' // more-helpers同样也是40kb

**结果：**一个独立的chunk将会生成并包含有./helpers及其所有依赖项目。在加载时此chunk与original chunk并行加载
原因：

1. 这个chunk被两边import
2. helpers大于30kb
3. 并行加载请求数是2
4. 不会影响页面的初始加载

helpers独立分包将不会使得helpers产生重复下载。

示例配置1

module.exports = {
  //...
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          name: 'commons',
          chunks: 'initial',
          minChunks: 2
        }
      }
    }
  }
};

上面的配置会扩大初始bundles，并且建议当modules并不立即需要时使用dynamic imports(按需引入)

示例配置2

module.exports = {
  //...
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
};

这将会使你生成一个较大chunk包含了所有外部包，并建议只包含核心框架、工具包而动态的引入剩下的依赖

module.exports = {
  //...
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
          name: 'vendor',
          chunks: 'all',
        }
      }
    }
  }
};

这将会使react和react-dom一个独立分包。