1、使用loader的时候尽量指定exclude和inlucde来提高文件查找效率，避免不必要的查找，设置noParse参数

module: {
    noParse: /jquery/, // 不去解析jquery中的依赖,具体根据项目要求来实现
    rules:[
        {
            test: /\.js?$/, 
            use: [
                { loader: 'babel-loader' },
                {
                    // 自定义的同步处理loader
                    loader: 'replaceLoader',
                    options: {
                        name: 'hellonew'
                    }
                },
                {
                    // 自定义的异步处理loader
                    loader: 'asyncReplaceLoader',
                    options: {
                        name: 'myloader'
                    }
                }
            ],
            exclude: ['/node_modules'],
            include: [path.resolve(__dirname, '../src/asset/less/component/js')]
        }
    ]
},

2、对css公共的模块进行分离

const CssMiniExtreactPlugin = require('mini-css-extract-plugin')
// postcss自动给css3加上前缀
module{
    rules:[
        {
           test: /\.less?$/,
                // loader的执行顺序，从下到上，从右到左
                use: [
                    {
                        loader: CssMiniExtreactPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },
                    {
                        // css-loader
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2 // import引入的less文件也执行less-loader
                            // modules: true
                            // minimize: true
                        }
                    },
                    'postcss-loader',
                    'less-loader'
                ]
        }
    ]
}
optimization: {
    //拆分css，公共的使用过两次的chunk打包到common.css方便做缓存,单独的css每个页面打包一个针对当前的页面的css
    splitChunks: {
            name: true,
            cacheGroups: {
                // 打包公共的css
                styles: {
                    name: 'common',
                    test: /\.less$/,
                    chunks: 'all',
                    enforce: true,
                    minChunks: 2
                },
            }
        }
    }
}  

3、拆分js，将公共的js拆分方便把相同的内容缓存下来

// 配置splitChunks
optimization: {
    splitChunks: {
        name: true,
        cacheGroups: {
            vendors: {
                chunks: 'async',
                name: 'verdon',
                test: /[\\/]node_modules[\\/]/,
                priority: -20,
                minSize: 0
                // filename: '[name].js'
            },
            default: {
                chunks: 'all',
                name: 'common',
                minChunks: 1,
                test: /[\\/]node_modules[\\/]/, // 配置打包哪里的文件
                priority: -10
                // reuseExistingChunk: true
            }
        }
    }
}

4、对图片打包，适当采用base64位格式，如css sprite图片可以使用base64位格式

 rules:[
     {
         test: /\.(jpg|png|svg|gif)?$/,
         use: {
             // loader: 'file-loader',
             loader: 'url-loader', // url-loader把图片打包成base64格式了
             options: {
                 // placeholder
                 name: '[name]_[hash].[ext]',
                 outputPath: 'images/', // 将图片打包到指定的文件夹下
                 limit: 204800 // 小于限定尺寸图片就被打包到images目录下
             }
         }
     }
]