webpack4 多进程打包耗时loader、并行压缩

墨蓝 2021-07-24 16:02 781阅读 0赞

多进程打包
    	1、下载
    		cnpm install -D thread-loader
    	
    	2、使用
    		这个loader放置在其他loader之前， 放置在这个loader之后的loader就会在一个单独的worker池(worker pool)中运行
    		在worker池(worker pool)中运行的loader是受到限制的。例如
    		    (1)这些 loader 不能产生新的文件。
    		    (2)这些 loader 不能使用定制的 loader API（也就是说，通过插件）。
    		    (3)这些 loader 无法获取 webpack 的选项设置。
    		    (4)启动有600ms的node.js进程。同时跨进程的数据交换也会被限制。
    			(5)请仅在耗时的 loader 上使用(如babel-loader)
    	
    	3、配置
    		{
    	       test: /\.xx$/,
    	       exclude: /(node_modules|bower_components)/,
    	       use: [
    	         'thread-loader',	开启多进程打包
    	         {
    	           loader: 'babel-loader', 
    	           ...
    	         }
    	       ]
    	     }
    		
    		thread-loader参数:
    		{
    			loader: "thread-loader",
    		    options: { 有同样配置的 loader 会共享一个 worker 池(worker pool)
    		      workers: 2,	产生的 worker 的数量，默认是 cpu 的核心数
    		      workerParallelJobs: 50, 一个 worker 进程中并行执行工作的数量,默认为 20
    		      workerNodeArgs: ['--max-old-space-size', '1024'], 额外的 node.js 参数
    		      poolTimeout: 2000,  闲置时定时删除 worker 进程,默认为 500ms,可以设置为无穷大， 这样在监视模式(--watch)下可以保持 worker 持续存在
    		      poolParallelJobs: 50,	池(pool)分配给 worker 的工作数量,默认为 200,降低这个数值会降低总体的效率，但是会提升工作分布更均一
    		      name: "my-pool" 池(pool)的名称,可以修改名称来创建其余选项都一样的池(pool)
    		    }
    		}
    		
    		参考网址:https://webpack.js.org/loaders/thread-loader/#root
    
    并行压缩:
    	
    	  optimization: {
    	  	minimize:true,
    		minimizer:[ 
    	    	new TerserPlugin({  需要下载'terser-webpack-plugin'并引入,假设命名为TerserPlugin
    	    		cache: true, 开启缓存
    	    		parallel: true, 开启并行压缩
    	    		
    	    	})
    	    ]
    	  },

代码示例:

const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const MiniCssExtractPlugin= require('mini-css-extract-plugin');
    const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
    const {  CleanWebpackPlugin } = require('clean-webpack-plugin');
    const WorkboxPlugin = require('workbox-webpack-plugin');
    
    // process.env.NODE_ENV='development'
    // console.log(this.mode)
    module.exports = { 
      entry: ['./src/js/index.js','./src/index.html'],
      // entry: { 
      // main: './src/js/index.js',
      // test: './src/js/print.js',
      // // html:'./src/index.html'
      // },
      output: { 
        // 'src/js/build.[contenthash:10].js'
        filename: 'src/js/[name].[contenthash:10].js',
        path:path.resolve(__dirname,'build')
      },
      module: { 
        rules: [//创建模块时，匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块(module)应用 loader，或者修改解析器(parser)。
          { 
            test: /\.css$/, //匹配文件名
            use: [//使用哪些loader
              // 'style-loader', //创建style标签,将js中的css样式资源添加到style标签中生效
              MiniCssExtractPlugin.loader, //取代style-loader,提取js中的css为单独文件
              'css-loader', //css文件变成commonjs模块,里面内容是样式字符串
              { 
                loader: 'postcss-loader',
                ident: 'postcss',
                options: { 
                  postcssOptions: { 
                    plugins: [['postcss-preset-env',{ }]]
                  },
                }
              }
            ] 
          },
          { 
            test: /\.less$/,
            use: [
              'style-loader',
              'css-loader', 
              'less-loader', //将less文件编译成css文件
            ]
          },
          { 
            test: /\.(jpg|png|gif|jfif)$/,
            loader:'url-loader', //依赖于file-loader
            options: { 
              //图片小于8kb,会处理成base64,即减少请求数量,增大图片体积(请求速度会变慢cn)
              limit: 8 * 1024,
              esModule: false,  //不采用es6模式解析,否则会和html-loader采用的commonjs模式冲突
              name: '[name].[ext]',
              outputPath:'src/images'
            }
          },
          { 
            test: /\.html$/,
            loader:'html-loader', //处理html文档中的img,负责引入图片,交给url-loader处理
          },
          { 
            // exclude:/\.xx$/
            test: /\.(ttf|eot|svg|woff|woff2)$/,
            loader: 'file-loader',
            options: { 
              name: '[name].[ext]',
              outputPath:'src/icon'
            },
            
          },
          { //不检查node_modules
            test: /\.js$/,
            exclude:/node_modules/,
            loader: 'eslint-loader',
            enforce:'pre', //优先执行
            options: { 
              fix: true,
            }
          },
          { //js兼容性处理
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: [
              'thread-loader',  //开启多进程打包
              { 
                loader: 'babel-loader', 
                options: { 
                  // 预设,指示babel做兼容性处理
                  presets: [['@babel/preset-env', { 
                    targets: { 
                      chrome: '60',
                      firefox: '60',
                      ie: '9',
                      safari: '10',
                      edge:'19'
                    },
                    useBuiltIns: 'usage', //按需加入
                    corejs: {  //指定core-js版本
                      version:3
                    }
                  }]],
                  cacheDirectory:true //开启缓存
                  // plugins: ['@babel/transform-runtime']
                }
              }
            ]
          }
        ]
      },
      //插件
      plugins: [
        new HtmlWebpackPlugin({ 
          template: './src/index.html', //将模板复制成指定文件
          minify: { 
            collapseWhitespace: true, //折叠空格
            removeComments:true  //移出注释
          }
          
        }), //默认传键html文件,并引入打包输出的资源,默认为基本结构
        new MiniCssExtractPlugin({ 
          filename: 'src/css/build.[contenthash:10].css'
        }),
        new OptimizeCssAssetsPlugin(),
        new CleanWebpackPlugin(),
        new WorkboxPlugin.GenerateSW({  //生成serviceworker
           clientsClaim: true,  //帮助serviceworker快速启动
           skipWaiting: true, //删除旧的serviceworker
        })
      ],
      optimization: { 
        splitChunks: {  
          chunks: 'all', //将node_modules内库单独打包
      
        }
      },
      mode: 'production',
      //自动化,自动编译、打开浏览器和自动刷新等
      devServer: { 
        // contentBase:['xx','xx',...]
        contentBase: path.resolve(__dirname, 'build'), //提供内容的目录
        //启动gzip压缩
        compress: true,
        port: 3000, //监听端口号
        open: true, //自动打开浏览器
        hot:true,
      },
      // devtool:'source-map'
    }
    
    /** */

