代码分割和异步加载 #

//1. 引入插件
const ESDynamicImportPlugin = require('@extscreen/es3-dynamic-import-plugin');
module.exports = {
  output: {
    //2.设置公共路径为 ./，不可更改路径
    publicPath: './',
  },
  plugins: [
    //3. 注册插件
    new ESDynamicImportPlugin(),
  ],
  optimization: {
    //4.分包方案
    splitChunks: {
      chunks: 'all',
      minSize: 20000,
      minRemainingSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
          //注意: 必须命名为"vendor.android.js"
          filename: "vendor.android.js"
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
}