webpack性能优化配置与实战（一）

蜡笔小心_
1,233 阅读7分钟

前言

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

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

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

项目初始化

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

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

image.png

安装webpack

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

screenshots.gif

👉 安装完成之后，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'
    }
}

模块中配置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"
    }
}

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

打包运行

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

npm run build

screenshots.gif

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

npm start

screenshots.gif

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

image.png

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

image.png

由于安装的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,
    }
}

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

screenshots.gif

数据分析

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

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

👉 安装插件

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

image.png

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

screenshots.gif

👉 安装完成之后，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')
  • 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
            })
        }
    })
]
  • 编译失败的时候，需要new一下FriendlyErrorsWebpackPlugin插件，里面有一个onErrors的方法，会返回错误信息，并通过notifier将错误信息通过弹窗的信息显示出来。

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

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

screenshots.gif

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

✌️ 对编译速度进行分析

👉 安装插件

npm install speed-measure-webpack5-plugin -D

screenshots.gif

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

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

👉 将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
                })
            }
        })
    ]
})

👉 此时再来运行打包命令

screenshots.gif

  • 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

screenshots.gif

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

👉 引入插件并使用

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
  • 直接从插件中解构出一个方法，然后去使用这个方法。
plugins: [
    new FriendlyErrorsWebpackPlugin({
        onErrors: (severity, errors) => {
            let error = errors[0];
            notifier.notify({
                title: 'webpack编译失败',
                message: severity + ': ' + error.name,
                subtitle: error.file || '',
                icon
            })
        }
    }),
    new BundleAnalyzerPlugin()
]
  • 在plugins中直接new BundleAnalyzerPlugin()

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

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

screenshots.gif

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

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

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

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

screenshots.gif

  • 配置完成之后，重新执行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服务器展示。

screenshots.gif

总结

本篇文章主要是针对webpack性能优化配置部分内容的讲解，从webpack项目的初始化及对数据分析的插件等内容进行详细说明。

下一章节会针对编译时间的优化内容进行讲解，包含的插件会比较多，所以会单独放在一个章节中。

我正在参与掘金技术社区创作者签约计划招募活动，点击链接报名投稿。

avatar
文章
阅读
粉丝