webpack学习笔记（七）代码分离

原创已于 2022-10-08 14:58:28 修改 · 617 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #学习 #前端

于 2022-10-06 20:54:36 首次发布

webpack 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了Webpack如何通过代码分离来提升应用性能，包括配置入口节点、防止重复的分离方法及动态导入等技术手段，并探讨了懒加载和预加载的工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack特性：代码分离
能够把代码分离到不同的bundle中

bundle是打包分离出来的文件，然后把这些文件按需加载，或者是并行加载。
代码分离科研用于获取更小的bundle以及控制资源加载的优先级，可以极大缩短加载时间。

常用的代码分离有三种：
（一）配置入口节点
使用entry配置手动地分离代码
缺点：如果是多个入口，那么这些入口的共享文件会分别在每个包里重复打包
（二）防止重复的分离方法
在入口的地方通过Entry dependencies 或者通过SplitChunksPlugin来去重和代码分离
（三）动态导入
通过模块的内联函数import调用来分离代码

第一种方法
在这里插入图片描述

output: {
        filename:'[name].bundle.js',
}

在这里插入图片描述
第二种方法：

引入三个js文件

第二种方法（插件形式）：
第一种方法+webpack自带的插件进行优化

第三种方法（动态导入）:

// 抽离lodash文件
function getComponent(){
    //import函数返回的是promise
    return import('lodash').then(({default:_})=>{
        const element = document.createElement('div');
        element.innerHTML = _.join(['hey','tea'],' ')
        return element;
    })
}

getComponent().then((element)=>{
    document.body.appendChild(element);
})

在需要用到lodash的js中引入上述文件，就可以动态导入。

在这里插入图片描述
动态导入的方法可以和静态导入一起使用

懒加载
懒加载或者按需加载，是一种很好的优化页面或应用的方式，这种方式其实是先把你的代码在一些逻辑点处分离开，然后在一些代码块中完成某些操作后，立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度，减轻了它的总体体积，因为某些代码可能永远不会被加载。

math.js

export const add = (x,y)=>{
    return x+y;
}

export const minus = (x,y)=>{
    return x-y;
}

index.js

// 懒加载，在用户不点击该按钮时math.js不会加载
// 当用户点击了该按钮时，才会请求math这个资源
const button = document.createElement('button');
button.textContent = '点击执行加法运算';
button.addEventListener('click',()=>{
    import(/* webpackChunkName:'math' */'./math.js').then(({add})=>{
        console.log(add(4,5));
    })
})

document.body.appendChild(button);

预加载
webpack v4.6.0+增加了对预获取和预加载的支持。
在声明import时，使用下面这些内置指令，可以让webpack输出“resource hint（资源提示）”来告知浏览器：

prefectch（预获取）：将来某些导航下可能需要的资源
preload（预加载）：当前导航下可能需要的资源

使用魔法注释来完成预获取和预加载

const button = document.createElement('button');
button.textContent = '点击执行加法运算';
button.addEventListener('click',()=>{
    //魔法注释
    import(/* webpackChunkName:'math',webpackPrefecth:true */'./math.js').then(({add})=>{
        console.log(add(4,5));
    })
})

document.body.appendChild(button);

第一次访问页面的时候加载了，

<link rel="prefetch" as="script" href="http://localhost:8080/math.bundle.js">

使用预获取，在head中添加了这个标签，作用为：当首页面的内容都加载完毕，在网络空闲的时候再去加载打包好的math.bundle.js

preLoad与懒加载类似，第一次访问页面的时候没有加载。当点击按钮时才加载