查看打包体积 优化白屏时间

下载

npm install --save-dev webpack-bundle-analyzer

npm install --save-dev webpack-bundle-analyzer

const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
module.exports = {
  configureWebpack: {
    plugins: [
      new BundleAnalyzerPlugin({
        // 这里可以设置一些选项
        analyzerMode: "static",
        analyzerPort: 8888,
        reportFilename: "report.html", // 打包后的报告文件名
        openAnalyzer: true, // 自动打开报告
        generateStatsFile: true, // 生成 stats.json 文件
        statsFilename: "stats.json", // stats 文件名称
      }),
    ],
    // 查看打包体积，打包可能会出现其他页面白屏，
    optimization: {
      splitChunks: {
        cacheGroups: {
          // 将超大库单独拆分
          echarts5: {
            test: /[\\/]node_modules[\\/]echarts5[\\/]/,
            name: "chunk-echarts5",
            chunks: "all",
            priority: 20,
          },
          echarts: {
            test: /[\\/]node_modules[\\/]echarts[\\/]/,
            name: "chunk-echarts",
            chunks: "all",
            priority: 20,
          },
        },
      },
    },
  },
};

const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
module.exports = {
  configureWebpack: {
    plugins: [
      new BundleAnalyzerPlugin({
        // 这里可以设置一些选项
        analyzerMode: "static",
        analyzerPort: 8888,
        reportFilename: "report.html", // 打包后的报告文件名
        openAnalyzer: true, // 自动打开报告
        generateStatsFile: true, // 生成 stats.json 文件
        statsFilename: "stats.json", // stats 文件名称
      }),
    ],
    // 查看打包体积，打包可能会出现其他页面白屏，
    optimization: {
      splitChunks: {
        cacheGroups: {
          // 将超大库单独拆分
          echarts5: {
            test: /[\\/]node_modules[\\/]echarts5[\\/]/,
            name: "chunk-echarts5",
            chunks: "all",
            priority: 20,
          },
          echarts: {
            test: /[\\/]node_modules[\\/]echarts[\\/]/,
            name: "chunk-echarts",
            chunks: "all",
            priority: 20,
          },
        },
      },
    },
  },
};