懒加载
就是延迟加载js文件或其他资源。
编译打包的时候，懒加载的文件不会被打入，只有在需要使用的时候，才回去下载对应的资源。
适用于不经常使用，只会在特定场景出现的逻辑或资源。
举个例子
实现：点击按钮，加载js文件，执行里面的逻辑。
准备：一个入口文件aaa.js，懒加载文件bbb.js
aaa.js
let button = document.createElement('button')
button.innerHTML = "button"
button.addEventListener('click', function () {
console.log('click')
//es6语法 jsonp实现动态加载文件
import('./bbb.js').then((res) => {
console.log(res.default)
})
})
document.body.appendChild(button)bbb.js
export default "maomao"解析：
bbb.js里面导出了一个字符串；
然后在aaa.js里面创建了一个按钮，点击按钮触发bbb.js的动态加载，并打印结果
运行：
npm run dev查看结果。
发现，点击button之后，控制台打印了一个结构。
这就是bbb.js里面导出的结果。
然后我们可以拿到default的内容，比如，把“maomao”放到按钮文案上。
修改aaa.js代码：
let button = document.createElement('button')
button.innerHTML = "button"
button.addEventListener('click', function () {
console.log('click')
//es6语法 jsonp实现动态加载文件
import('./bbb.js').then((res) => {
console.log(res)
button.innerHTML = res.default
})
})
document.body.appendChild(button)查看结果，发现点击“button”按钮之后，按钮上的文案变成了“maomao”。
这就实现了文件动态加载，并获取对应内容的功能。
小结：
主要靠的是动态import语法
import('./bbb.js').then((res) => {
console.log(res)
})如果是首次新建的项目，需要在webpack中添加plugin-syntax-dynamic-import插件。npm i plugin-syntax-dynamic-impor -D如果是已经添加过babel相关插件集，可能不会出现报错问题。
babel插件添加示例：
1、.babelrc文件内容：
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-transform-runtime",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-syntax-jsx"
]
}2、webpack配置
module.exports = {
module: {//模块
rules: [//规则，多个loader
{
test: /\.js$/,
use: {
//用 babel-loader 把es6转es5
loader: "babel-loader",
}
},
]
}
}3、安装相关插件
npm i @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties @babel/plugin-syntax-jsx -D热更新
开发中每次更改页面，会触发页面刷新，如果只想更新一个文件，就需要用到热更新。
1、在devServer中配置hot: true，来启用热更新。
module.exports = {
devServer: {//开发服务器配置
hot: true,//启用热更新
port: 3000,//端口号
progress: true,//进度条
contentBase: "./dist",//返回的资源目录
compress: true,//是否压缩
},
plugins: [//存放所有插件
new webpack.NamedModulesPlugin(),//打印更新的模块路径
new webpack.HotModuleReplacementPlugin(),//热更新插件
],
}
但是由于webpack版本问题，webpack5已经不支持NamedModulesPlugin插件，所以该插件配置需要去掉，改为配置optimization
module.exports = {
optimization: {
moduleIds: 'named',
},
devServer: {//开发服务器配置
hot: true,//启用热更新
port: 3000,//端口号
progress: true,//进度条
contentBase: "./dist",//返回的资源目录
compress: true,//是否压缩
},
plugins: [//存放所有插件
new webpack.HotModuleReplacementPlugin(),//热更新插件
],
}配置完之后，我们写下测试代码。
入口文件：aaa.js
//导入bbb.js并打印结果
import str from './bbb.js'
console.log(str)
//判断是否启用热更新
if (module.hot) {
//如果启用，则动态加载bbb.js
module.hot.accept('./bbb.js', () => {
console.log('文件更新了')
//热更新完成之后，自动加载bbb.js，完成最新输出的打印
let str = require('./bbb.js')
console.log(str)
})
}
bbb.js
export default "maomao"运行：
npm run dev查看控制台结果。
尝试更新bbb.js文件，再次运行。
查看控制台是否有更新的打印。
如果失败，不要惊讶，因为我也尝试失败了。。。
问题留给后续。
睡觉了，晚安~
暂无评论