webpack4.41+性能优化（高级篇）

module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader?cacheDirectory', // 开启缓存
                include: path.resolve(__dirname, 'src'), // 明确范围
                // 排除范围，include和exclude两者选一个就行
                // exclude: path.resolve(__dirname, 'node_modules') 
            }
        ]
    }

          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
              // 开启babel缓存
              // 第二次构建时，会读取之前的缓存
              cacheDirectory: true
            }
          },

// 初始Webpack配置（使用HappyPack前）
module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: ['react'],
        },
      }
    ],
  },
};

// 使用HappyPack的配置
const HappyPack = require('happypack');
module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'happypack/loader',
      }
    ],
  },
  plugins: [
    new HappyPack({
      loaders: [
        {
          loader: 'babel-loader',
          options: {
            presets: ['react'],
          },
        }
      ],
    })
  ],
};

module: {
        rules: [
            {
                test: /\.js$/,
                // 把对 .js 文件的处理转交给 id 为 babel123 的 HappyPack 实例
                loader: 'happypack/loader?id=babel123',
                include: path.resolve(__dirname, 'src'), // 明确范围
                // 排除范围，include和exclude两者选一个就行
                // exclude: path.resolve(__dirname, 'node_modules') 
            },
            {
		        test: /\.ts$/,
		        include: path.resolve(__dirname, 'src'), // 明确范围
		        loader: 'happypack/loader?id=ts',
		    }
        ]
    },
    plugins: [
		// ...省略其他代码
        // happyPack 开启多线程打包
        new HappyPack({
            // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
            id: 'babel123',
            // 如何处理 .js 文件，用法和 Loader 配置中一样
            use: ['babel-loader?cacheDirectory']
            // 这里写成loaders: ['babel-loader?cacheDirectory']也可以
            // 这里必须用数组形式
        }),
        new HappyPack({
			id: 'ts',
			use: [{
				loader: 'ts-loader',
				options: {}, // ts options
	     	}],
	    })
    ],

plugins: [
		// ...省略部分无关代码
        new ParallelUglifyPlugin({
            // 传递给 UglifyJS 的参数
            // （还是使用 UglifyJS 压缩，只不过帮助开启了多进程）
            uglifyJS: {
                output: {
                    beautify: false, // 最紧凑的输出
                    comments: false, // 删除所有的注释
                },
                compress: {
                    // 删除所有的 `console` 语句，可以兼容ie浏览器
                    drop_console: true,
                    // 内嵌定义了但是只用到一次的变量
                    collapse_vars: true,
                    // 提取出出现多次但是没有定义成变量去引用的静态值
                    reduce_vars: true,
                }
            }
        })
    ],

plugins: [
        // ...省略其他无关代码
        new HotModuleReplacementPlugin()
    ],

    devServer: {
        port: 8080,
        progress: true,  // 显示打包的进度条
        contentBase: distPath,  // 根目录
        open: true,  // 自动打开浏览器
        compress: true,  // 启动 gzip 压缩

        hot: true, // ======在这里加入热更新配置=============

        // 设置代理
        proxy: {
            // 将本地 /api/xxx 代理转发到 http://localhost:3000/api/xxx
            '/api': 'http://localhost:3000',

            // 将本地 /api2/xxx 代理转发到 http://localhost:3000/xxx
            '/api2': {
                target: 'http://localhost:3000',
                pathRewrite: {
                    '/api2': '' // 将路径中的'/api2'变为''空串
                }
            }
        }
    },

// 增加，开启热更新之后的代码逻辑
if (module.hot) {
    module.hot.accept(['./math.js'], () => {
        const sumRes = sum(10, 30)
        console.log('sumRes in hot', sumRes)
    })
}

module: {
        rules: [
        	// ...省略无关代码
            // 图片 - 考虑 base64 编码的情况
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        // 小于 5kb 的图片用 base64 格式产出
                        // 否则，依然延用 file-loader 的形式，产出 url 格式
                        limit: 5 * 1024,

                        // 打包到 img 目录下
                        outputPath: '/img1/',

                        // 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
                        // publicPath: 'http://cdn.abc.com'
                    }
                }
            },
        ]
    },

output: {
        // filename: 'bundle.[contentHash:8].js',  // 打包代码时，加上 hash 戳
        filename: '[name].[contentHash:8].js', // name 即多入口时 entry 的 key
        path: path.join(__dirname, '..', 'dist'),
        // publicPath: 'http://cdn.abc.com'  // 修改所有静态文件 url 的前缀（如 cdn 域名），这里暂时用不到
    },

	plugins: [
        // ...省略无关代码
        // 抽离 css 文件
        new MiniCssExtractPlugin({
            filename: 'css/main.[contentHash:8].css'
        })
    ],

document.getElementById('btn').onclick = function() {
  // 懒加载~：当文件需要使用时才加载~
  // 预加载 prefetch：会在使用之前，提前加载js文件 
  // 正常加载可以认为是并行加载（同一时间加载多个文件）  
  // 预加载 prefetch：等其他资源加载完毕，浏览器空闲了，再偷偷加载资源
  import(/* webpackChunkName: 'test', webpackPrefetch: true */'./test').then(({ mul }) => {
    console.log(mul(4, 5));
  });
};

entry: './src/js/index.js',

