vue打包后，首次加载慢问题(js过大，分包打包)

vue.config.js文件：

1.图片过大

chainWebpack: (config) => {

    const imageRule = config.module.rule("images");
    imageRule.uses.clear();
    imageRule
      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
      .use("url-loader")
      .loader("url-loader")
      .options({
        esModule: false,
        name: "img/[name].[hash:8].[ext]",
        limit: 1000, //这里很重要，图片大小超1000就单独打包
      });

    config.plugins.delete("prefetch");
},

2.拆分js

configureWebpack: config => {
    if (process.env.NODE_ENV !== 'production') return;
    return {
      plugins: [
        new BundleAnalyzerPlugin(
            {
              analyzerMode: 'server',
              analyzerHost: '127.0.0.1',
              analyzerPort: 8889,
              reportFilename: 'report.html',
              defaultSizes: 'parsed',
              openAnalyzer: true,
              generateStatsFile: false,
              statsFilename: 'stats.json',
              statsOptions: null,
              logLevel: 'info'
            }
        ),

       

        new CompressionWebpackPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: new RegExp('\\.(js|css)$'),
          threshold: 10240,
          minRatio: 0.8
        }),

      ],
      output: {
        // 微应用的包名，这里与主应用中注册的微应用名称一致
        library: `${packageName}-[name]`, // 将你的 library 暴露为所有的模块定义下都可运行的方式
        libraryTarget: "umd", // 这里设置为umd意思是在 AMD 或 CommonJS 的 require 之后可访问
        // jsonpFunction: `webpackJsonp_${packageName}`, // webpack用来异步加载chunk的JSONP 函数
      },

      // 当我们运行项目并且打包的时候，会发现chunk-vendors.js这个文件非常大，那是因为webpack将所有的依赖全都压缩到了这个文件里面，这时我们可以将其拆分，将所有的依赖都打包成单独的js。
      optimization : {
        mergeDuplicateChunks: true, // 合并相同的 chunk
        // runtimeChunk: 'manifest',
        // runtimeChunk: 'single',
        splitChunks: {
          chunks: 'all',//表示将选择哪些块进行优化。提供字符的有效值为all、async和initial,默认是仅对异步加载的块进行分割。
          minSize: 100 * 1024,//模块大于minSize时才会被分割出来。默认100k
          maxSize: 0,//生成的块的最大大小，如果超过了这个限制，大块会被拆分成多个小块。
          minChunks: 1,//拆分前必须共享模块的最小块数。
          maxAsyncRequests: 60,//按需加载时并行请求的最大数目。
          maxInitialRequests: 5,//入口点的最大并行请求数
          automaticNameDelimiter: '~',//默认情况下，webpack将使用块的来源和名称（例如vendors~main.js）生成名称。此选项允许您指定要用于生成的名称的分隔符。
          automaticNameMaxLength: 30,//允许为SplitChunksPlugin生成的块名称的最大长度
          name: true,
          cacheGroups: {
            libs: { // 第三方库
              name: 'chunk-libs',
              test: /[\\/]node_modules[\\/]/, // 请注意'[\\/]'的用法，是具有跨平台兼容性的路径分隔符
              priority: 10, // 优先级，执行顺序就是权重从高到低
              chunks: 'initial' // 只打包最初依赖的第三方
            },
            elementUI: { // 把 elementUI 单独分包
              name: 'chunk-elementUI',
              test: /[\\/]node_modules[\\/]_?element-ui(.*)/,
              priority: 12, // 权重必须比 libs 大，不然会被打包进 libs 里
              reuseExistingChunk: true,
              enforce: true
            },
           /* elementUI: {
              priority: 20,
              name: 'element-ui',
              test: /element-ui/,
              reuseExistingChunk: true
            },*/
            xlsxJs: {
              name: 'chunk-xlsxJs',
              test: /[\\/]node_modules[\\/]_?xlsx(.*)/,
              priority: 13,
              reuseExistingChunk: true,
              enforce: true
            },
            pdfJs: {
              name: 'chunk-pdfJs',
              test: /[\\/]node_modules[\\/]_?pdf+(.*)/,
              priority: 14,
              reuseExistingChunk: true,
              enforce: true
            },
            bpmnJs: {
              name: 'chunk-bpmnJs',
              test: /[\\/]node_modules[\\/]_?bpmn(.*)/,
              priority: 15,
              reuseExistingChunk: true,
              enforce: true
            },
            components: {
              chunks: 'all',
              test: /[\\/]src[\\/]components[\\/]/,
              priority: 21,
              name: 'chunk-components',
            },
            mixin: {
              chunks: 'all',
              test: /[\\/]src[\\/]mixin[\\/]/,
              priority: 22,
              name: 'chunk-mixin',
            },
            orderCenter: {
              chunks: 'all',
              test: /[\\/]src[\\/]views[\\/]orderCenter[\\/]/,
              name: 'chunk-orderCenter',
              priority: 23,
            },
            vehicleCenter: {
              chunks: 'all',
              test: /[\\/]src[\\/]views[\\/]vehicleCenter[\\/]/,
              name: 'chunk-vehicleCenter',
              priority: 24,
            },
            workFlow: {
              chunks: 'all',
              test: /[\\/]src[\\/]views[\\/]workFlow[\\/]/,
              name: 'chunk-workFlow',
              priority: 25,
            },
            systemSettings: {
              chunks: 'all',
              test: /[\\/]src[\\/]views[\\/]systemSettings[\\/]/,
              name: 'chunk-systemSettings',
              priority: 26,
            },
            commonsJS: {
              chunks: 'all',
              test: /[\\/]src[\\/]js[\\/]/,
              name: 'chunk-commonsJS',
              minChunks: 2,
              maxInitialRequests: 5,
              minSize: 0,
              priority: 27,
            },
            styles: {
              name: 'styles',
              test: /[\\/]src[\\/]\.(sa|sc|c)ss$/,
              chunks: 'all',
              priority: 28,
              enforce: true
            },
            svgIcon: {
              name: 'chunk-svgIcon',
              // 函数匹配示例，把 svg 单独拆出来
              test(module) {
                // `module.resource` 是文件的绝对路径
                // 用`path.sep` 代替 / or \，以便跨平台兼容
                // const path = require('path') // path 一般会在配置文件引入，此处只是说明 path 的来源，实际并不用加上
                return (
                    module.resource &&
                    module.resource.endsWith('.svg') &&
                    module.resource.includes(`${ path.sep }icons${ path.sep }`)
                )
              },
              priority: 29
            },

            vendor: {
              name: `chunk-vendors`,
              test: /[\\/]node_modules[\\/]/,//控制此缓存组选择的模块。省略它将选择所有模块。它可以匹配绝对模块资源路径或块名称。匹配块名称时，将选择块中的所有模块。
              minChunks: 1,
              // maxInitialRequests: 12,
              maxAsyncRequests: 5,
              minSize: 100 * 1024,
              maxSize: 5 * 1000 * 1024,
              priority: 30//一个模块可以属于多个缓存组,模块出现在优先级最高的缓存组中
            },
            common: {
              name: `chunk-common`,
              minChunks: 2,
              priority: 40,
              chunks: 'initial',
              reuseExistingChunk: true//如果当前块包含已经从主包中分离出来的模块，那么该模块将被重用，而不是生成新的模块
            },
          }
        }
      }



    }
  },