webpack4 优化耗时分析speed-measure-webpack-plugin插件

男娘i 2021-07-24 13:25 1942阅读 0赞

能够列出输出、loader和plugins的耗时,过长将会使用黄色和红色显示
    1、下载
    	cnpm install -D speed-measure-webpack-plugin
    	
    2、使用
    	const SpeedMeasurePlugin=require('speed-measure-webpack-plugin')
    	
    	const smp = new SpeedMeasurePlugin();
    	smp.wrap({配置config})

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]  
代码示例:

const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const {  CleanWebpackPlugin } = require('clean-webpack-plugin');
    const HTMLInlineCSSWebpackPlugin = require ( "html-inline-css-webpack-plugin" ). default ;
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin')
    const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
    const glob = require('glob');
    const fs = require('fs');
    const TerserPlugin = require("terser-webpack-plugin");
    const SpeedMeasurePlugin=require('speed-measure-webpack-plugin')
    
    const smp = new SpeedMeasurePlugin();
    
    const setOptions = ()=>{ 
      const entry = { };
      const htmlWebpackPlugin = [];
    
      const entryFiles = glob.sync(path.resolve(__dirname, './src/*/index.js'))
      const fileReg = /src\/(.*)\/index\.js/;
    
      entryFiles.forEach((filePath, index) => { 
        const fileName = filePath.match(fileReg);
        
        entry[fileName[1]] = filePath;
        htmlWebpackPlugin.push(
          new HtmlWebpackPlugin({ 
            template: `./src/${ fileName[1]}/index.html`,
            filename:fileName[1]+'.html',
            chunks:[fileName[1]]
          })
        )
      })
    
      return { 
        entry,
        htmlWebpackPlugin
      }
    }
    
    module.exports =smp.wrap( { 
      entry: setOptions().entry,
      output: { 
        path: path.resolve(__dirname, 'dist'),
        filename: '[name]_[chunkhash:8].js'
      },
      module: { 
        rules: [
          { 
            test: /\.js$/,
            use:['babel-loader']
          },
          { 
            test: /\.css$/,
            use: [
              MiniCssExtractPlugin.loader,
              'css-loader',
              { 
                loader: "postcss-loader",
                options: { 
                  postcssOptions: { 
                    plugins: [
                      [
                        "autoprefixer",
                        { 
                          overrideBrowserslist: [
                              "Android 4.1",
                              "iOS 7.1",
                              "Chrome > 31",
                              "ff > 31",
                              "ie >= 8",
                              "> 1%", // 必须大于 1% 用户使用的浏览器
                              //'last 2 versions', // 所有主流浏览器最近的 2个版本
                          ],
                        },
                      ],
                    ],
                  },
                },
              },
              { 
                loader: 'px2rem-loader',
                options: { 
                  remUnit: 75, //初始稿的10分之一,代表设计稿为750,1rem=75px,
                  remPrecision:8,  //精确的小数点位数
                }
              }
            ]
          },
          { 
            test: /\.txt$/i,
            use: [
              { 
                loader: 'raw-loader',
                options: { 
                  esModule: false,
                },
              },
            ],
          }
        ]
      },
      optimization: { 
        splitChunks: { 
          cacheGroups: { 
            commons: { 
              test: /(react)|(react-dom)/,
              chunks: 'all',
              name: 'hhh',
              
            }
          }
        }
      },
      mode: "production",
      plugins: [
        ...setOptions().htmlWebpackPlugin,
        new MiniCssExtractPlugin({  filename: 'css/build.css' }),
        new HTMLInlineCSSWebpackPlugin(),
        // new FriendlyErrorsWebpackPlugin(),
        new CleanWebpackPlugin(),
        function () { 
          this.hooks.done.tap("done", (stats) => { 
            if (stats.compilation.errors && stats.compilation.errors.length && process.argv.indexOf('--watch') == -1) { 
              console.log('build error');
              process.exit(1);
            }
          })
        }
      ]
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/d392fef318d245d788fad767292e6b4f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1942人围观）

还没有评论，来说两句吧...

相关阅读

相关 Eclipse启动耗时统计插件

Eclipse启动耗时统计插件创建eclipse插件项目 \[File\] → \[New\] → \[Other\] → \[Plug-in Project\] !

向右看齐/ 2023年01月18日 04:10/ 0 赞/ 152 阅读

相关 webpack4中插件css的处理

1:新建文件index.css 里面随便写点样式\\ 例如：background：pink 2:在index.js中引入index.css import "./ind

﹏ヽ暗。殇╰゛Y/ 2022年12月23日 14:25/ 0 赞/ 126 阅读

相关 webpack4中插件使用

1:安装插件html-webpack-plugin 进行页面js自动引入更新 npm install html-webpack-plugin --save-dev

绝地灬酷狼/ 2022年12月23日 14:24/ 0 赞/ 205 阅读

相关【Webpack】879- 简单易懂的 webpack 插件原理分析

![format_png][] 本文作者：lzg9527 本文链接：juejin.cn/post/6901210575162834958 在 webpack 中

我会带着你远行/ 2022年11月02日 03:57/ 0 赞/ 199 阅读

相关 webpack4 自定义插件plugins

插件即是一个class类,wb会调用其中的apply方法涉及到的内容:compiler、tapable和compilation 配置:

我不是女神ヾ/ 2021年07月24日 22:45/ 0 赞/ 628 阅读

相关 webpack4 常用插件

1、copy-webpack-plugin拷贝文件 (1)下载 cnpm install copy-webpack-plugin --save-dev

﹏ヽ暗。殇╰゛Y/ 2021年07月24日 22:27/ 0 赞/ 478 阅读

相关 webpack3 插件

插件(plugins) 服务器运行自动打开浏览器插件 1、安装 cnpm install -D open-browser-web

怼烎@/ 2021年07月24日 21:04/ 0 赞/ 438 阅读

相关 webpack4 简化构建输出插件friendly-errors-webpack-plugin

1、下载 cnpm install friendly-errors-webpack-plugin -D 2、配置 plugi

た入场券/ 2021年07月24日 15:58/ 0 赞/ 540 阅读

相关 webpack4 优化耗时分析speed-measure-webpack-plugin插件

能够列出输出、loader和plugins的耗时,过长将会使用黄色和红色显示 1、下载 cnpm install -D speed-measure-w

男娘i/ 2021年07月24日 13:25/ 0 赞/ 1943 阅读

相关 webpack 优化体积可视化分析webpack-boundle-analyzer插件

1、下载 cnpm install -D webpack-boundle-analyzer 2、配置 const BundleAn

秒速五厘米/ 2021年07月24日 12:27/ 0 赞/ 435 阅读