Webpack高级学习：优化代码运行性能-Code Split-代码分割-多入口按需加载

初始化+安装

npm init -y
npm i webpack webpack-cli html-webpack-plugin -D

运行打包：

npx webpack

发现 一上来3个js文件都加载了

我们希望一开始不这样加载 ，点击的时候才加载

想要实现按需加载，动态导入模块。还需要额外配置：

import { sum } from './math'
console.log('hello main')
console.log(sum(1, 5, 5))
document.getElementById('btn').onclick = function () {
    document.getElementById("btn").onclick = function () {
        // 动态导入 --> 实现按需加载
        // 即使只被引用了一次，也会代码分割
        import("./count")
            .then((res) => {
                console.log('模块加载成功',res)
            })
            .catch((err) => {
                console.log('模块加载失败',err)
            });
    };
}

一上来加载

点击按钮加载

如何想要运行代码，由于是默认暴露，函数在default里面

import { sum } from './math'
console.log('hello main')
console.log(sum(1, 5, 5))
document.getElementById('btn').onclick = function () {
    document.getElementById("btn").onclick = function () {
        // 动态导入 --> 实现按需加载
        // 即使只被引用了一次，也会代码分割
        import("./count")
            .then((res) => {
                console.log('模块加载成功',res.default(2,5))
            })
            .catch((err) => {
                console.log('模块加载失败',err)
            });
    };
}