webpack——懒加载(十三)

web pack.common.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',  //babel-loader:babel和webpack中间的桥梁
                options: {
                    "presets": [
                        [
                        //es6=>es5
                        "@babel/preset-env", {
                            "targets": {
                                // "edge": "17",
                                // "firefox": "60",
                                // "chrome": "67",
                                "safari": "11.1",  //以上版本已经支持es6,不需要再做es6=>es5
                            },
                            useBuiltIns: 'usage'  
                        }
                        ],
                        "@babel/preset-react", //转化react代码
                    ], 
                }
            },
            {
                test:/\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
        ]
    },
    entry: {
        app: './src/index.js',
        // lodash: './src/lodash.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, '../dist'),
        //publicPath也会在服务器脚本用到,确保资源能够在 http://localhost:3000下正确访问
        // publicPath: '/'  
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new CleanWebpackPlugin(),
    ],
    //代码分割
    optimization: {
        splitChunks: {
            //对异步代码实现代码分割  //initial: 同步代码 //all: 对同步异步代码都进行代码分割
            //使用all对同步代码实现代码分割时,还会走cacheGroups这里,需要在这里做一些配置
            chunks: "all", 
            minSize: 30000,  //大于该值做代码分割
            minChunks: 1,
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            automaticNameDelimiter: '~',
            name: true,
            cacheGroups: {
                vendors: {  //同步代码走这里
                    //引入的库文件是否在node_modules中,是就放在vendor组中
                    test: /[\\/]node_modules[\\/]/,  
                    priority: -10,
                    // filename: 'vendors.js'
                },
                default: {     
                    priority: -20,
                    reuseExistingChunk: true,
                }
            }
        }
    }
}

src/index.js

// 实现懒加载,当页面点击的时候才执行getComponent(),加载lodash.js
// 懒加载就是通过import异步加载某一模块
function getComponent() {
    //魔法注释: /* webpackChunkName: "lodash" */
    return import(/* webpackChunkName: "lodash" */ 'lodash').then(({default: _}) => {
        var ele = document.createElement('div')
        ele.innerHTML = _.join(['yang', 'yue'], '-')
        return ele
    })
}

document.addEventListener('click', () => {
    getComponent().then(ele => {
        document.body.appendChild(ele)
    })
})

运行npm run dev-build,打开控制台网络

点击页面,加载vendors~lodash.bundle.js

通过import对一些模块实现懒加载,点击页面执行getComponent()才会加载lodash
实现懒加载,就是当页面点击的时候才执行getComponent(),加载lodash.js
懒加载就是通过import异步加载某一模块
这样页面就可以很快被展示出来。

上面index.js还可以写为:

async function getComponent() {
    const {default: _} = await import(/* webpackChunkName: "lodash" */ 'lodash')
    const ele = document.createElement('div')
    ele.innerHTML = _.join(['yang', 'yue'], '-')
    return ele
}

document.addEventListener('click', () => {
    getComponent().then(ele => {
        document.body.appendChild(ele)
    })
})

补充:
什么是chunk?
通过代码分割,打包后生成多个js文件,每一个js文件就是一个chunk
什么是minChunks?
optimization中的minChunks: 打包生成的chunk有几个用到了lodash.js这个文件