前端优化--webpack等

• https://juejin.cn/post/6844904150988226574

splitChunks

const path = require('path')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

// const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
function resolve (dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  productionSourceMap: false,
  lintOnSave: false,
  devServer: {
    port: '8080',
    open: true,
    hot: true,
    disableHostCheck: true,
    clientLogLevel: 'warning',
    overlay: {
      warnings: false,
      errors: true
    }
  },
  configureWebpack: {
    devtool: 'source-map',
    name: 'dfdf',
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    plugins: [
      // new UglifyJsPlugin()
    ]
  },
  chainWebpack: config => {
    // config.plugin('BundleAnalyzerPlugin').use(BundleAnalyzerPlugin).tap(() => [
    //   {
    //     rel: 'BundleAnalyzerPlugin',
    //     analyzerMode: 'server', // 'server': 启动端口服务；'static': 生成 report.html；'disabled': 配合 generateStatsFile 使用；
    //     generateStatsFile: false, // 是否生成stats.json文件
    //     analyzerHost: '127.0.0.1',
    //     analyzerPort: '8877',
    //     reportFilename: 'report.html',
    //     defaultSizes: 'parsed',
    //     openAnalyzer: false,
    //     statsFilename: 'stats.json',
    //     statsOptions: null,
    //     excludeAssets: null
    //   }])
    // 分包处理--加快前端速度
    config.optimization.splitChunks({
      chunks: 'all',
      cacheGroups: {
        html2canvas: {
          name: 'chunk-html2canvas',
          test: /[/]node_modules[/]_?html2canvas(.*)/,
          priority: 10
        },
        swiper: {
          name: 'chunk-swiper',
          test: /[/]node_modules[/]_?swiper(.*)/,
          priority: 10
        },
        vant: {
          name: 'chunk-vant',
          priority: 20,
          // 正则规则验证，如果符合就提取 chunk
          test: /[/]node_modules[/]_?vant(.*)/
        },
        commons: {
          name: 'chunk-commons', // 要缓存的 分隔出来的 chunk 名称
          minChunks: 2, // 最小 chunk ，默认1
          priority: 5, // 缓存组优先级
          chunks: 'initial', // 必须三选一： "initial" | "all" | "async"(默认就是async)
          reuseExistingChunk: true// 可设置是否重用该chunk
        },
        corejs: {
          name: 'chunk-corejs',
          test: /[/]node_modules[/]_?core-js(.*)/,
          priority: 10
        }
      }
    })
    // 添加新的svg-sprite-loader处理svgIcon
    config.module
      .rule('svgIcon')
      .test(/\.svg$/)
      .include
      .add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader') // 一定要添加use
      .loader('svg-sprite-loader')
      .tap(options => {
        options = {
          symbolId: 'icon-[name]'
        }
        return options
      })

    // 原有的svg图像处理loader添加exclude
    config.module
      .rule('svg')
      .exclude
      .add(resolve('src/icons'))
      .end()
    config
      .plugin('html')
      .tap(args => {
        args[0].title = '珍客企微版'
        return args
      })
  }
}