首页
前端开发
Webpack
webpack-plugin-extended-network Webpack扩展加载分析插件

webpack-plugin-extended-network Webpack扩展加载分析插件

0 次浏览 0 条评论
zip
zip

性能的利器之一是webpack-plugin-extended-network，一个用来抓浏览器端真实加载情况的 Webpack 插件，适合搞性能优化的你。它靠Puppeteer模拟真实页面访问，能抓到代码拆分之后的加载路径，挺细的，也挺实用。

安装简单，npm install --save webpack-plugin-extended-network，没啥花活。用法也不复杂，你只要把它加到 Webpack 插件数组里就行：

const NetworkPlugin = require('webpack-plugin-extended-network');


module.exports = {
  // 其他配置
  plugins: [
    new NetworkPlugin({ url: 'http://localhost:3000' })
  ]
}

如果你是配了devServer的项目，也支持，不过注意有些 API 还在变，毕竟插件还在实验阶段，嗯，小心踩坑。

配合代码拆分效果还不错，尤其你用React + Webpack那种组件级懒加载，也能跟得上。像文章《Webpack React Boilerplate 带代码拆分功能的同构模板》里那种项目，用这个插件准没错。

要是你对性能比较敏感，比如想看看页面到底在什么时候加载了哪些 chunk，响应时间是不是被谁拖慢了，这个插件能给你挺直观的数据反馈，不用瞎猜。

如果你平时也在用像Github Actions 做 Webpack 性能，这个插件也能补上浏览器这头的信息，更完整。

建议本地先跑跑试试看，观察下各个 chunk 的加载路径，遇到问题再慢慢调。记得把url配置好，不然插件也找不到入口页面哈。

zip 文件大小：364.55KB