Webpack相关

[jiangdexiao]

1. webpack 构建速度优化

webpack-构建速度优化

2.webpack-插件收集

2.webpack-插件收集

3.webpack-loader收集

3.webpack-loader收集

4.持续化构建

4.持续化构建

5.webpack工作原理

6.webpack分包打包

chunks: ENV === 'prod'|| ENV === 'sit'? ['antdesigns', 'commons','vendors.umi', 'umi']:['umi'],

export default function(config, { env, webpack, createCSSRule }){
  if( env === 'production'){

    config.merge({
      optimization: {
        minimize: true,
        splitChunks: {
          chunks: 'all', // 提取 chunks 的时候从哪里提取，如果为 all 那么不管是不是 async 的都可能被抽出 chunk，为 initial 则会从非 async 里面提取。
          automaticNameDelimiter: '.', // 文件名分隔符
          name: false,  // chunk 的名称，如果设置为固定的字符串那么所有的 chunk 都会被合并成一个，这就是为什么 umi 默认只有一个 vendors.async.js。
          minSize: 30000, // byte, == 30 kb，越大那么单个文件越大，chunk 数就会变少（针对于提取公共 chunk 的时候，不管再大也不会把动态加载的模块合并到初始化模块中）当这个值很大的时候就不会做公共部分的抽取了
          maxSize: 0, // 文件的最大尺寸，优先级：maxInitialRequest/maxAsyncRequests < maxSize < minSize，需要注意的是这个如果配置了，umi.js 就可能被拆开，最后构建出来的 chunkMap 中可能就找不到 umi.js 了。
          minChunks: 1, // 被提取的一个模块至少需要在几个 chunk 中被引用，这个值越大，抽取出来的文件就越小
          maxAsyncRequests: 10, // 在做一次按需加载的时候最多有多少个异步请求，为 1 的时候就不会抽取公共 chunk 了
          maxInitialRequests: 5, // 针对一个 entry 做初始化模块分隔的时候的最大文件数，优先级高于 cacheGroup，所以为 1 的时候就不会抽取 initial common 了。
          cacheGroups: {
            antdesigns: { // antdsign
              name: 'antdesigns',
              chunks: 'all',
              test: /(@antd|antd|@ant-design)/,
              priority: 10,
            },
            commons: {
              name: "commons",
              test: /[\\/]node_modules[\\/](lodash|moment|fingerprintjs2)[\\/]/,
              priority: -9,
              enforce: true,
            },
          }
        }
      }
    });
  }
}