备案控制台
开发者社区 开发与运维 文章 正文

Webpack4 性能优化实践 #108

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

为什么需要性能优化

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


构建分析

编译速度分析

对 构建速度进行优化的首要任务就是去知道哪些地方值得我们注意。

插件能够测量 Webpack 构建速度Webpackspeed-measure-webpack-plugin

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-analyzerWebpack

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

效果图如下：

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

打包体积如下：


如何优化

缩小构建目标

  • 优化 配置（减少模块搜索层级和不必要的编译工作）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 会将你的 放置在一个 池里面运行，每个 都是一个单独的有 600ms 限制的 进程。同时跨进程的数据交换也会被限制。请在高开销的 中使用，否则效果不佳。loaderworkerworkernode.jsloader

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-pluginDLL

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


去掉 eslint-loader

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


通过 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 压缩

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

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-pluginCSS

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    module: {
        rules: [
            {
                test: /\.(css|less)$/,
                use: [MiniCssExtractPlugin.loader]
            }
        ]
    },
};


FAQ

Ant Design 无法加载

请确保加载顺序， 放在 前面加载Moment、PolyfillAnt 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"
    }
}


最终效果

打包体积：

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

包依赖：

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 秒（实际编译速度大概 15 秒左右），减少到 10.67 秒（实际编译速度 10 秒左右）。


国内外公共 CDN 地址

参考资料

文章标签：
JavaScript
前端开发
数据可视化
CDN
缓存
关键词：
Webpack性能优化
Webpack性能优化实践
Webpack实践
空洞啊
目录
相关文章
shuj
|
18天前
|
前端开发
构建工具对比：Webpack与Rollup的前端工程化实践
在现代前端开发中，前端工程化变得愈发重要。本文将对两个常用的构建工具——Webpack和Rollup进行比较，探讨它们在前端工程化实践中的特点、优势和适用场景。无论是大型应用的打包优化还是轻量级库的构建，选择适合的构建工具都能提高开发效率和项目性能。
shuj
32 1
天涯学馆
|
15天前
|
缓存 资源调度 监控
Webpack 5新特性详解与性能优化实践
Webpack 5通过确定性的Chunk ID、模块ID和导出ID实现了长期缓存，这意味着相同的输入将始终产生相同的输出。这样，当你的用户再次访问更新后的网站时，浏览器可以重用旧的缓存，而不是重新下载所有资源。
天涯学馆
23 2
mrq4nk6ni2neg
|
18天前
|
前端开发 UED
探索前端工程化之路：Webpack、Rollup等构建工具对比与实践
在现代前端开发中，工程化成为不可或缺的一环。本文将深入探讨常用的前端构建工具Webpack和Rollup，并比较它们在实践中的优劣势。通过对功能、性能、插件生态等方面的评估，帮助读者选择适合自己项目需求的构建工具。
mrq4nk6ni2neg
39 1
田八
|
18天前
|
缓存 监控 JavaScript
《Webpack5 核心原理与应用实践》学习笔记-> webpack极致性能优化
《Webpack5 核心原理与应用实践》学习笔记-> webpack极致性能优化
田八
35 1
田八
|
18天前
|
监控 IDE 开发工具
《Webpack5 核心原理与应用实践》学习笔记-> webpack性能优化技巧
《Webpack5 核心原理与应用实践》学习笔记-> webpack性能优化技巧
田八
75 0
我不是外星人
|
12月前
|
缓存 前端开发 JavaScript
webpack性能优化
webpack 性能优化
我不是外星人
116 1
前端要努力QAQ
|
缓存 Dart 前端开发
webpack 性能优化方案
`webpack` 作为前端目前使用最广泛的打包工具，在面试中也是经常会被问到的。 比较常见的面试题包括： - 可以配置哪些属性来进行 **`webpack` 性能优化？** - **前端有哪些常见的性能优化？**（除了其他常见的，也完全可以从 `webpack` 来回答） `webpack` 的性能优化比较多，我们可以对其进行分类： 1. **打包后的结果**，上线时的性能优化。（比如分包处理、减小包体积、CDN服务器等） 2. **优化打包速度**，开发或者构建时优化打包速度。（比如 `exclude`、`cache-loader` 等） 大多数情况下，我们会更加侧重于 **第一种
前端要努力QAQ
330 1
webpack 性能优化方案
傲娇的萌
|
缓存 监控 前端开发
Webpack性能优化
Webpack性能优化
傲娇的萌
117 0
auqbllxiu
|
前端开发
《基于webpack和npm的前端组件化实践》电子版地址
基于webpack和npm的前端组件化实践
auqbllxiu
65 0
《基于webpack和npm的前端组件化实践》电子版地址
蜡笔小心_
|
JavaScript 前端开发 CDN
webpack性能优化配置与实战（二）
webpack性能优化配置与实战（二）
蜡笔小心_
186 0
webpack性能优化配置与实战（二）

热门文章

最新文章

  • 1
    Webpack构建library时的踩坑经历
  • 2
    【vue】webpack打包vue项目并且运行在Tomcat里面
  • 3
    Vue2+VueRouter2+webpack 构建项目
  • 4
    Webpack 2 视频教程 009 - 配置 ESLint 实现代码规范自动测试 (上)
  • 5
    React 框架和Webpack
  • 6
    Webpack入门教程二十五
  • 7
    使用webpack loader加载器
  • 8
    Webpack 2 视频教程 003 - Webpack 项目初始化
  • 9
    webpack html-webpack-plugin
  • 10
    Webpack 2 视频教程 001 - Webpack 简介
  • 1
    webpack如何设置devServer启动项目为https协议
    242
  • 2
    webpack成长指北第9章---webpack如何对icon字体进行打包
    44
  • 3
    webpack成长指北第8章---webpack的CSS Modules打包
    25
  • 4
    webpack成长指北第7章---webpack的css\less\scss样式打包
    45
  • 5
    webpack成长指北第6章---webpack的图片引入
    26
  • 6
    webpack成长指北第3章---常用webpack命令及使用webpack命令的方式
    33
  • 7
    webpack成长指北第2章---安装webpack的正确姿势
    20
  • 8
    深入理解前端性能优化中的Webpack Tree Shaking
    25
  • 9
    Webpack 进阶：深入理解其工作原理与优化策略
    59
  • 10
    前端性能瓶颈崩溃项目？Webpack助力解决！
    47

    • 相关课程

    更多
  • 前端自动化构建工具 Webpack
  • 企业Web常用架构LAMP-LNMP实战
  • 前端开发框架Bootstrap使用教程
  • Cloud Toolkit 开发部署效率提升神器
  • Python Web 框架 Django 快速入门
  • Java Web开发-Web应用、Tomcat、HTTP请求与响应

    • 相关电子书

    更多
  • 基于webpack和npm的前端组件化实践
  • Web应用系统性能优化
  • 如何利用Redisson分布式化传统Web项目

    • 相关实验场景

    更多
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • 1分钟SAE部署Web在线游戏
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • 前端开发基础1：前端开发环境的安装和配置
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考