webapck 2的代码分片

2024年2月2日 222次阅读 来源: 秋水易寒

前端的代码分片，或许说是按需加载，本质上是因为前端页面愈来愈庞杂，代码体积愈来愈大，程序员需要对页面资本的加载做细粒度的掌握。按需加载当然是好东西，然则会让页面逻辑变得越发庞杂。幸亏webpack涌现，让按需加载变得简朴多了。

我们来做一个简朴的demo，完全代码
demo的功用很简朴，单击一个按钮，然后去加载一个js文件并实行。

index.html文件:

<button id="btn">load script</button>

index.js文件

document.getElementById('btn').addEventListener('click',function(){
    require.ensure([],()=>{
        let hello = require('./Hello').default;
        hello();
    },'Hello')
})

Hello.js文件

export default function hello(){
    alert('hello.')
}

在 click 的事宜处置惩罚函数中,经由过程 require.ensure标记支解点，然后加载Hello.js并赋值给变量hello，末了挪用该要领。这里需要说一下的是require.ensure的第三参数，是这个分片chunk的name。假如不加这个参数，默许会以chunkid来定名该文件。这个参数在开辟环境照样很有效的，毕竟1.js的文件名，让人很难定位文件。

因为 ES2015 Loader spec 定义了 import() 要领来在运行时动态的加载javascript文件，所以webpack也把import()作为split code的支解点。

假如想用酷炫的import()语法，还需要装置一个插件:
npm i babel-plugin-syntax-dynamic-import --save-dev。然后，就能够把上面的 index.js文件改成：

document.getElementById('btn').addEventListener('click',function(){
   import('./Hello').then((Hello) => {
        let hello = Hello.default;
        hello();
    }).catch(err => console.log('Failed to load moment', err))
})

import()支撑promise语法，所以可以用catch来处置惩罚加载文件引发的异常。然则，它也有它的缺点，import()没法给这个文件定名（类似于require.ensure的第三个参数），如许打包出来的文件都是用数字来标示的，异常难以辨别，在开辟环境下，会使定位毛病变的越发难题。

另外，这两种语法在援用文件时，文件途径都不可所以表达式。比方：

 require.ensure([],()=>{
        let path = './Hello';
        let hello = require(path).default;
        hello();
    },'Hello')

如许会报错，没法一般加载文件。

    原文作者：秋水易寒
    原文地址: https://segmentfault.com/a/1190000008929951
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