webpack code spliting

• 目录

  
  捕获.JPG

  ，

当引入多个文件时，一个打包的文件会非常大，浏览器加载需要很长的时间，影响体验，可以进行code spliting拆分打包的代码

webpack.config.js

const path = require('path')
module.exports ={
    mode:'development',
    entry:{
       // lodash:"./src/fun.js",
        main:'./src/index.js'
    },
    module:{
        rules:[
        ]
    },
    output:{
        filename:'[name].js',
        path:path.resolve(__dirname,'dist')
    },
    optimization:{
        splitChunks:{
            chunks: "all",//默认async 分割只对异步生效 all全部生效 
            minSize: 30000,//文件最小大小  字节单位
            minChunks: 1,//最少的文件数
            maxAsyncRequests: 5,//最大异步请求数
            maxInitialRequests: 3,//最大初始化请求数
            automaticNameDelimiter: '~',
            name: true,
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10
                },
            default: {
                    minChunks: 2,
                    priority: -20,
                    reuseExistingChunk: true
                }
            }
            //  codespliting
        }
    }
}