すべてのフロントエンドが学習しなければならないWebpackの最適化方法

序文

みなさん、こんにちは。リン・サンシンです。最も難しい知識のポイントは、最も理解しやすい言葉での私のモットーです。基礎は、高度な前提であり、私の本来の意図です。

webpackの最適化が必要です

前回の記事ではVuecliの簡単な構成について説明しましたが、これは基本的な構成であり、さらに最適化する必要はありません。

そして、webpackパッケージの使用は、webpack优化このトピックを回避することはできません。インタビューであろうと実際の開発であろうと、最適化は非常に重要です。結局のところ、ユーザーエクスペリエンスを向上させるのはフロントエンドエンジニアの責任です。

ビルド時間の最適化

1つは、ビルド時間を最適化することです。

スレッドローダー

マルチプロセスパッケージングは​​、建設のスピードを大幅に向上させることができます。使用方法はthread-loader、次のような時間のかかるローダーの前に配置することです。babel-loader

スタートアッププロジェクトとパッケージングプロジェクトの両方を加速する必要があるため、構成は次のようになります。webpack.base.js

npm i thread-loader -D
复制代码

// webpack.base.js

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

キャッシュローダー

リソースをキャッシュして二次構築の速度を向上させる使用方法は、次のようなcache-loader時間のかかるローダーの前に配置することです。babel-loader

スタートアッププロジェクトとパッケージングプロジェクトの両方を加速する必要があるため、構成は次のようになります。webpack.base.js

npm i cache-loader -D
复制代码

// webpack.base.js

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

ホットアップデートを有効にする

たとえば、プロジェクト内のファイルを変更すると、プロジェクト全体が更新されるため、非常に時間がかかります。この変更されたモジュールのみが更新され、他のモジュールはそのままである場合、変更されたコードの再構築時間が大幅に改善されます。

開発でのみ使用されるため、で構成しますwebpack.dev.js

// webpack.dev.js

//引入webpack
const webpack = require('webpack');
//使用webpack提供的热更新插件
   plugins: [
   new webpack.HotModuleReplacementPlugin()
    ],
    //最后需要在我们的devserver中配置
     devServer: {
+     hot: true
    },
复制代码

除外および含める

• exclude：処理する必要のないファイル
• include：処理するファイル

これら2つのプロパティを適切に設定すると、ビルド速度を大幅に向上させることができます

webpack.base.jsで構成する

// webpack.base.js

      {
        test: /\.js$/,
        //使用include来指定编译文件夹
        include: path.resolve(__dirname, '../src'),
        //使用exclude排除指定文件夹
        exclude: /node_modules/,
        use: [
          'babel-loader'
        ]
      },
复制代码

差別化された環境を構築する

構築する環境を区別することは非常に重要です。開発環境で必要な構成と不要な構成、および本番環境をパッケージ化するときに必要な構成と不要な構成を明確に知る必要があります。

• 开发环境：コード圧縮、gzip、ボリューム分析などの最適化された構成を削除して、ビルド速度を大幅に向上させます
• 生产环境：コード圧縮、gzip、ボリューム分析などの最適化された構成が必要です。これにより、最終プロジェクトのパッケージボリュームが大幅に削減されます。

前回の記事では、環境を区別するためにすでにあなたを連れて行きました

提升webpack版本

webpack版本越新，打包的效果肯定更好

打包体积优化

主要是打包后项目整体体积的优化，有利于项目上线后的页面加载速度提升

本项目已经是webpack最新版本

CSS代码压缩

CSS代码压缩使用css-minimizer-webpack-plugin，效果包括压缩、去重

代码的压缩比较耗时间，所以只用在打包项目时，所以只需要在webpack.prod.js中配置

npm i css-minimizer-webpack-plugin -D
复制代码

// webpack.prod.js

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

  optimization: {
    minimizer: [
      new CssMinimizerPlugin(), // 去重压缩css
    ],
  }
复制代码

JS代码压缩

JS代码压缩使用terser-webpack-plugin，实现打包后JS代码的压缩

