一、前言

最近一段時間在學習 Webpack 方面的知識。在學習的過程中主要配置的是 webpack.config.js 文件。

但是在 Vue-cli 3.x 下，已經對 Webpack 做了深度的封裝，很多已經是默認配置了，在這里就針對這些深入了解下，并區別說明下。

二、量化、分析

這里主要介紹兩個插件，分別是量化打包時間，和打包后分析的。

1、speed-measure-webpack-plugin

這個包可以測量各個插件和 loader 所花費的時間，構建完成后會顯示這樣的信息：

這樣在優化的時候就有了一個比較明確的對比概念。

安裝：

npm i speed-measure-webpack-plugin -D

使用：

Vue-cli 2.x 中如下

//webpack.config.js

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

const smp= newSpeedMeasurePlugin();

const config={//...webpack配置

}

module.exports= smp.wrap(config);

Vue-cli 3.x 中如下(主要區別是包裹 configureWebpack )

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')

const smp= newSpeedMeasurePlugin({

outputFormat:'human'})

module.exports={

configureWebpack: smp.wrap({

plugins: []

})

}

這樣配置后，再次構建，就可以看到上面那樣的信息。

2、webpack-bundle-analyzer

這個是分析打包后，各個文件的大小，用于分析 bundle 的

安裝：

npm i webpack-bundle-analyzer -D

在 Vue-cli 3.x 下，安裝這個包會報錯，是因為用 Vue-cli 3.x 構建的項目在 node_modules 中已經存在，但是項目的 package.json 中沒有引用。

需要在 node_modules 中刪除這個包，重新安裝就可以。

使用：(下面是 Vue-cli 3.x)

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

configureWebpack: smp.wrap({

plugins: [

// 這個要放在所有 plugins 最后newBundleAnalyzerPlugin()

]

})

在構建完成后，會直接啟動一個服務，有一個可視化的界面查看構建后的 bundle。

三、緩存

在這里也介紹兩個緩存的地方。

1、cache-loader

在一些性能開銷較大的 loader 前面添加 cache-loader，將結果緩存在磁盤中

安裝：

npm install cache-loader -D

使用：

在 Vue-cli 2.x 中

module.exports ={//...module: {//我的項目中,babel-loader耗時比較長，所以我給它配置了`cache-loader`

rules: [

{

test:/\.jsx?$/,

use: ['cache-loader','babel-loader']

}

]

}

}

在 Vue-cli 3.x 中，這個配置是默認的配置，分別對：【vue-loader、babel-loader】兩個進行了緩存，其他的需要緩存再自己配置。

2、hard-source-webpack-plugin

這個是為模塊提供中間緩存，效率提升很大。

安裝：

npm i hard-source-webpack-plugin -D

使用：

直接在 plugins 中 new 就可以。

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')

module.exports={

configureWebpack: smp.wrap({

plugins: [//為模塊提供中間緩存，緩存路徑是：node_modules/.cache/hard-source

newHardSourceWebpackPlugin(),newBundleAnalyzerPlugin()

]

})

}

構建后效果：

? ? ??

? ? ??

上面三副圖，分別是配置后第一次、第二次、第三次構建的，第三次構建才打到的 80% 性能提升。

參考：

總結

以上是生活随笔為你收集整理的vue中webpack默认配置_Vue-cli 中 Webpack 配置优化（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。