Webpack4 性能优化实践

最新推荐文章于 2024-02-01 10:43:50 发布
最新推荐文章于 2024-02-01 10:43:50 发布
阅读量854 收藏 1
点赞数
分类专栏： 江辰闲谈 文章标签： javascript webpack react vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42439919/article/details/109670525
版权

为什么需要性能优化

在使用 Webpack 时，如果不注意性能优化，可能会产生性能问题，会导致在开发体验上不是非常丝滑，性能问题主要是编译速度慢，打包体积过大，因此性能优化也主要从这些方面来分析。本文主要是自己平时的工作积累和参考别人的文章，而进行总结，基于 Webpack4 版本。

构建分析

编译速度分析

对 Webpack 构建速度进行优化的首要任务就是去知道哪些地方值得我们注意。
speed-measure-webpack-plugin 插件能够测量 Webpack 构建速度

 SMP  ⏱
General output time took 38.3 secs

 SMP  ⏱  Plugins
HtmlWebpackPlugin took 1.31 secs
CopyPlugin took 0.016 secs
OptimizeCssAssetsWebpackPlugin took 0.002 secs
ContextReplacementPlugin took 0.001 secs
MiniCssExtractPlugin took 0 secs
DefinePlugin took 0 secs

 SMP  ⏱  Loaders
_babel-loader@8.1.0@babel-loader took 29.98 secs
  module count = 1503
_babel-loader@8.1.0@babel-loader, and
_eslint-loader@3.0.4@eslint-loader took 18.74 secs
  module count = 86
_css-loader@3.6.0@css-loader, and
_less-loader@5.0.0@less-loader took 16.45 secs
  module count = 64
modules with no loaders took 2.24 secs
  module count = 7
_file-loader@5.1.0@file-loader took 1.03 secs
  module count = 17
_style-loader@1.3.0@style-loader, and
_css-loader@3.6.0@css-loader, and
_less-loader@5.0.0@less-loader took 0.102 secs
  module count = 64
_html-webpack-plugin@3.2.0@html-webpack-plugin took 0.021 secs
  module count = 1

居然达到了惊人的 38.3 秒，虽然有点不是很准确，但是非常慢。发现 babel-loader、eslint-loader、css-loader、less-loader 占据了大头。

const webpackBase = require('./webpack.base.conf');
const path = require('path');

const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasureWebpackPlugin();

module.exports = smp.wrap({
    // 配置源码显示方式
    devtool: 'eval-source-map',
    mode: 'development',
    entry: {
        app: ['./src/index.jsx']
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.js'
    },
    resolve: webpackBase.resolve,
    module: webpackBase.module,
    stats: webpackBase.stats,
    optimization: webpackBase.optimization,
    plugins: [
        webpackBase.plugins.html,
        webpackBase.plugins.miniCssExtract,
        webpackBase.plugins.optimizeCssAssets,
        // webpackBase.plugins.progressBarPlugin,
        webpackBase.plugins.ContextReplacementPlugin,
        webpackBase.plugins.DefinePlugin,
        // webpackBase.plugins.AntdDayjsWebpackPlugin,
        webpackBase.plugins.CopyPlugin
        // webpackBase.plugins.HotModuleReplacementPlugin
    ],
    devServer: webpackBase.devServer,
    watchOptions: webpackBase.watchOptions,
    externals: webpackBase.externals
});

打包体积分析

通过 webpack-bundle-analyzer 插件能够在 Webpack 构建结束后生成构建产物体积报告，配合可视化的页面，能够直观知道产物中的具体占用体积。

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  plugins: bundleAnalyzer: new BundleAnalyzerPlugin({ analyzerPort: 8081 })],
};

效果图如下：

5061604735941_ pic_hd

可以看出一个很明显的问题就是 Ant Design、TRTC、Mobx 这些库，没有排除。

打包体积如下：

image

如何优化

缩小构建目标

  • 优化 resolve.modules 配置（减少模块搜索层级和不必要的编译工作）
  • 优化 resolve.extensions 配置
  • 增加缓存
