代码分割
使用 JavaScript 进行前端开发,如果不进行代码分割,最后会打包成一个很大的 JS 文件。大文件的下载时间就会比较长,而用户有可能并不需要一次性加载所有的功能,完全没有必要下载这么大的文件。
所以,很有必要将较大的 JS 包拆分成多个更小的包,也就是代码分割。这些小包可以按需或一步加载。之前我们使用 webpack 就能做到,parcel 使用起来则更加简单。
Parcel
Parcel 是一个极速零配置 web 应用打包工具。
下面这个栗子展示了如何使用 Parcel:
首先,文件目录:
index.html
index.js
package.json
someModule.js
这个例子中,只在 index.html 中引入 index.js 文件,然后通过一个按钮事件加载 someModule.js 文件,并用它里面的方法来渲染一些内容。
文件内容:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Code Splitting like Humans</title>
</head>
<body>
<button id="bt">Click</button>
<div class="holder"></div>
<script src="./index.js"></script>
</body>
</html>
someModule:
console.log("someModule.js loaded");
module.exports = {
render : function(element){
element.innerHTML = "You clicked a button";
}
}
index:
console.log("index.js loaded");
window.onload = function(){
document.querySelector("#bt").addEventListener('click',function(evt){
console.log("Button Clicked");
import('./someModule').then(function (page) {
page.render(document.querySelector(".holder"));
});
});
}
下面,运行 parcel 即可
parcel index.html
someModule 将会在按钮被点击之后才被加载。