10天掌握webpack 4.0 优化篇（5）抽离公共代码

我们在开发多个页面的项目的时候，有时候会在几个页面中引用某些公共的模块，这些公共模块多次被下载会造成资源浪费，如果把这些公共模块抽离出来只需下载一次之后便缓存起来了，这样就可以避免因重复下载而浪费资源

场景：

项目中有 a.js b.js index.js other.js 文件

index.js 和 other.js 同样引用了 a.js b.js 并且都使用了第3方库 jquery

代码如下：

a.js

console.log('a' + '--------')

b.js

console.log('b' + '--------')

index.js

import './a'
import './b'
console.log('index.js')
import $ from 'jquery'
console.log($)

other.js

import './a'
import './b'
console.log('other.js')
import $ from 'jquery'
console.log($)

配置webpack.config.js文件

  optimization: {
    //分割代码快
    splitChunks: {
      // 缓存组
      cacheGroups: {
        // 公共模块
        common: {
          chunks: 'initial',
          minSize: 0,
          minChunks: 2
        },
        vendor: {
          priority: 1,//添加权重
          test: /node_modules/,//把这个目录下符合下面几个条件的库抽离出来
          chunks: 'initial',//刚开始就要抽离
          minSize: 0,//大小大于0字节的时候需要抽离出来
          minChunks: 2,//重复2次使用的时候需要抽离出来
        }
      }
    }
  },

const path = require('path')
let webpack = require('webpack')
let htmlWebpckPlugin = require('html-webpack-plugin')
module.exports = {
  mode: 'production',
  optimization: {
    //分割代码快
    splitChunks: {
      // 缓存组
      cacheGroups: {
        // 公共模块
        common: {
          chunks: 'initial',
          minSize: 0,
          minChunks: 2
        },
        vendor: {
          priority: 1,//添加权重
          test: /node_modules/,//把这个目录下符合下面几个条件的库抽离出来
          chunks: 'initial',//刚开始就要抽离
          minSize: 0,//大小大于0字节的时候需要抽离出来
          minChunks: 2,//重复2次使用的时候需要抽离出来
        }
      }
    }
  },
  entry: {
    index: './src/index.js',
    other: './src/other.js',
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new htmlWebpckPlugin({
      template: './public/index.html'
    }),
    new webpack.IgnorePlugin(/^./locale/, /moment$/)
  ],
  module: {
    noParse: /jquery|lodash/, // 正则表达式
    rules: [
      {
        test: /.js?$/,
        include: path.join(__dirname, 'src'),
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            "presets": [
              "@babel/preset-env",
              "@babel/preset-react",
            ]
          }
        }
      }
    ]
  },

}