前言

webpack作为常用的项目打包工具，应该是目前使用vue-cli脚手架构建vue项目时，很多人的首选工具。但是很多人在使用webpack的时候，都是用的默认配置，可能会在运行很慢的情况下或者打包出来的js加载过于缓慢的时候，去网上搜索一些优化项进行配置，做一些零零散散的优化很难让开发的项目有一个系统性的配置规则。

可能今天js加载慢，就去优化js。明天css渲染不出来了，就去优化css。也有可能在webpack里面配置了一遍，然后又去安装其他插件再重新配置一遍。

本篇文章将会从配置、实战两个方面去讲清楚webpack性能优化。

项目初始化

👉 项目初始化第一步就是新建一个项目目录了。

👉 在电脑任意地方新建一个webpack目录，然后在目录中新建一个package.json文件。

安装webpack

npm i webpack webpack-cli html-webpack-plugin webpack-dev-server cross-env -D 
1

• webpack肯定是必须的。
• webpack-cli是webpack命令行工具。
• html-webpack-plugin自动产出html插件。
• cross-env会在后面详细讲解怎么使用。

👉 安装完成之后，package.json中会自动生成安装完成的webpack插件和版本信息。

配置webpack

👉 在webpack项目目录下新建webpack.config.js配置文件

👉 配置文件中先引入path，然后在导入模块信息

const path = require('path')

module.exports = {mode: 'development',devtool: 'source-map',context: process.cwd(),entry: {main: './src/index.js'},output: {path: path.resolve(__dirname, 'dist'),filename: '[name].js'}
} 
1
2
3
4

模块中配置webpack信息:

• mode选择开发模式
• devtool开发工具选择source-map
• content当前的工作目录
• entry入口文件
• output输出路径

配置package.json

👉 package.json文件中除了安装的插件信息之外，还需要配置其他信息。

• name项目名称* version版本信息* main入口文件* scripts调试信息* build打包命令* start启动命令

{"name": "webpack","version": "1.0.0","description": "","main": "index.js","scripts": {"build": "webpack","start": "webpack serve"},"keywords": [],"author": "","license": "ISC","devDependencies": {"cross-env": "^7.0.3","html-webpack-plugin": "^5.5.0","webpack": "^5.73.0","webpack-cli": "^4.10.0","webpack-dev-server": "^4.9.3"}
} 
1
2

配置信息完善之后，需要在webpack目录下新建src文件夹 - index.js文件

打包运行

👉 在控制台运行打包命令，打包完成后，项目目录下会自动新增一个dist文件夹

npm run build 
1

👉 打包完成后即可启动webpack服务了

npm start 
1

👉 启动完成会得到一个访问地址

👉 我们可以打开浏览器去访问一下看看

由于安装的webpack版本问题，可能导致运行起来之后无法访问任何信息，可以通过升级webpack到5.9版本以上，或者在webpack配置文件中添加devServer配置信息。

const path = require('path');

module.exports = {mode: 'none',devtool: 'source-map',context: process.cwd(),entry: {main: './src/index.js'},output: {path: path.resolve(__dirname, 'dist'),filename: '[name].js'},devServer: {static:'./',host: "localhost",port: 8080,hot: true,}
} 
1
2
3
4

💥 注意一下：如果修改了webpack配置信息，需要重新打包才能运行起来。

数据分析

👉 项目打包完成之后，还需要分析打包出来的数据到底快不快？运行起来的速度如何？

☝️ 对输出的日志进行美化

👉 安装插件

npm i friendly-errors-webpack-plugin node-notifier -D 
1

😲 如果报错了，可以在后面加上 --force，然后重新安装一下

👉 安装完成之后，package.json文件里面同样会出现安装的插件信息。

friendly-errors-webpack-plugin可以识别某些类别的webpack错误，为开发者提供更好的体验。

node-notifier作为一个通知工具使用。

👉 引入并配置插件

👉 现将安装的插件引入到webpack配置文件中。

const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const notifier = require('node-notifier');
const icon = path.join(__dirname, 'icon.png') 
1
2
3

• icon是一个错误提示的图片，会在打包失败之后显示出来。

👉 在webpack配置文件中加上plugins，用于配置插件信息

plugins: [new FriendlyErrorsWebpackPlugin({onErrors: (severity, errors) => {let error = errors[0];notifier.notify({title: 'webpack编译失败',message: severity + ': ' + error.name,subtitle: error.file || '',icon})}})
] 
1
2

