webpack優(yōu)化很有必要

上一篇文章給大家講解了簡(jiǎn)單搭建一個(gè)Vuecli，但是只是基本搭建，而沒(méi)有進(jìn)行進(jìn)一步的優(yōu)化。

而使用webpack打包躲不開(kāi)的就是webpack優(yōu)化這個(gè)話題，無(wú)論是面試還是實(shí)際開(kāi)發(fā)，優(yōu)化都是非常重要的事情，畢竟提升用戶(hù)體驗(yàn)是我們前端工程師的職責(zé)

構(gòu)建時(shí)間優(yōu)化

首先就是構(gòu)建時(shí)間的優(yōu)化了

thread-loader

多進(jìn)程打包，可以大大提高構(gòu)建的速度，使用方法是將thread-loader放在比較費(fèi)時(shí)間的loader之前，比如babel-loader

由于啟動(dòng)項(xiàng)目和打包項(xiàng)目都需要加速，所以配置在webpack.base.js

npm i thread-loader -D

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

cache-loader

緩存資源，提高二次構(gòu)建的速度，使用方法是將cache-loader放在比較費(fèi)時(shí)間的loader之前，比如babel-loader

由于啟動(dòng)項(xiàng)目和打包項(xiàng)目都需要加速，所以配置在webpack.base.js

npm i cache-loader -D

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

開(kāi)啟熱更新

比如你修改了項(xiàng)目中某一個(gè)文件，會(huì)導(dǎo)致整個(gè)項(xiàng)目刷新，這非常耗時(shí)間。如果只刷新修改的這個(gè)模塊，其他保持原狀，那將大大提高修改代碼的重新構(gòu)建時(shí)間

只用于開(kāi)發(fā)中，所以配置在webpack.dev.js

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

exclude & include

exclude：不需要處理的文件

include：需要處理的文件

合理設(shè)置這兩個(gè)屬性，可以大大提高構(gòu)建速度

在webpack.base.js中配置

// webpack.base.js
      {
        test: /\.js$/,
        //使用include來(lái)指定編譯文件夾
        include: path.resolve(__dirname, '../src'),
        //使用exclude排除指定文件夾
        exclude: /node_modules/,
        use: [
          'babel-loader'
        ]
      },

構(gòu)建區(qū)分環(huán)境

區(qū)分環(huán)境去構(gòu)建是非常重要的，我們要明確知道，開(kāi)發(fā)環(huán)境時(shí)我們需要哪些配置，不需要哪些配置；而最終打包生產(chǎn)環(huán)境時(shí)又需要哪些配置，不需要哪些配置：

• 開(kāi)發(fā)環(huán)境：去除代碼壓縮、gzip、體積分析等優(yōu)化的配置，大大提高構(gòu)建速度
• 生產(chǎn)環(huán)境：需要代碼壓縮、gzip、體積分析等優(yōu)化的配置，大大降低最終項(xiàng)目打包體積

上篇文章已經(jīng)帶大家進(jìn)行了環(huán)境區(qū)分

提升webpack版本

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

打包體積優(yōu)化

主要是打包后項(xiàng)目整體體積的優(yōu)化，有利于項(xiàng)目上線后的頁(yè)面加載速度提升

本項(xiàng)目已經(jīng)是webpack最新版本

CSS代碼壓縮

CSS代碼壓縮使用css-minimizer-webpack-plugin，效果包括壓縮、去重

代碼的壓縮比較耗時(shí)間，所以只用在打包項(xiàng)目時(shí)，所以只需要在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，實(shí)現(xiàn)打包后JS代碼的壓縮

代碼的壓縮比較耗時(shí)間，所以只用在打包項(xiàng)目時(shí)，所以只需要在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簡(jiǎn)單說(shuō)作用就是：只打包用到的代碼，沒(méi)用到的代碼不打包，而webpack5默認(rèn)開(kāi)啟tree-shaking，當(dāng)打包的mode為production時(shí)，自動(dòng)開(kāi)啟tree-shaking進(jìn)行優(yōu)化

module.exports = {
  mode: 'production'
}

source-map類(lèi)型

source-map的作用是：方便你報(bào)錯(cuò)的時(shí)候能定位到錯(cuò)誤代碼的位置。它的體積不容小覷，所以對(duì)于不同環(huán)境設(shè)置不同的類(lèi)型是很有必要的。

• 開(kāi)發(fā)環(huán)境

開(kāi)發(fā)環(huán)境的時(shí)候我們需要能精準(zhǔn)定位錯(cuò)誤代碼的位置

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

• 生產(chǎn)環(huán)境

生產(chǎn)環(huán)境，我們想開(kāi)啟source-map，但是又不想體積太大，那么可以換一種類(lèi)型

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

打包體積分析

使用webpack-bundle-analyzer可以審查打包后的體積分布，進(jìn)而進(jìn)行相應(yīng)的體積優(yōu)化

只需要打包時(shí)看體積，所以只需在webpack.prod.js中配置

npm i webpack-bundle-analyzer -D

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

用戶(hù)體驗(yàn)優(yōu)化

模塊懶加載

如果不進(jìn)行模塊懶加載的話，最后整個(gè)項(xiàng)目代碼都會(huì)被打包到一個(gè)js文件里，單個(gè)js文件體積非常大，那么當(dāng)用戶(hù)網(wǎng)頁(yè)請(qǐng)求的時(shí)候，首屏加載時(shí)間會(huì)比較長(zhǎng)，使用模塊懶加載之后，大js文件會(huì)分成多個(gè)小js文件，網(wǎng)頁(yè)加載時(shí)會(huì)按需加載，大大提升首屏加載速度

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

Gzip

開(kāi)啟Gzip后，大大提高用戶(hù)的頁(yè)面加載速度，因?yàn)間zip的體積比原文件小很多，當(dāng)然需要后端的配合，使用compression-webpack-plugin

只需要打包時(shí)優(yōu)化體積，所以只需在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
    })
  ]

小圖片轉(zhuǎn)base64

對(duì)于一些小圖片，可以轉(zhuǎn)base64，這樣可以減少用戶(hù)的http網(wǎng)絡(luò)請(qǐng)求次數(shù)，提高用戶(hù)的體驗(yàn)。webpack5中url-loader已被廢棄，改用asset-module

在webpack.base.js中配置

// webpack.base.js
{
   test: /\.(png|jpe?g|gif|svg|webp)$/,
   type: 'asset',
   parser: {
     // 轉(zhuǎn)base64的條件
     dataUrlCondition: {
        maxSize: 25 * 1024, // 25kb
     }
   },
   generator: {
     // 打包到 image 文件下
    filename: 'images/[contenthash][ext][query]',
   },
},

合理配置hash

我們要保證，改過(guò)的文件需要更新hash值，而沒(méi)改過(guò)的文件依然保持原本的hash值，這樣才能保證在上線后，瀏覽器訪問(wèn)時(shí)沒(méi)有改變的文件會(huì)命中緩存，從而達(dá)到性能優(yōu)化的目的

在webpack.base.js中配置

// webpack.base.js
  output: {
    path: path.resolve(__dirname, '../dist'),
    // 給js文件加上 contenthash
    filename: 'js/chunk-[contenthash].js',
    clean: true,
  },

以上就是前端必會(huì)的Webpack優(yōu)化技巧的詳細(xì)內(nèi)容，更多關(guān)于前端Webpack優(yōu)化技巧的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！