《二十二》对打包时间和打包体积进行分析

花铛

已于 2023-12-08 08:52:13 修改

阅读量56

点赞数

分类专栏： Webpack 文章标签： Webpack

于 2023-11-02 18:06:57 首次发布

本文链接：https://blog.csdn.net/wsln_123456/article/details/134188280

版权

Webpack 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

对打包时间的分析：

可以使用 SpeedMeasurePlugin 插件来分析每个 Loader 和每个 Plugin 消耗的打包时间。

新建 index.html、src/index.css 和 src/index.js 文件，并编写代码。

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

src/index.css
body {
  width: 100%;
  height: 100%;
}

.container {
	width: 100%;
  height: 100%;
  background: black;
}

.title {
  color: white;
  font-size: 24px;
}

// src/index.js
import './index.css'

console.log('index')

运行 webpack 命令进行打包，只能看到总的打包时间。
安装 SpeedMeasurePlugin 插件：npm install speed-measure-webpack-plugin --save-dev。

在 webpack.config.js 配置文件中进行配置。

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const config = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
    }),
  ]
}
module.exports = config

// 引入 SpeedMeasurePlugin 插件
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
// 实例化 SpeedMeasurePlugin 类
const smp = new SpeedMeasurePlugin()
// 调用 SpeedMeasurePlugin 实例对象的 wrap() 方法包裹要导出的 Webpack 的配置
smp.wrap(config)

再次运行 webpack 命令进行打包，可以看到总的打包时间和每个 Loader、Plugin 消耗的打包时间。

对打包体积的分析：

直接使用打包命令：

官方针对打包命令提供了一个参数 profile，可以将打包后文件的信息生成一个文件，就可以在这个文件中查看打包后文件的信息。

在打包命令后面跟上 --profile --json=stats.json，表示将打包后文件的相关信息打包后为 JSON 格式，并且该文件名为 stats.json。运行 webpack --profile --json=stats.json 命令进行打包，会发现，在项目的根目录下生成了 stats.json 文件。
但其实 JSON 文件看起来也不是那么直观，可以访问 http://webpack.github.io/analyse/ 网站，将 JSON 文件上传上去转化为一个可视化的界面来查看。

使用 WebpackBundleAnalyzer 插件：

WebpackBundleAnalyzer 插件会在打包成功之后，开启一个本地服务，就能看到打包后文件的大小。

安装 WebpackBundleAnalyzer 插件：npm install webpack-bundle-analyzer --save-dev。

在 Webpack 配置文件中进行配置。

const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer')

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

运行 webpack 命令进行打包，会开启一个本地服务，自动在浏览器中显示打包后文件的相关信息。

花铛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《二十二》对打包时间和打包体积进行分析

可以使用 SpeedMeasurePlugin 插件来分析每个 Loader 和每个 Plugin 消耗的打包时间。新建index.html和文件，并编写代码。运行webpack命令进行打包，只能看到总的打包时间。。在配置文件中进行配置。再次运行webpack命令进行打包，可以看到总的打包时间和每个 Loader、Plugin 消耗的打包时间。
复制链接

扫一扫