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

2022-10-08 296

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

ALJKW`LT00~C@Y93IE2]EH9.png

前言

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

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

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

项目初始化

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

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

$7G4HBJHFC`H}_Q{EU%A%7DI.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会在后面详细讲解怎么使用。

$@S@}{1_FL66)R[}V}6{BGSR.png$

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

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
复制代码

Y[MGY_FUVF8W`HCO1XI0CEL.png

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

npm start
复制代码

HM3K~B9{P1XZ}LQSG7@AB03.png

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

F}YMM]9RQJITV5]{VI2F~OI.png

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

@(M3OZL)812BEE)E[[E`1R2.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配置信息，需要重新打包才能运行起来。

TP`NBV57H{C13C4]~UH`Y(Q.png

数据分析

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

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

👉 安装插件

npm i friendly-errors-webpack-plugin node-notifier -D
复制代码

YU52@](0[M@IW~AIPY__NBF.png

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

%(I_XB__3V)$RY6}7DQE2`I.png

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

$8CBK8Y$6{MQM_CV9G1OGXJQ.png$

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

✌️ 对编译速度进行分析

👉 安装插件

npm install speed-measure-webpack5-plugin -D
复制代码

$XO}9AJS2~0%@%LES1}9F8P.png

👉 引入并配置插件，引入的同时将插件方法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
                })
            }
        })
    ]
})
复制代码

👉 此时再来运行打包命令

$RG]P$%%7RNF2G_31YF5{KVP.png$

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
复制代码

%@4TIXEC7`H7`QH3]JR$7_C.png

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"
}
复制代码

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

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

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

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

{)4UW2W7WY79`H)Q8`[UW}8.png

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

JTJQGFJ@A1}{8YGX7}A6O7G.png

总结

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

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

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

前言

项目初始化

安装webpack

配置webpack

配置package.json

打包运行

数据分析

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

👉 安装插件

👉 引入并配置插件

✌️ 对编译速度进行分析

👉 安装插件

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

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

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

👉 安装插件

👉 引入插件并使用

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

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

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

前言

项目初始化

安装webpack

配置webpack

配置package.json

打包运行

数据分析

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

👉 安装插件

👉 引入并配置插件

✌️ 对编译速度进行分析

👉 安装插件

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

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

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

👉 安装插件

👉 引入插件并使用

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

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

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景