19-webpack性能优化集锦

module.exports = {
  module: {
    rules: [
      {
        // js 文件才使用 babel
        test: /\.js$/,
        use: [‘babel-loader‘],
        // 只处理src文件夹下面的文件
        include: path.resolve(‘src‘),
        // 不处理node_modules下面的文件
        exclude: /node_modules/
      }
    ]
  }
}

{
  test: /\.js$/,
  use: ‘babel-loader?cacheDirectory‘,
  include: [resolve(‘src‘), resolve(‘test‘) ,resolve(‘node_modules/webpack-dev-server/client‘)] //缓存客户端（浏览器）这个文件夹
}

npm install --save-dev cache-loader

module.exports = {
  module: {
    rules: [
      {
　　　　 // js 文件才使用 babel
        test: /\.js$/,
        use: [‘cache-loader‘, ...loaders], //...loader是要指定的要缓存的loader的一个统称
        include: path.resolve(‘src‘), //前面babel-loader 时候，已经统一指定只处理src下的文件，这里就不用单独再写了
      },
    ],
  },
};

// 安装
npm install --save-dev speed-measure-webpack-plugin
// 使用方式
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
 
const smp = new SpeedMeasurePlugin();
 
const webpackConfig = smp.wrap({
  module: {},
  plugins: [
    new MyPlugin(),
    new MyOtherPlugin()
  ]
});

运行时候如下图所示

module: {
  rules: [
    {
        test: /\.js$/,
        // 把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例
        use: [‘happypack/loader?id=babel‘],
        exclude: path.resolve(__dirname, ‘node_modules‘),
    },
    {
        test: /\.css$/,
        // 把对 .css 文件的处理转交给 id 为 css 的 HappyPack 实例
        use: [‘happypack/loader?id=css‘]
    }
  ]
},
plugins: [
      new HappyPack({
        id: ‘js‘, //ID是标识符的意思，ID用来代理当前的happypack是用来处理一类特定的文件的
        threads: 4, //你要开启多少个子进程去处理这一类型的文件
        loaders: [ ‘babel-loader‘ ]
    }),
    new HappyPack({
        id: ‘css‘,
        threads: 2,
        loaders: [ ‘style-loader‘, ‘css-loader‘ ]
    })
]

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(‘src‘),
        use: [
          {
              loader: "thread-loader",
              // 有同样配置的 loader 会共享一个 worker 池(worker pool)
              options: {
                  // 产生的 worker 的数量，默认是 cpu 的核心数
                  workers: 2,

                  // 一个 worker 进程中并行执行工作的数量
                  // 默认为 20
                  workerParallelJobs: 50,

                  // 额外的 node.js 参数
                  workerNodeArgs: [‘--max-old-space-size‘, ‘1024‘],

                  // 闲置时定时删除 worker 进程
                  // 默认为 500ms
                  // 可以设置为无穷大， 这样在监视模式(--watch)下可以保持 worker 持续存在
                  poolTimeout: 2000,

                  // 池(pool)分配给 worker 的工作数量
                  // 默认为 200
                  // 降低这个数值会降低总体的效率，但是会提升工作分布更均一
                  poolParallelJobs: 50,

                  // 池(pool)的名称
                  // 可以修改名称来创建其余选项都一样的池(pool)
                  name: "my-pool"
              }
          }, 
          {
              loader:‘babel-loader‘
          }
        ]
      }
    ]
  }
}

let ParallelUglifyPlugin = require(‘webpack-parallel-uglify-plugin‘);
module.exports = {
    module: {},
    plugins: [
        new ParallelUglifyPlugin({
            workerCount：3，//开启几个子进程去并发的执行压缩。默认是当前运行电脑的cPU核数减去1
            uglifyJs:{
                output:{
                    beautify:false，//不需要格式化
                    comments:false，//不保留注释
                }，
                compress:{
                    warnings:false，//在Uglify]s除没有用到的代码时不输出警告
                    drop_console:true，//删除所有的console语句，可以兼容ie浏览器
                    collapse_vars:true，//内嵌定义了但是只用到一次的变量
                    reduce_vars:true，//取出出现多次但是没有定义成变量去引用的静态值
                }
            }，
        })
    ]
}