const path = require('path');
module.exports = {
    resolve: {
        // 自动解析确定的扩展
        extensions: ['.js', '.jsx', '.css', '.less', '.json'],
        alias: {
            // 创建 import 或 require 的别名，来确保模块引入变得更简单
            'react': path.resolve( __dirname ,'./node_modules/react/dist/react.min.js')
        },
        // 当从 npm 包导入模块时，此选项将决定在 `package.json` 中使用哪个字段导入模块
        // 默认值为 browser -> module -> main
        mainFields: ['main']
    },
    module: {
        rules: [
            {
                // 排除node_modules模块
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                // 开启缓存
                loader: 'babel-loader?cacheDirectory=true'
            }
        ]
    }
};

使用 thread-loader，开启多进程

thread-loader 会将你的 loader 放置在一个 worker 池里面运行，每个 worker 都是一个单独的有 600ms 限制的 node.js 进程。同时跨进程的数据交换也会被限制。请在高开销的 loader 中使用，否则效果不佳。

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve('src'),
        use: [
          'thread-loader',
          // your expensive loader (e.g babel-loader)
        ],
      },
    ],
  },
};

使用 hard-source-webpack-plugin

在 Webpack4 中，hard-source-webpack-plugin 是 DLL 的更好替代者。

hard-source-webpack-plugin 是 Webpack 的插件，为模块提供中间缓存步骤。为了查看结果，您需要使用此插件运行 Webpack 两次：第一次构建将花费正常的时间。第二次构建将显着加快（大概提升 90% 的构建速度）。不过该插件很久没更新了，不太建议使用。

去掉 eslint-loader

由于我项目中使用了 eslint-loader 如果配置了 precommit，其实可以去掉的。

通过 externals 把相关的包，排除

Webpack

module.exports = {
    // externals 排除对应的包，注：排除掉的包必须要用script标签引入下
    externals: {
        react: 'React',
        'react-dom': 'ReactDOM',
        'trtc-js-sdk': 'TRTC',
        bizcharts: 'BizCharts',
        antd: 'antd',
        mobx: 'mobx',
        'mobx-react': 'mobxReact'
    }
};

index.html

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"
        />
        <meta name="baidu-site-verification" content="ptk9VJudKz" />
        <link
            rel="stylesheet"
            href="https://xxx/antd.min3.26.20.css"
        />
        <title>webpack</title>
        <script
            type="text/javascript"
            src="https://xxx/17.0.0react.production.min.js"
        ></script>
        <script
            type="text/javascript"
            src="https://xxx/17.0.0react-dom.production.min.js"
        ></script>
        <script
            type="text/javascript"
            src="https://xxx/BizCharts3.5.8.js"
        ></script>
        <script
            type="text/javascript"
            src="https://xxx/trtc4.6.7.js"
        ></script>
        <script
            type="text/javascript"
            src="https://xxx/moment2.29.1.min.js"
        ></script>
        <script
            type="text/javascript"
            src="https://xxx/moment2.29.1zh-cn.js"
        ></script>
        <script
            type="text/javascript"
            src="https://xxx/polyfill.min7.8.0.js"
        ></script>
        <script
            type="text/javascript"
            src="https://xxx/antd.min3.26.20.js"
        ></script>
        <script
            type="text/javascript"
            src="https://xxx/mobx.umd.min5.13.1.js"
        ></script>
        <script
            type="text/javascript"
            src="https://xxx/mobx-react.index.min5.4.4.js"
        ></script>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

JS 压缩

从 Webpack4 开始，默认情况下使用 terser 压缩生产环境下的输出结果。Terser 是一款兼容 ES2015 + 的 JavaScript 压缩器。与 UglifyJS（许多项目的早期标准）相比，它是面向未来的选择。有一个 UglifyJS 的分支—— uglify-es，但由于它不再维护，于是就从这个分支诞生出了一个独立分支，它就是 terser。

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    optimization: {
        minimizer: [
            // 压缩js
            new TerserPlugin({
                test: /\.(jsx|js)$/,
                extractComments: true,
                parallel: true,
                cache: true
            })
        ]
    },
};

CSS 压缩

Webpack 4.0 以后，官方推荐使用 mini-css-extract-plugin 插件来打包 CSS 文件。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /\.(css|less)$/,
                use: [MiniCssExtractPlugin.loader]
            }
        ]
    },
};

FAQ

Ant Design 无法加载

请确保加载顺序，Moment、Polyfill 放在 Ant Design 前面加载

MobX 无法加载

MobX 引入 mobx.umd.min.js 库，mobx-react 需要引入

package.json

{
    "name": "webpack",
    "version": "1.0.0",
    "private": true,
    "main": "index.js",
    "dependencies": {
        "antd": "^3.26.20",
        "babel-eslint": "^10.0.3",
        "babel-loader": "^8.0.0",
        "babel-plugin-import": "^1.13.0",
        "babel-plugin-react-css-modules": "^5.2.6",
        "bizcharts": "^3.5.8",
        "china-division": "^2.3.1",
        "compression-webpack-plugin": "^3.0.1",
        "copy-webpack-plugin": "^5.1.1",
        "css-loader": "^3.2.0",
        "eslint": "^6.8.0",
        "eslint-config-prettier": "^6.11.0",
        "eslint-config-standard": "^14.1.0",
        "eslint-loader": "^3.0.4",
        "eslint-plugin-import": "^2.20.0",
        "eslint-plugin-promise": "^4.2.1",
        "eslint-plugin-react": "^7.17.0",
        "eslint-plugin-standard": "^4.0.1",
        "html-webpack-plugin": "^3.2.0",
        "less": "^3.8.1",
        "less-loader": "^5.0.0",
        "lint-staged": "^10.0.8",
        "mini-css-extract-plugin": "^0.8.0",
        "mobx": "^5.13.1",
        "mobx-react": "^5.4.4",
        "optimize-css-assets-webpack-plugin": "^5.0.1",
        "pre-commit": "^1.2.2",
        "progress-bar-webpack-plugin": "^1.12.1",
        "react": "^17.0.0",
        "react-dom": "^17.0.0",
        "speed-measure-webpack-plugin": "^1.3.1",
        "style-loader": "^1.2.1",
        "terser-webpack-plugin": "^2.2.1",
        "trtc-js-sdk": "^4.6.7",
        "viewerjs": "^1.5.0",
        "webpack": "^4.41.2",
        "webpack-bundle-analyzer": "^3.6.0",
        "webpack-cli": "^3.3.10",
        "webpack-dev-server": "^3.10.1"
    }
}

最终效果

打包体积：

5381605008681_ pic

打包体积由原先 2.1M 变成了 882KB，可以说效果非常巨大。

包依赖：

5441605062491_ pic_hd

Ant Design、TRTC、Mobx 这些库也没了

编译速度：

SMP  ⏱
General output time took 10.67 secs

 SMP  ⏱  Plugins
HtmlWebpackPlugin took 1.69 secs
BundleAnalyzerPlugin took 0.091 secs
CopyPlugin took 0.011 secs
MiniCssExtractPlugin took 0.003 secs
OptimizeCssAssetsWebpackPlugin took 0.002 secs
DefinePlugin took 0.001 secs
ContextReplacementPlugin took 0 secs

 SMP  ⏱  Loaders
_babel-loader@8.1.0@babel-loader took 8.26 secs
  module count = 277
_babel-loader@8.1.0@babel-loader, and
_eslint-loader@3.0.4@eslint-loader took 7.18 secs
  module count = 86
_css-loader@3.6.0@css-loader, and
_less-loader@5.0.0@less-loader took 1.94 secs
  module count = 28
modules with no loaders took 0.728 secs
  module count = 12
_file-loader@5.1.0@file-loader took 0.392 secs
  module count = 17
_style-loader@1.3.0@style-loader, and
_css-loader@3.6.0@css-loader, and
_less-loader@5.0.0@less-loader took 0.052 secs
  module count = 28
_html-webpack-plugin@3.2.0@html-webpack-plugin took 0.026 secs
  module count = 1

编译速度由原先 38.3 secs（实际编译速度大概 15 秒左右），减少到 10.67 secs（实际编译速度 10 秒左右）。

国内外公共 CDN 地址

参考资料

博客

博客

野生程序猿江辰
关注
专栏目录
记一次vue-webpack项目优化实践详解
10-17
总结这次优化实践，我们不仅减小了项目体积，还学会了如何使用`webpack-bundle-analyzer`来定位问题，并采取相应措施。然而，项目的优化不仅仅局限于第三方库的按需引入，还可以涉及代码结构优化、懒加载、图片压缩...
拥抱webpack4，有效缩减构建时间57%+
前端原创分享，常年坚持记录和分享，全网阅读量超百万
09-11 907
最近有感觉到，随着系统模块数量的增加，wepack编译打包的速度越来越慢，于是我想给项目做一下优化升级，也借此机会系统地学习一下webpack4。
Webpack4性能优化
More_Action的博客
11-13 566
为什么需要性能优化 在使用 Webpack 时，如果不注意性能优化，可能会产生性能问题，会导致在开发体验上不是非常丝滑，性能问题主要是编译速度慢，打包体积过大，因此性能优化也主要从这些方面来分析。本文主要是自己平时的工作积累和参考别人的文章，而进行总结，基于 Webpack4 版本。 构建分析 编译速度分析 对 Webpack 构建速度进行优化的首要任务就是去知道哪些地方值得我们注意。speed-measure-webpack-plugin 插件能够测量 Webpack 构建速度 SMP  ⏱
webpack编译优化-(lodash、echarts、element-plus、vxe-table等)vue3版本
lln0001的博客
04-24 1570
webpack编译优化-(lodash、echarts、element-plus、vxe-table等)vue3版本
webpack打包的项目中同时使用了css和less文件，加了speed-measure-webpack-plugin后为什么会出现这样的报错？
前端高薪进击手记
06-14 2593
webpack打包在使用了speed-measure-webpack-plugin进行了wrap操作之后，突然的出现了这个奇怪的错误提示。
unipapp 解决无法编译sass_Webpack 4编译速度优化踩坑
weixin_39902598的博客
12-12 221
一，目标今天打算做一些webpack打包编译的速度优化。二，准备工作当前webpack版本 4.43.0首先，既然是做速度优化，就得先知道当前的编译速度是多少。推荐这个插件：speed-measure-webpack-pluginGitHub地址：https://github.com/stephencookdev/speed-measure-webpack-plugin​github.comnpm...
webpack性能优化配置与实战（一）
小陈的博客
08-24 1337
webpack作为常用的项目打包工具，应该是目前使用vue-cli脚手架构建vue项目时，很多人的首选工具。但是很多人在使用webpack的时候，都是用的默认配置，可能会在运行很慢的情况下或者打包出来的js加载过于缓慢的时候，去网上搜索一些优化项进行配置，做一些零零散散的优化很难让开发的项目有一个系统性的配置规则。可能今天js加载慢，就去优化js。明天css渲染不出来了，就去优化css。也有可能在webpack里面配置了一遍，然后又去安装其他插件再重新配置一遍。
前端性能优化原理与实践.zip
07-09
这本"前端性能优化原理与实践"小册子深入探讨了如何通过一系列技术手段优化前端页面，旨在帮助开发者构建更快、更流畅的Web应用。以下是该压缩包文件中可能涉及的一些核心知识点： 1. **延迟加载（Lazy Loading）**...
百度SSP单页式应用性能优化实践
02-25
本文将介绍其中一个性能优化方案：基于HTTPChunk的首屏数据渐进式预加载方案，该方案减少了1.2s的加载时间。同时对比其与同构渲染方案的异同。单页式应用是近几年来前端技术栈发展与落地的最典型场景，Angular、Vue...
自定义 webpack 配置4：优化配置
ZWQ0325的博客
09-04 484
参考 webpack教程、create-react-app（eject后）配置，自定义一个适合的、可维护的webpack配置 1. 保持版本最新 较新的版本能够建立更高效的模块树以及提高解析速度。 1.1 Node.js 1.1.1 最新版本 v14.7.0 1.1.2 查看本地版本 node -v //或者 node --version 1.1.3 下载安装最新版本 1.2 npm 1.2.1 最新版本 v6.14.7 1.2.2 查看本地版本 npm -v //或者 npm --version .
maven打war包和jar包及排除文件
Luck_ZZ的博客
09-17 1593
一、目录结构 二、pom文件 pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 ht
自定义 webpack 配置3：增强配置
ZWQ0325的博客
09-04 526
参考 webpack教程、create-react-app（eject后）配置，自定义一个适合的、可维护的webpack配置 1. 自动清理 /dist 文件夹 设置缓存配置后，内容变更后的每次构建都会生成新的文件。但是 webpack 无法追踪到哪些文件是实际在项目中用到的。然后，需要在每次构建前清理 /dist 文件夹。使用插件可以自动完成。 1.1 安装依赖 yarn add clean-webpack-plugin -D 1.2 修改 webpack.prod.js 文件 const { me.
TerserWebpackPlugin详解
最新发布
高山景行，一尘不染
02-01 6936
TerserWebpackPlugin，此文章来自于github翻译来，仅供参考，具体配置需要结合自己的技术框架配置（vue/react等）
webpack5之loader配置（四）
xiaojian044的博客
11-15 1446
css loader
vue-cli3.0创建项目，vue-cli3.0各项配置与安装， vue-cli3.0 上手教程 （二）之 VUE-CLI3的eslint配置问题
csl125的博客
02-25 2692
VUE-CLI3按照官网教程配置搭建后，发现每次编译，eslint都抛出错误 最奇怪的是竟然HTML也被抛出警告了，虽然没有影响项目的运行，但是强迫症还是决定修改一下 error: Expected indentation of 4 spaces but found 0 (indent) at src\views\User.vue:26:1: 1 error found. 1 error p...
Webpack4优化之hardSourceWebpackPlugin的报错问题
coding...
02-07 1431
最近工作项目编译太卡，由于模块太多，前端项目启动起码要6分钟，作为一个前端着实不能容忍，于是开启了优化之旅，仅仅只是对开发环境做了下优化。 首先和网上提供一样，分析一下编译的时间，看看哪个部分花的时间最多，使用插件SpeesMeasureWebpacPlugin，跑下来启动时间在6～7分钟，看了下大部分的时间都在加载loader的时候耗时最长，然后主要优化两个方向，一个是多线程编译，一个是添加缓存。 多线程编译采用了thread-loader，在Vue.confit.js中配置，但是配置下来，感觉速度提
webpack4性能优化小结——HMR、source-map、oneOf、babel缓存、 多进程打包、文件缓存、tree shaking、code split、dll、pwa、externals
猛猛的博客
01-16 1007
webpack性能优化： 开发环境性能优化 1）优化打包构建速度 —— HMR 2）优化代码调试—— source-map 生产环境性能优化 1）优化打包构建速度——oneOf、babel缓存、 多进程打包 2）优化代码运行的性能——文件缓存、tree shaking、code split、dll、懒加载和预加载、pwa、externals 开发环境配置–优化打包构建的速度 使用HMR（hot module repalcement），热模块替换，作用是一个模块发生改变，只会重新打包这个模块，而不是全部更
webpack之优化篇（四）：hard-source-webpack-plugin,webpack DllPlugin配置的代替方案
热门推荐
I大俊
10-22 1万+
webpack DllPlugin配置的代替方案hard-source-webpack-plugin
webpack前端性能优化实践与总结
文章中提到的性能优化实践，通过使用特定的webpack配置和插件，将首屏渲染时间从3800ms降低到1600ms，显示了webpack在性能优化上的强大能力。优化策略可能包括了代码分割、延迟加载非首屏资源、利用HTTP/2的并行加载...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值