1.懒加载
懒加载我们都知道，不即时加载所有资源，而是在需要的时候才加载。想想有这么一个业务场景，有一个页面，内容繁多，其中有一个视频播放区块，点击按钮会播放视频，视频的js是一个插件（假设功能复杂，代码量很大），用户有可能点击播放视频，也有可能不播放，而浏览页面中其他的内容，在传统的书写方式中，我们只能家在全部资源，那么如果他不点击播放，却用很多的流量去加载这个js，实在浪费。现在我们可以使用懒加载来美化这个过程，只有当用户点击播放了，我们再来加载这个js
//index.js
let button = document.createElement("button");
button.innerText = "播放";
button.addEventListener("click", function() {
// es6 草案中的语法， 用jsonp实现动态加载文件, 需要插件@babel/plugin-syntax-dynamic-import
import("./source.js").then(data => {
// promise对象
console.log(data.default); // 挂载在了default属性上
});
});
document.body.appendChild(button);
打包（npx webpack）时，会提醒，缺少必要的插件@babel/plugin-syntax-dynamic-import，这个插件是babel提供的，用来动态加载文件。
安装完成之后，在webpack配置文件中将这个插件加到js模块的配置中
//webpack.config.js
module: {
noParse: /jquery/, // 第一个优化点： 不去解析jquery中的依赖库
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
include: path.resolve("src"),
use: [
{
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
plugins: ["@babel/plugin-syntax-dynamic-import"]
}
}
]
}
]
}
打包，success.......大功告成
懒加载js.gif
如果你跟着做到这里能达到懒加载的效果并且不报错，那么后边的就不用看了。我在做这个例子的时候，一切准备就绪之后，打包文件一直报如下错误：
Module parse failed: 'import' and 'export' may only appear at the top level (45:8)
You may need an appropriate loader to handle this file type.
google了下，可能是因为这个包“acorn”的原因，它是一个webpack的依赖，试着更新下它
npm update acorn --depth 20
到这，我的问题是解决了。
2.热更新
首先在devServer中添加hot字段，并且配置为true；然后再插件中引入热更新插件
//webpack.config.js
plugins: [
...
new webpack.NamedModulesPlugin(), // 打印更新的模块路径 (首先，需引入webpack)
new webpack.HotModuleReplacementPlugin() //热更新插件
]
// index.js
import str from "./source";
console.log(str);
//source.js
module.exports = "source";
运行 npx webpack-dev-server,可以看到，每次修改source并且保存后，页面都会刷新一次。这不是热更新，因为它每次都会强刷。修改index.js
// index.js
import str from "./source";
console.log(str);
if (module.hot) {
module.hot.accept("./source", () => {
let str = require("./source");
console.log(str);
});
}
这样，每次更改source，不刷新页面，会直接替换资源
