webpack性能优化有哪些方法？

线程加载器

多线程可以提高程序运行效率,在webpack中使用thread-loader(一个启动多线程的加载器)

npm i thread-loader -D
配置

{
        test: /\.js$/,
        use: [
          'thread-loader',
          'babel-loader'
        ],
}

缓存加载器

在开发中需要多次构建项目,为了加快后续构建,可以使用缓存

npm i cache-loader -D
配置

{
        test: /\.js$/,
        use: [
          'cache-loader',
          'thread-loader',
          'babel-loader'
        ],
}

Hot update

当我们在项目中修改一个文件时,webpack会默认重新构建这个项目,但这并不是必须的,我们只需要重新编译该文件即可,这种策略为Hot update

webpack中内置了Hot update插件,我们开启即可

配置

// import webpack
const webpack = require('webpack');

{
  plugins: [
      new webpack.HotModuleReplacementPlugin()
  ],

  devServer: {
      hot: true
  }
}

exclude & include

在项目中有一些文件和文件夹永远不需要参与编译,我们可以指定这些文件,防止webpack取回他们,提高编译效率

也可以指定需要编译的文件

exclude : 不需要编译的文件

include : 需要编译的文件

配置

{
    test: /\.js$/,

    include: path.resolve(__dirname, '../src'),

    exclude: /node_modules/,
    use: [
        'babel-loader'
    ]
}

缩小css代码

css-minimizer-webpack-plugin 可以压缩和去重 CSS 代码

npm i css-minimizer-webpack-plugin -D
配置

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')

optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ],
  }

缩小js代码

terser-webpack-plugin可以压缩和去重 JavaScript 代码

npm i terser-webpack-plugin -D

配置

const TerserPlugin = require('terser-webpack-plugin')
optimization: {
    minimizer: [
      new CssMinimizerPlugin(), 
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true, // remove console statement
          },
        },
      }),
    ],
  }7、tree-shaking

tree-shaking

只编译项目中实际用到的代码,不编译没有用到的

webpack中默认是启用tree-shaking,我们只需要在最后编译时使用生产模式

module.exports = {
  mode: 'production'
}

source-map

当我们的代码中出现bug时,他可以帮助我们快速定位到出现bug的源码的位置;但是这个文件很大。

为了平衡性能和准确性，我们应该：在开发模式下生成更准确（但更大）的 source-map；在生产模式下生成更小（但不那么准确）的源映射。

开发模式

module.exports = {
  mode: 'development',
  devtool: 'eval-cheap-module-source-map'
}

生产模式

module.exports = {
  mode: 'production',
  devtool: 'nosources-source-map'
}

Bundel Analyzer

我们可以使用 webpack-bundle-analyzer 来查看打包后的 bundle 文件的体积，然后进行相应的体积优化。

npm i webpack-bundle-analyzer -D

配置

const {
  BundleAnalyzerPlugin
} = require('webpack-bundle-analyzer')
// config
plugins: [
    new BundleAnalyzerPlugin(),
]

模块延迟加载

如果没有模块延迟加载,整个项目会被打包成一个js文件,导致单个js文件体积很大,就会使得用户请求网页时,首屏加载时间长

使用模块加载延迟,会把大js文件分割成多个小的js文件,网页加载时按需加载,提高了首屏加载速度

要启用延迟加载，我们只需要编写如下代码：

// src/router/index.js
const routes = [
  {
    path: '/login',
    name: 'login',
    component: login
  },
  {
    path: '/home',
    name: 'home',
    // lazy-load
    component: () => import('../views/home/home.vue'),
  },
]

压缩包

Gzip是一种常用的文件压缩算法，可以提高传输效率。但是，此功能需要后端配合。

npm i compression-webpack-plugin -D
配置


const CompressionPlugin = require('compression-webpack-plugin')

// config
plugins: [

    // gzip
    new CompressionPlugin({
      algorithm: 'gzip',
      threshold: 10240,
      minRatio: 0.8
    })
  ]

base64

对于一些小图片，可以转成base64编码，这样可以减少用户的HTTP请求次数，提升用户体验。url-loader 在 webpack5 中已被弃用，我们可以使用 assets-module 代替。

{
   test: /\.(png|jpe?g|gif|svg|webp)$/,
   type: 'asset',
   parser: {
      // Conditions for converting to base64
      dataUrlCondition: {
         maxSize: 25 * 1024, // 25kb
      }
   },
   generator: {
    filename: 'images/[contenthash][ext][query]',
   },
},