代码的压缩比较耗时间，所以只用在打包项目时，所以只需要在webpack.prod.js中配置

npm i terser-webpack-plugin -D
复制代码

// webpack.prod.js

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

  optimization: {
    minimizer: [
      new CssMinimizerPlugin(), // 去重压缩css
      new TerserPlugin({ // 压缩JS代码
        terserOptions: {
          compress: {
            drop_console: true, // 去除console
          },
        },
      }), // 压缩JavaScript
    ],
  }
复制代码

tree-shaking

tree-shaking简单说作用就是：只打包用到的代码，没用到的代码不打包，而webpack5默认开启tree-shaking，当打包的mode为production时，自动开启tree-shaking进行优化

module.exports = {
  mode: 'production'
}
复制代码

source-map类型

source-map的作用是：方便你报错的时候能定位到错误代码的位置。它的体积不容小觑，所以对于不同环境设置不同的类型是很有必要的。

• 开发环境

开发环境的时候我们需要能精准定位错误代码的位置

// webpack.dev.js

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

• 生产环境

生产环境，我们想开启source-map，但是又不想体积太大，那么可以换一种类型

// webpack.prod.js

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

打包体积分析

使用webpack-bundle-analyzer可以审查打包后的体积分布，进而进行相应的体积优化

只需要打包时看体积，所以只需在webpack.prod.js中配置

npm i webpack-bundle-analyzer -D
复制代码

// webpack.prod.js

const {
  BundleAnalyzerPlugin
} = require('webpack-bundle-analyzer')

  plugins: [
    new BundleAnalyzerPlugin(),
]
复制代码

用户体验优化

模块懒加载

如果不进行模块懒加载的话，最后整个项目代码都会被打包到一个js文件里，单个js文件体积非常大，那么当用户网页请求的时候，首屏加载时间会比较长，使用模块懒加载之后，大js文件会分成多个小js文件，网页加载时会按需加载，大大提升首屏加载速度

// src/router/index.js

const routes = [
  {
    path: '/login',
    name: 'login',
    component: login
  },
  {
    path: '/home',
    name: 'home',
    // 懒加载
    component: () => import('../views/home/home.vue'),
  },
]
复制代码

Gzip

开启Gzip后，大大提高用户的页面加载速度，因为gzip的体积比原文件小很多，当然需要后端的配合，使用compression-webpack-plugin

只需要打包时优化体积，所以只需在webpack.prod.js中配置

npm i compression-webpack-plugin -D
复制代码

// webpack.prod.js

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

  plugins: [
    // 之前的代码...
    
    // gzip
    new CompressionPlugin({
      algorithm: 'gzip',
      threshold: 10240,
      minRatio: 0.8
    })
  ]
复制代码

小图片转base64

对于一些小图片，可以转base64，这样可以减少用户的http网络请求次数，提高用户的体验。webpack5中url-loader已被废弃，改用asset-module

在webpack.base.js中配置

// webpack.base.js

{
   test: /\.(png|jpe?g|gif|svg|webp)$/,
   type: 'asset',
   parser: {
     // 转base64的条件
     dataUrlCondition: {
        maxSize: 25 * 1024, // 25kb
     }
   },
   generator: {
     // 打包到 image 文件下
    filename: 'images/[contenthash][ext][query]',
   },
},
复制代码

合理配置hash

我们要保证，改过的文件需要更新hash值，而没改过的文件依然保持原本的hash值，这样才能保证在上线后，浏览器访问时没有改变的文件会命中缓存，从而达到性能优化的目的

在webpack.base.js中配置

// webpack.base.js

  output: {
    path: path.resolve(__dirname, '../dist'),
    // 给js文件加上 contenthash
    filename: 'js/chunk-[contenthash].js',
    clean: true,
  },
复制代码

结语

我是林三心，一个热心的前端菜鸟程序员。如果你上进，喜欢前端，想学习前端，那咱们可以交朋友，一起摸鱼哈哈，摸鱼群，点这个 --> 摸鱼沸点