webpack 学习笔记系列06-打包优化

module.exports = {
    // ... 
    optimization: {
        splitChunks: {
            chunks: 'async', // initial|all|async(默认)
          	maxInitialRequests: 3, // 初始化最大文件数，优先级高于 cacheGroup，为 1 时不抽取 initial common
          	maxAsyncRequests: 5, // 按需加载最大异步请求数量，为 1 时不抽取公共 chunk
            maxSize: 0, // 文件最大尺寸，0不限制
          	minSize: 30000, // 文件最小尺寸，默认30K，development 下10k，与 chunk 数量成反比
            minChunks: 1, // 默认 1，被提取的模块至少要在几个 chunk 中被引用，值越大，抽取出的文件越小
            automaticNameDelimiter: '~', // 打包文件名分隔符
            name: true, // 拆分的文件名，默认 true 自动生成文件名，若设置为固定字符串，则所有 chunk 合并成一个
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/, // 正则规则，如果符合就提取 chunk 
                    priority: -10 // 缓存组优先级，当一个模块可能属于多个 chunkGroup，这里是优先级 
                },
                default: {
                    minChunks: 2,
                    priority: -20, // 优先级 
                    reuseExistingChunk: true // 如果该chunk包含的modules都已经另一个被分割的chunk中存在，那么直接引用已存在的c hunk，不会再重新产生一个 
                }
            }
        }
    }
};

// a.js
import $ from 'jquery';
import react from 'react';
import( /* webpackChunkName: "a-lodash" */ 'lodash');

// b.js
import $ from 'jquery';
import( /* webpackChunkName: "b-react" */ 'react');
import( /* webpackChunkName: "b-lodash" */ 'lodash');

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
    mode: 'development',
    entry: {
        a: './a.js',
        b: './b.js'
    },
    plugins: [new BundleAnalyzerPlugin()],
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendors: {
                    chunks: 'async', // async|initial|all 
                    test: /[\\/]node_modules[\\/]/
                }
            }
        }
    }
};

cacheGroups: {
    vendors: {
      	// test: /[\\/]node_modules[\\/]/,
        test(module, chunks) {
            //...
            return module.type === 'javascript/auto'; 
        },
        priority: -20
    }
}

module.exports = {
    resolve: {
        // 生产环境直接使用 react.min.js
        alias: {
            react: path.resolve(__dirname, './node_modules/react/dist/react.min.js'),
            '@lib': path.resolve(__dirname, './src/lib/')
        }
    }
};

resolve.extensions = ['js', 'json']

rules: [{
    loader: 'babel-loader',
    test: /\.js$/, // test 正则
    exclude: [path.resolve(__dirname, './node_modules')], // 排除绝对路径 Array
    include: [path.resolve(__dirname, './src')] // 查找绝对路径 Array
}];

module.exports = {
    module: {
        rules: [{
            test: /\.js$/,
            include: path.resolve('src'),
            use: [
            		'thread-loader', // 需要放在其他 loader 之前
                // 其他高开销 loader (e.g babel-loader)
            ]
        }]
    }
};

const os = require('os');
const HappyPack = require('happypack');
// 根据 cpu 数量创建线程池 
const happyThreadPool = HappyPack.ThreadPool({
    size: os.cpus().length
});
module.exports = {
    module: {
        rules: [{
            test: /\.js$/,
            use: 'happypack/loader?id=jsx'
        }, {
            test: /\.less$/,
            use: 'happypack/loader?id=styles'
        }]
    },
    plugins: [
        new HappyPack({
            id: 'jsx',
            threads: happyThreadPool,
            loaders: ['babel-loader']
        }),
        new HappyPack({
            id: 'styles',
            threads: 2, // 自定义线程数量 
            loaders: ['style-loader', 'css-loader', 'less-loader']
        })
    ]
};

// 单独的 dll 打包配置文件 webpack.config.dll.js 
const webpack = require('webpack');
const vendors = ['react', 'react-dom']; // 第三方依赖库 
module.exports = {
    mode: 'production',
    entry: {
        vendor: vendors // 打包公共文件的入口文件设为 vendor.js
    },
    output: {
        filename: '[name].[chunkhash].js',
        library: '[name]_[chunkhash]' // 将 verdor 作为 library 导出，并指定全局变量名 [name]_[chunkhash]
    },
    plugins: [
      	new webpack.DllPlugin({
            path: 'manifest.json', // 设置 mainifest.json 路径
            name: '[name]_[chunkhash]',
            context: __dirname
    		})
    ]
};

// 项目配置文件 webpack.config.js 
const webpack = require('webpack');
module.exports = {
    output: {
        filename: '[name].[chunkhash].js'
    },
    entry: {
        app: './src/index.js'
    },
    plugins: [
      	new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./manifest.json') // 导入
    		})
    ]
};

rules: [{
    test: /\.js$/,
    loader: 'babel-loader',
    options: {
        cacheDirectory: true
    },
    exclude: /node_modules/,
    include: [path.resolve('.src')]
}];

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
    optimization: {
        minimizer: [new TerserPlugin({
            cache: true, // 开启缓存
            parallel: true // 多线程
        })]
    }
};

// package.json
{
    "name": "tree-shaking-side-effect",
    "sideEffects": ["./src/utils.js"]
}