webpack 构建速度和体积优化 #

const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasureWebpackPlugin();
module.exports = smp.wrap({
  plugins: [],
});

// require('webpack-bundle-analyzer') 导入的是一个对象
// require('webpack-bundle-analyzer').BundleAnalyzerPlugin 才是构造函数
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin(),
  ]
}

const HappyPack = require('happypack');

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'happypack/loader',
      },
    ],
  },
  plugins: [
    new HappyPack({
      loaders: ['babel-loader'],
    })
  ]
}

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'thread-loader',
            options: { 
              workers: 3,
              workerParallelJobs: 50,
              poolTimeout: 2000,
            },
          },
          'babel-loader',
        ]
      }
    ]
  }
}

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'thread-loader',
            options: [
              workers: 3,
            ],
          },
          'style-loader',
          'css-loader',
        ]
      }
    ]
  }
}

const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');

module.exports = {
  plugins: [
    new ParallelUglifyPlugin({
      uglifyJS: {
        output: {
          beautify: false,
          comments: false,
        },
        compress: {
          warnings: false,
          drop_console: true,
          collapse_vars: true,
          reduce_vars: true,
        }
      }
    })
  ]
}

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  plugins: [
    new UglifyJsPlugin({
      uglifyOptions: {
        warnings: false,
      },
      parallel: true
    })
  ]
}

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true
      })
    ]
  }
}

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    // 指定要分离的基础包；要分离业务包，增加一条key即可
    libraryCai: ['react', 'react-dom'],
    // commonLibrary: ['ui', 'xxx']
  },
  output: {
    filename: '[name].dll.js',
    path: path.join(__dirname, 'library'),
    library: '[name]',
  },
  plugins: [
    new webpack.DllPlugin({
      // DllPlugin的name需要和output的library保持一致
      name: '[name]',
      path: path.join(__dirname, 'library/[name]-manifest.json')
    })
  ]
}

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DllReferencePlugin({
      manifest: require('./library/libraryCai-manifest.json'),
    }),
    // new webpack.DllReferencePlugin({
    //   manifest: require('./library/commonLibrary-manifest.json'),
    // }),
  ]
}

const webpack = require('webpack');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');

module.exports = {
  plugins: [
    // 将静态资源文件以script标签形式加入到html文件中，可以引入多个
    new AddAssetHtmlPlugin([
      { filepath: require.resolve('./library/libraryCai.dll.js') },
      { filepath: require.resolve('./library/commmonLibrary.dll.js') },
    ]),
    new webpack.DllReferencePlugin({
      manifest: require('./library/libraryCai-manifest.json'),
    }),
  ]
}

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              // 开启缓存
              cacheDirectory: true,
              // 是否压缩缓存文件。false不压缩，可以提高缓存读写速度，但会占用更多磁盘空间
              cacheCompression: false,
            }
          }
        ]
      }
    ]
  }
}

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
  plugins: [
    new TerserPlugin({
      parallel: true,
      // 开启压缩缓存
      cache: true,
    })
  ]
}

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'cache-loader',
          'babel-loader',
          'eslint-loader',
        ]
      }
    ]
  }
}

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
module.exports = {
  plugins: [
    new HardSourceWebpackPlugin(),
  ]
}

const path = require('path');
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        // 指定babel-loader只处理src目录下的文件
        // 必须要指定绝对路径，path.resolve就是生成绝对路径
        include: path.resolve('src'),
        // exclude: path.resolve('node_modules'),
      }
    ]
  }
}

const path = require('path');
module.exports = {
  resolve: {
    // 指定查找路径，直接到指定路径查找React，减少查找时间
    alias: {
      react: path.resolve(__dirname, './node_modules/react/umd/react.production.min.js'),
      'react-dom': path.resolve(__dirname, './node_modules/react-dom/umd/react-dom.production.min.js'),
    },
    // 没有后缀名的文件，去寻找文件名加.js的文件
    extensions: ['.js'],
    // 查找package.json的main字段内容作为入口文件
    mainFields: ['main'],
    // 添加modules字段，指定模块查找的目录顺序
    // 减小模块搜索层级
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
  },
}

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const PurgeCSSPlugin = require('purgecss-webpack-plugin');

const PATHS = {
  // PurgecssPlugin插件需要传绝对路径
  src: path.resolve(__dirname, 'src'),
}
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      name: '[name]_[contenthash:8].css',
    }),
    new PurgecssPlugin({
      path: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
    })
  ],
}

module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpeg|png|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name]_[hash:8].[ext]',
            },
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
              },
              optipng: {
                enabled: false,
              },
              pngquant: {
                quality: [0.65, 0.90],
                speed: 4,
              },
              gifsicle: {
                interlaced: false,
              },
              webp: {
                quality: 75,
              },
            },
          },
        ]
      }
    ]
  }
}