对打包时间的分析:
可以使用 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
命令进行打包,会开启一个本地服务,自动在浏览器中显示打包后文件的相关信息。