const path = require(‘path‘);
const DllPlugin = require(‘webpack/lib/DllPlugin‘);
module.exports = {
    // 想统一打包的类库
    entry:[‘react‘,‘react-dom‘],
    output:{
        filename: ‘[name].dll.js‘,  //输出的动态链接库的文件名称，[name] 代表当前动态链接库的名称
        path:path.resolve(__dirname,‘dll‘),  // 输出的文件都放到 dll 目录下
        library: ‘_dll_[name]‘,//存放动态链接库的全局变量名称,例如对应 react 来说就是 _dll_react
    },
    plugins:[
        new DllPlugin({
            // 动态链接库的全局变量名称，需要和 output.library 中保持一致
            // 该字段的值也就是输出的 manifest.json 文件 中 name 字段的值
            // 例如 react.manifest.json 中就有 "name": "_dll_react"
            name: ‘_dll_[name]‘,
            // 描述动态链接库的 manifest.json 文件输出时的文件名称
            path: path.join(__dirname, ‘dll‘, ‘[name].manifest.json‘)
        })
    ]
}

webpack --config webpack.dll.js --mode development

const DllReferencePlugin = require(‘webpack/lib/DllReferencePlugin‘)
module.exports = {
  // ...省略其他配置
  plugins: [
    new DllReferencePlugin({
      // manifest 就是之前打包出来的 json 文件
      manifest:path.join(__dirname, ‘dll‘, ‘react.manifest.json‘)
    })
  ]
}

module.exports = {
    module: {
      noParse: /jquery|lodash/, // 正则表达式
      // 或者使用函数
      noParse(content) {
        return /jquery|lodash/.test(content)
      }
    }
}

module.exports = {
  // ...省略其他配置
  plugins: [
    new webpack.IgnorePlugin(/^\.\/locale/,/moment$/)
  ]
}

module.exports ={
    // ...省略其他配置
    resolve: {
        extensions: [".js",".jsx",".json",".css"],
        alias:{
            "jquery":jquery
        }
    }
};

module.exports ={
    // ...省略其他配置
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif|jpeg|ico)$/,
                use: [
                    ‘file-loader‘,
                    {
                        loader: ‘image-webpack-loader‘,
                        options: {
                            mozjpeg: {
                                progressive: true,
                                quality: 65
                            },
                            optipng: {
                                enabled: false,
                            },
                            pngquant: {
                                quality: ‘65-90‘,
                                speed: 4
                            },
                            gifsicle: {
                                interlaced: false,
                            },
                            webp: {
                                quality: 75
                            }
                        }
                    }
                ]
            }
        ]
    }
};

body{
    background: red
}
.class1{
    background: red
}

const glob = require(‘glob‘);
const PurgecssPlugin = require(‘purgecss-webpack-plugin‘);

module.exports ={
    // ...
    plugins: [
        // 需要配合mini-css-extract-plugin插件
        new PurgecssPlugin({
            paths: glob.sync(`${path.join(__dirname, ‘src‘)}/**/*`, 
                  {nodir: true}), // 不匹配目录，只匹配文件
            })
        }),
    ]
}

const AddAssetHtmlCdnPlugin = require(‘add-asset-html-cdn-webpack-plugin‘)

module.exports ={
    // ...
    plugins: [
        new AddAssetHtmlCdnPlugin(true,{
            ‘jquery‘:‘https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js‘
        })
    ],
    //在配置文件中标注jquery是外部的，这样打包时就不会将jquery进行打包了
    externals:{
      ‘jquery‘:‘$‘
    }
}

let a = 1;
let b = 2;
let c = 3;
let d = a+b+c
export default d;
// 引入d
import d from ‘./d‘;
console.log(d)

module.exports = {
  // ...
  plugins: [
    // 开启 Scope Hoisting
    new webpack.optimize.ModuleConcatenationPlugin(),
  ]
}

{
  // 添加
  "plugins": ["transform-vue-jsx", "transform-runtime"],
  
}

let btn = document.createElement(‘button‘);
btn.innerHTML = ‘点击加载视频‘;
btn.addEventListener(‘click‘,()=>{
    import(/* webpackChunkName: "video" */‘./video‘).then(res=>{
        console.log(res.default);
    });
});
document.body.appendChild(btn);

module.exports = {
    // ...
    output:{
      chunkFilename:‘[name].min.js‘
    }
}