Webpack 打包分析

1. 安装分析器 yarn add -D webpack-bundle-analyzer

2. 添加配置 webpack.config.js

   const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
   ...
   plugin: [
     new BundleAnalyzerPlugin();
   ]
   

3. 参考 Webpack Document

   entry: [
     // 'lib.min': ['react', 'react-dom'],
     gui: './src/playground/index.jsx'
   ],
   stats: 'errors-warnings', // 编译打包时仅显示 错误和警告
   ...
   optimization: {
     splitChunks: {
       chunks: 'all', // 初始化异步和非异步导入
       cacheGroups: {
         // 切片规则
         vendors: {
           test: /[\\/]node_modules[\\/]/, // 文件位置
           name: 'vendors', // 切片文件名，建议与规则名称相同
           minSize: 50000, // 文件分片尺寸条件
           minChunks: 1, // 最少切片数
           chunks: 'initial', // 仅切片非异步导入
           priority: 1 // 优先处理级别，防止重复切片
         },
         utils: {
           name: 'utils',
           priority: 10,
           test: /[\\/]node_modules[\\/](text-encoding|@scratch|twgl\.js)[\\/]/,
           enforce: true,
           reuseExistingChunk: true
         },
         l10n: {
           name: 'l10n',
           priority: 20,
           test: /[\\/]node_modules[\\/]scratch-l10n[\\/]/,
           enforce: true,
           reuseExistingChunk: true
         },
         fonts: {
           name: 'fonts',
           priority: 20,
           test: /[\\/]node_modules[\\/]scratch-render-fonts[\\/]/,
           enforce: true,
           reuseExistingChunk: true
         },
         paint: {
           name: 'paint',
           priority: 20,
           test: /[\\/]node_modules[\\/]scratch-paint[\\/]/,
           enforce: true,
           reuseExistingChunk: true
         },
         vm: {
           name: 'vm',
           priority: 20,
           test: /[\\/]node_modules[\\/]scratch-vm[\\/]/,
           enforce: true,
           reuseExistingChunk: true
         },
         blocks: {
           name: 'blocks',
           priority: 20,
           test: /[\\/]node_modules[\\/]scratch-blocks[\\/]/,
           enforce: true,
           reuseExistingChunk: true
         },
         scratch: {
           name: 'scratch',
           priority: 20,
           test: /[\\/]node_modules[\\/]scratch-.*[\\/]/,
           enforce: true
         },
         react: {
           name: 'react',
           priority: 10,
           test: /[\\/]node_modules[\\/]react.*[\\/]/,
           enforce: true
         }
       }
     }
   }
   ...
   new HtmlWebpackPlugin({
     // chunks: ['lib.min', 'gui'],
     ...
   }
   

4. 对比

优化前

优化后

资源加载