发表评论取消回复

表情：

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

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

相关阅读

相关 webpack4打包html和压缩js

打包html使用插件[html-webpack-plugin][] 压缩js使用插件[uglifyjs-webpack-plugin][] 配置文件： const

水深无声/ 2022年05月19日 08:13/ 0 赞/ 383 阅读

相关 webpack4打包多个js文件

默认文件目录： ![70][] 1.多个js文件不合并打包(分别打包) 配置文件./conf/webpack.dev.js const path = requi

谁借莪１个温暖的怀抱￠/ 2022年05月19日 03:09/ 0 赞/ 340 阅读

相关 Webpack + Vue 多页面项目升级 Webpack 4 以及打包优化

0. 前言早在 2016 年我就发布过一篇关于在多页面下使用 Webpack + Vue 的配置的文章，当时也是我在做自己一个个人项目时遇到的配置问题，想到别人也可能遇

Bertha 。/ 2022年03月30日 14:18/ 0 赞/ 649 阅读

相关 webpack4 css打包压缩问题

这两天一直在练习这个webpack4, 发现有好多问题和坑，做开发嘛，一定要有喜欢出问题并喜欢解决问题，坚决踩个坑填个坑的不怕死小强精神！ webpack4 在配置上其实是可

谁借莪１个温暖的怀抱￠/ 2022年02月27日 04:10/ 0 赞/ 436 阅读

相关复习webpack4之如何编写loader

> 之前学习过webpack3的知识，但是webpack4升级后还是有很多变动的，所以这次重新整理一下webpack4的知识点，方便以后复习。这次学习webpack4不仅仅

曾经终败给现在/ 2022年01月22日 12:09/ 0 赞/ 328 阅读

相关 webpack-loader

loader > webpack做的事情，仅仅是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。 > 更多的功能需要借助webpack loa

柔光的暖阳◎/ 2021年08月26日 13:26/ 0 赞/ 500 阅读

相关 webpack4 自定义loader

loader:(文档:https://webpack.docschina.org/api/loaders/) (1)解析从前往后,但调用为从后到前(loade

短命女/ 2021年07月24日 19:18/ 0 赞/ 550 阅读

相关 webpack4 打包图片

1、下载 cnpm install url-loader file-loader html-loader@0.5.5 -D 其中url-loader

╰+哭是因爲堅強的太久メ/ 2021年07月24日 18:24/ 0 赞/ 597 阅读

相关 webpack4 多进程打包耗时loader、并行压缩

多进程打包 1、下载 cnpm install -D thread-loader 2、使用这个loader放置

墨蓝/ 2021年07月24日 16:02/ 0 赞/ 782 阅读

相关 webpack4 多页面打包

方式一: 将entry修改为对象形式的多入口方式,每个入口对应对应一个html-webpack-plugin 通过html-webpack-plug

我会带着你远行/ 2021年07月24日 11:00/ 0 赞/ 610 阅读