快捷導(dǎo)航

在vue.config.js中優(yōu)化webpack配置的方法

更新時(shí)間：2024年05月16日 10:22:15 作者：先知demons

在日常開發(fā)中我們離不開打包工具webpack,但是不同的配置會(huì)影響我們項(xiàng)目的運(yùn)行構(gòu)建時(shí)間,也會(huì)影響打包之后項(xiàng)目包的大小,這篇文章記錄一下我使用過的可以優(yōu)化webpack的配置,需要的朋友可以參考下

前言：

在日常開發(fā)中我們離不開打包工具webpack，但是不同的配置會(huì)影響我們項(xiàng)目的運(yùn)行構(gòu)建時(shí)間，也會(huì)影響打包之后項(xiàng)目包的大小，這篇文章記錄一下我使用過的可以優(yōu)化webpack的配置。

注：以本專欄上篇文章里面的vue.config.js為基礎(chǔ)，去加配置

一、壓縮圖片

1、先下載依賴

npm install --save-dev image-webpack-loader

2、在vue.config.js的module.exports上面先定義設(shè)置值

①默認(rèn)設(shè)置：（4M的圖片使用默認(rèn)設(shè)置壓縮成1.4M）

const defaultOptions = {
  bypassOnDebug: true,
};

②自定義設(shè)置

 const customOptions = {
      mozjpeg: {
        progressive: true,
        quality: 50
      },
      optipng: {
        enabled: true,
      },
      pngquant: {
        quality: [0.5, 0.65],
        speed: 4
      },
      gifsicle: {
        interlaced: false,
      },
      // 不支持WEBP就不要寫這一項(xiàng)
      webp: {
        quality: 75
      }
  }

3、在chainWebpack中加入配置：

chainWebpack: config => {
 
    config.module.rule('images') 
        .test(/\.(gif|png|jpe?g|svg)$/i)
        .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options(customOptions)
        .end() 
 
  }

options中可以切換使用默認(rèn)還是自定義

二、公共代碼抽離：

在configureWebpack加入配置：

configureWebpack: (config) => {
    config.optimization = {
      splitChunks: {
        cacheGroups: {
          vendor: {
            chunks: "all",
            test: /node_modules/,
            name: "vendor",
            minChunks: 1,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 100,
          },
          common: {
            chunks: "all",
            test: /[\\/]src[\\/]js[\\/]/,
            name: "common",
            minChunks: 2,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 60,
          },
          styles: {
            name: "styles",
            test: /\.(sa|sc|c)ss$/,
            chunks: "all",
            enforce: true,
          },
          runtimeChunk: {
            name: "manifest",
          },
        },
      },
    };
}

三、對代碼進(jìn)行壓縮，并移除控制臺(tái)輸出

1、先下載依賴

npm install uglifyjs-webpack-plugin --save-dev

2、在vue.config.js的第一行引入依賴

const UglifyPlugin = require("uglifyjs-webpack-plugin");

3、在configureWebpack中加入配置：

 config.plugins.push(
      new UglifyPlugin({
        uglifyOptions: {
          //生產(chǎn)環(huán)境自動(dòng)刪除console
          compress: {
            drop_debugger: true,
            drop_console: true,
            pure_funcs: ["console.log"],
          },
        },
        sourceMap: false,
        parallel: true,
      })
    );

以上就是在vue.config.js中優(yōu)化webpack配置的方法的詳細(xì)內(nèi)容，更多關(guān)于vue.config.js優(yōu)化webpack的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: