用过HappyPack吗？HappyPack有什么优点? #55

Activity

1. artdong

   added

   webpack打包优化打包优化

   on Mar 23, 2020
2. artdong commented on Mar 24, 2020

   

   artdong

   on Mar 24, 2020

   Last edited by artdong

   CollaboratorAuthor

   More actions

   由于 JavaScript 是单线程模型，要想发挥多核 CPU 的能力，只能通过多进程去实现，而无法通过多线程实现。

   由于运行在 Node.js 之上的 Webpack 是单线程模型的，所以Webpack 需要处理的事情需要一件一件的做，不能多件事一起做。

   我们需要Webpack 能同一时间处理多个任务，发挥多核 CPU 电脑的威力，HappyPack 就能让 Webpack 做到这点，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。

   HappyPack makes initial webpack builds faster by transforming files in parallel（HappyPack通过并行转换文件使webpack编译更快）。

   future：Webpack 4 and thread-loader
3. artdong commented on Mar 24, 2020

   

   artdong

   on Mar 24, 2020

   CollaboratorAuthor

   More actions

   Usage

   npm install --save-dev happypack

   const os = require('os');
   const HappyPack = require('happypack');
   
   const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
   
   const happypackClients = [
       new HappyPack({
           id: 'js',
           loaders: ['babel-loader'],
           threadPool: happyThreadPool
       }),
       new HappyPack({
           id: 'jsx',
           loaders: [{
               loader: 'babel-loader',
               query: {
                   presets: ['react']
               }
           }],
           threadPool: happyThreadPool
       }),
       new HappyPack({
           id: 'styles',
           loaders: ['css-loader', 'less-loader'],
           threadPool: happyThreadPool
       })
   ];
   
   module.exports = {
       entry: './app/build/app.jsx',
       output: {
           path: path.resolve(__dirname, './app/public/static/' + pkg.name + '/'),
           filename: 'app.[chunkhash:8].min.js',
           chunkFilename: 'chunk.[name].[chunkhash:8].min.js',
           publicPath: '/' + pkg.name + '/'
       },
       resolve: {
           extensions: ['.js', '.jsx'],
       },
       module: {
           loaders: [
               {
                   test: /\.js?$/,
                   exclude: /(node_modules)/,
                   loader: 'happypack/loader?id=js'
               },
               {
                   test: /\.jsx?$/,
                   exclude: /(node_modules)/,
                   loader: 'happypack/loader?id=jsx'
               },
               {
                   test: /\.(less|css)$/,
                   use: ExtractTextPlugin.extract({
                       use: ['happypack/loader?id=styles']
                   })
               }
           ]
       },
       plugins: [
           new webpack.DefinePlugin({
               'process.env': {
                   'NODE_ENV': env
               }
           }),
           new HtmlWebpackPlugin({
               inject: false,
               filename: '../../views/index.html',
               template: './app/build/views/index.html'
           }),
           ...happypackClients,
           extractLESS
       ]
   };