一对一直播源码：利用动态导入分包优化前端性能

一对一直播源码：利用动态导入分包优化前端性能

动态导入是我们常用的分包方式,webpack 提供了两种动态导入的方式:

第一种, 使用ECMAScript 中的 import() 语法来完成,也是目前最推荐的方式
第二种, 使用webpack 遗留的 require.ensure,目前已经不推荐使用.

比如 我们有一个模块 bar.js

1、该模块我们希望 在代码的运行过程中来加载它(比如判断一个条件成立时加载)
2、因为我们并不确定这个模块中的代码一定会用到,所以最好拆分成一个独立的js文件
3、这样可以保证不用到该内容时, 浏览器不需要加载和处理该文件的js代码
4、这个时候我们就可以使用动态导入

仔细想想,其实我们在开发vue,react 项目时, 使用动态路由懒加载的形式 加载某个页面时,就是使用的动态导入,只不过是不清楚这个概念而已.
动态导入 是webpack 默认提供的功能,不需要我们做特殊的配置就可以使用.
这里就贴出一小段代码,大家明白具体用法就行

当点击btn 按钮时,加载我们打包的about 组件
btn.onclick = function() {
    import('./router/about').then(res =>{
        console.log(res)
    }) 
}

动态文件导入的文件命名:

因为动态导入通常是一定会打包成独立的文件的,所以并不会在cacheGroups中进行配置
那么他们的命名我们可以在ouput 中,通过chunkFilename属性来命名;

output :{
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    chunkFilename: 'chunk_[name].js'
}

但是,你会发现默认情况下我们获取到的[name]会过长和不利于查看

这个时候,如果我们希望修改name 的值,可以通过**magic comments(魔法注释)**的方式来修改

import(/* webpackChunkName: “about” */ './router/about').then(res =>{
    console.log(res)
}) 

以上就是一对一直播源码：利用动态导入分包优化前端性能， 更多内容欢迎关注之后的文章