webpack系统学习（六）打包分析，Preload和Prefetch

最新推荐文章于 2024-08-07 02:17:53 发布

慌张的唐同学

最新推荐文章于 2024-08-07 02:17:53 发布

阅读量3.2k

点赞数 4

分类专栏： webpack 文章标签： webpack 前端 node.js

本文链接：https://blog.csdn.net/Niall_Tonshall/article/details/122931519

版权

本文深入探讨webpack的打包分析，推荐使用Webpack Bundle Analyzer进行详细分析。同时，介绍了Preload和Prefetch在提升用户体验上的作用。Preload用于加载当前页面急需资源，不阻塞onload事件，而Prefetch则在空闲时间加载将来可能需要的资源，两者结合能有效优化前端性能。

摘要由CSDN通过智能技术生成

1. 打包分析

我们需要在使用webpack的时候添加一些配置：

webpack --profile --json > stats.json

这个配置会在打包完成之后生成一个stats.json文件，这个文件中就包含了一些打包过程和打包结果的很多信息，我们可以借助下面的几个网站来上传该文件并分析：
http://webpack.github.com/analyse/；
http://alexkuz.github.io/webpack-chart/；

这里我推荐使用Webpack Bundle Analyzer

npm install --save-dev webpack-bundle-analyzer

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
   
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}