一对一直播源码:利用动态导入分包优化前端性能
一对一直播源码:利用动态导入分包优化前端性能
动态导入是我们常用的分包方式,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) })
以上就是一对一直播源码:利用动态导入分包优化前端性能, 更多内容欢迎关注之后的文章