• 编译失败的时候，需要new一下FriendlyErrorsWebpackPlugin插件，里面有一个onErrors的方法，会返回错误信息，并通过notifier将错误信息通过弹窗的信息显示出来。

假设我们把一个不存在的文件作为主文件，那么编译的时候就会提示错误信息了。

entry: { // main默认是index.jsmain: './src/index123.js'
} 
1
2

• 编译的时候，右下角就会提示出错误信息。

✌️ 对编译速度进行分析

👉 安装插件

npm install speed-measure-webpack5-plugin -D 
1

👉 引入并配置插件，引入的同时将插件方法new出来

const SpeedMeasureWebpack5Plugin = require('speed-measure-webpack5-plugin')
const smwp = new SpeedMeasureWebpack5Plugin() 
1
2

👉 将module.exports模块的对象通过插件的方法包裹起来

// 使用smwp.wrap()将对象包裹起来
module.exports = smwp.wrap({mode: 'none',devtool: 'source-map',context: process.cwd(),entry: {main: './src/index.js'},output: {path: path.resolve(__dirname, 'dist'),filename: '[name].js'},devServer: {static:'./',host: "localhost",port: 8080,hot: true,},plugins: [new FriendlyErrorsWebpackPlugin({onErrors: (severity, errors) => {let error = errors[0];notifier.notify({title: 'webpack编译失败',message: severity + ': ' + error.name,subtitle: error.file || '',icon})}})]
}) 
1
2
3

👉 此时再来运行打包命令

• DONE Compiled successfully in 103ms打包完成用时103ms
• General output time took 0.125 secs通用输出时间用时0.125s
• FriendlyErrorsWebpackPlugin took 0.027 secs插件用时0.027s（如果插件有多个的时候，会单独列出每一个插件的用时）
• modules with no loaders took 0.013 secsloader模块用时0.013s（这里的模块就是index.js）

👌 对编译的文件体积进行监控分析

👉 安装插件

npm install webpack-bundle-analyzer -D 
1

webpack-bundle-analyzer插件功能主要是生成代码分析报告，用来帮助我们提升代码质量和网站性能。它可以很直观分析打包编译出来的文件包含哪些，大小占比，模块关系，依赖项，重复文件，压缩后的大小等，而我们知道了这些之后，可以对文件进行分割等操作。

👉 引入插件并使用

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

• 直接从插件中解构出一个方法，然后去使用这个方法。

plugins: [new FriendlyErrorsWebpackPlugin({onErrors: (severity, errors) => {let error = errors[0];notifier.notify({title: 'webpack编译失败',message: severity + ': ' + error.name,subtitle: error.file || '',icon})}}),new BundleAnalyzerPlugin()
] 
1
2

• 在plugins中直接new BundleAnalyzerPlugin()

👉 在package.json文件中添加启动项: dev，并执行这个启动项

"scripts": {"build": "webpack","start": "webpack serve","dev": "webpack --progress"
} 
1
2

• 命令执行完成之后，会发现自动启动了Http服务，在浏览器中会直接渲染出打包文件的模块关系。由于现在项目中模块关系比较少，所以没办法进行对比。

👉 配置手动启动打包报告的HTTP服务器

由于我们在plugins中直接new了插件方法，导致它会自动打开HTTP服务器，如果我们想要通过手动的方式去启动服务器，就需要传递一个对象进行配置。

new BundleAnalyzerPlugin({analyzerMode: 'disabled', // 不启动展示打包报告的HTTP服务器generateStatsFile: true // 在dist目录下生成描述文件stats.json
}) 
1
2

• 配置完成之后，重新执行dev命令，会发现没有自动启动HTTP服务器，而是在dist目录下生成了stats.json文件，这个json文件中包含了打包时构建的一些信息，包括打包时间、打包时长、输出路径、打包之后的js文件信息等。* json文件已经生成了，那如果想要看到HTTP服务器展示的内容就得将json文件路径配置到package.json文件中。```
  “scripts”: {“build”: “webpack”,“start”: “webpack serve”,“dev”: “webpack --progress”,“analyzer”: “webpack-bundle-analyzer --port 8888 ./dist/stats.json”
  }

* `analyzer`命令中执行的就是将json文件转为端口号为8888的HTTP服务器展示。



1
2
3
4
5