entry: {
	main: './src/js/index.js' // 这个默认的main就是默认的webpackChunkName
}

  output: {
    filename: 'js/[name].[contenthash:10].js',
    path: resolve(__dirname, 'build'),
    chunkFilename: 'js/[name].[contenthash:10]_chunk.js' // 这个[name]是你/* webpackChunkName: 'xxx'*/指定的，打包出来就是js/xxx.[contentHash:10]_chunk.js
    // 如果你不指定webpackChunkName，这里就会输出js/[id].[contentHash:10]_chunk.js，以从0开始的数字往后命名，看你webpack打包日志的chunks这一项是什么数字，这个[id]就会显示多少
  },

optimization: {
    splitChunks: {
		// initial 入口chunk，对于异步导入的文件不处理
		// async 异步chunk，只对异步导入的文件处理
		// all 全部chunk
      chunks: 'all', // 默认是async
      // 为什么默认是async呢？上面说过了，懒加载会提高代码覆盖率，而拆分同步代码只是利用缓存，优化十分有限，所以默认拆分懒加载的代码，为async！！！！
      // 下面是默认值，可以不写~
      minSize: 30 * 1024, // 分割的chunk最小为30kb
      maxSize: 0, // 最大没有限制
      minChunks: 1, // 要提取的chunk最少被引用1次
      maxAsyncRequests: 5, // 按需加载时并行加载的文件的最大数量
      maxInitialRequests: 3, // 入口js文件最大并行请求数量
      automaticNameDelimiter: '~', // 名称连接符
      name: true, // 可以使用命名规则
      // === 以上为公共规则 ==========
      cacheGroups: {
        // 分割chunk的组的规则
        // node_modules文件会被打包到 vendors 组的chunk中。--> vendors~xxx.js,这个~是名称链接符
        // 满足上面的公共规则，如：大小超过30kb，至少被引用一次。比如vue、vue-router等等
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          // 优先级
          priority: -10
        },
        default: {
          // 要提取的chunk最少被引用2次
          minChunks: 2,
          // 优先级
          priority: -20,
          // 如果当前要打包的模块，和之前已经被提取的模块是同一个，就会复用，而不是重新打包模块
          reuseExistingChunk: true
        } 
      }
    },
    // 将当前模块的记录其他模块的hash单独打包为一个文件 runtime
    // 解决：修改a文件导致b文件的contenthash变化，做代码分割一定要加上runtimeChunk，否则导致缓存失效
    runtimeChunk: {
      name: entrypoint => `runtime-${entrypoint.name}`
    },
    minimizer: [
      // 配置生产环境的压缩方案：js和css，4.26以上的webpack压缩js使用terser-webpack-plugin
      // 压缩js
      new TerserWebpackPlugin({
        // 开启缓存
        cache: true,
        // 开启多进程打包
        parallel: true,
        // 启动source-map
        sourceMap: true
      }),
      // 压缩css
      new OptimizeCSSAssetsPlugin({})
    ]
  }

// output配置
entry: path.join(__dirname, 'src/index.js'),
output: {
     filename: 'test.js',
     path: path.resolve(__dirname, '../dist'),
     chunkFilename: '[name]_chunk.js'
 },

    optimization: {
        splitChunks: {
            chunks: 'all' // 这里要写，不然就是只分割异步代码
            // 后面不写，都是默认配置
        }
    }

import _ from 'lodash'// 这个在node_modules里面，分割时属于vendors组的规则
import myjs from './lib/myjs' // 这个在我新建的lib文件夹下的目录
// promise方式
if (process.env.NODE_ENV === 'development') {
	let VConsole;
    import(/* webpackChunkName: 'vConsole' */'vconsole/dist/vconsole.min.js').then((module) => {
        VConsole = module.default;
        new VConsole();
    });
}
// 或者async/await方式
async created() {
  if (process.env.NODE_ENV === 'development') {
        try {
            const { default: VConsole } = 
            	await import(/* webpackChunkName: 'vConsole' */ 'vconsole/dist/vconsole.min.js');
            new VConsole();
        } catch (err) {
            console.log(err);
        }
    }
},

optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
-         name: 'vendors', // 这里不支持
          chunks: 'all'
        }
      }
    }
  }

// a.js
export function add(x, y) {
  return x + y;
}

// main.js
import(/* webpackChunkName: 'a' */'./a.js').then(({ add }) => {
  console.log(add(1, 2));
});

IgnorePlugin
ContextReplacementPlugin

// 插件配置
plugins: [
  // 忽略moment.js中所有的locale文件
  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
],
// 使用方式
const moment = require('moment');
// 引入zh-cn locale文件
require('moment/locale/zh-cn');
moment.locale('zh-cn');

// 插件配置
plugins: [
  // 只加载locale zh-cn文件
  new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn/),
],
// 使用方式
const moment = require('moment');
moment.locale('zh-cn');

output: {
        // filename: 'bundle.[contentHash:8].js',  // 打包代码时，加上 hash 戳
        filename: '[name].[contentHash:8].js', // name 即多入口时 entry 的 key
        path: path.join(__dirname, '..', 'dist'),
        publicPath: 'http://cdn.abc.com'  // 修改所有静态文件 url 的前缀（如 cdn 域名），这里暂时用不到
    },

const flag = true
if (flag) {
	import test from './test
} // 会直接报错

const flag = true
if (flag) {
	require('./test')
} // 完全没问题