webpack配置详解 - 34.optimization

optimization来对打包结果进行优化（生产环境优化）。

文档: https://webpack.docschina.org/configuration/optimization/

1.文件结构

 

2.代码

a.js

export function add(x, y) {
    return x + y
}

index.js

// webpackChunkName:指定生成的文件名
import(/*webpackChunkName: 'a'*/'./a')
    .then(({add}) => {
        console.log('res:', add(1, 2))
    })
    .catch((err) => {
        console.log('err:', err)
    })

webpack.config.js

const {resolve} = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const terserWebpackPlugin = require('terser-webpack-plugin')

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: "js/[name].[contenthash:10].js",
        path: resolve(__dirname, 'build'),
        // 修改生成chunk文件的名字
        chunkFilename: "js/[name].[contenthash:10]_chunk.js"
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
        ]
    },
    plugins: [new htmlWebpackPlugin()],
    // optimization 要在生产环境下使用
    mode: 'production',
    //解析模块规则
    resolve: {
        alias: {
            $css: resolve(__dirname, 'src/css')
        },
        extensions: ['.js', '.json', '.jsx', '.css'],
        modules: [resolve(__dirname, '../../node_modules'), 'node_modules']
    },
    optimization: {
        splitChunks: {
            chunks: 'all',
            //默认值，可以不写
            /*miniSize: 30 * 1024,//分割的 chunk 最小为30kb (文件小于30kb就不分割)
            maxSize: 0,//最大没有限制
            minChunks: 1,//被提取的 chunk 最少被引用以1次
            maxAsyncRequests: 5,//按需加载时，并行加载的文件的最大数量
            maxInitialRequests: 3,//入口js文件，最大并行请求数量
            automaticNameDelimiter: '~',//命名连接符
            name: true,//可以使用命名规则
            //分割 chunk 的组
            cacheGroups: {
                //node_modules 文件会被打包到 vendors 组的 chunk 中。 --> vendors~xxx.js
                //满足上面的公共规则, 如: 大小超过30kb,至少被引用一次。
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    // 打包的优先级
                    priority: -10
                },
                default: {
                    //要提取的chunk至少被引用两次
                    minChunks: 2,
                    //打包的优先级
                    priority: -20,
                    //如果当前被打包的模块，和之前已经被提取的模块是同一个，就会复用，而不是重新打包
                    reuseExistingChunk: true,
                }

            }*/

        },
        // 将当前模块的记录其他模块的hash单独打包为一个文件 runtime
        // 解决：修改a文件导致b文件的contenthash变化
        runtimeChunk: {
            name: entrypoint => `runtime-${entrypoint.name}`
        },
        //配置生产环境的压缩方案: js / css
        minimizer: [
            new terserWebpackPlugin({
                // 开启缓存
                cache: true,
                //开启多进程打包
                parallel: true,
                //启动source-map
                sourceMap: true
            })
        ]
    }
}

 

3.打包 

$ webpack

 

 end~