vue中webpack默认配置_Vue-cli 中 Webpack 配置优化（一）
一、前言
最近一段時(shí)間在學(xué)習(xí) Webpack 方面的知識(shí)。在學(xué)習(xí)的過(guò)程中主要配置的是 webpack.config.js 文件。
但是在 Vue-cli 3.x 下，已經(jīng)對(duì) Webpack 做了深度的封裝，很多已經(jīng)是默認(rèn)配置了，在這里就針對(duì)這些深入了解下，并區(qū)別說(shuō)明下。
二、量化、分析
這里主要介紹兩個(gè)插件，分別是量化打包時(shí)間，和打包后分析的。
1、speed-measure-webpack-plugin
這個(gè)包可以測(cè)量各個(gè)插件和 loader 所花費(fèi)的時(shí)間，構(gòu)建完成后會(huì)顯示這樣的信息：
這樣在優(yōu)化的時(shí)候就有了一個(gè)比較明確的對(duì)比概念。
安裝：
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 中如下(主要區(qū)別是包裹 configureWebpack )
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const smp= newSpeedMeasurePlugin({
outputFormat:'human'})
module.exports={
configureWebpack: smp.wrap({
plugins: []
})
}
這樣配置后，再次構(gòu)建，就可以看到上面那樣的信息。
2、webpack-bundle-analyzer
這個(gè)是分析打包后，各個(gè)文件的大小，用于分析 bundle 的
安裝：
npm i webpack-bundle-analyzer -D
在 Vue-cli 3.x 下，安裝這個(gè)包會(huì)報(bào)錯(cuò)，是因?yàn)橛?Vue-cli 3.x 構(gòu)建的項(xiàng)目在 node_modules 中已經(jīng)存在，但是項(xiàng)目的 package.json 中沒(méi)有引用。
需要在 node_modules 中刪除這個(gè)包，重新安裝就可以。
使用：(下面是 Vue-cli 3.x)
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
configureWebpack: smp.wrap({
plugins: [
// 這個(gè)要放在所有 plugins 最后newBundleAnalyzerPlugin()
]
})
在構(gòu)建完成后，會(huì)直接啟動(dòng)一個(gè)服務(wù)，有一個(gè)可視化的界面查看構(gòu)建后的 bundle。
三、緩存
在這里也介紹兩個(gè)緩存的地方。
1、cache-loader
在一些性能開(kāi)銷(xiāo)較大的 loader 前面添加 cache-loader，將結(jié)果緩存在磁盤(pán)中
安裝：
npm install cache-loader -D
使用：
在 Vue-cli 2.x 中
module.exports ={//...module: {//我的項(xiàng)目中,babel-loader耗時(shí)比較長(zhǎng)，所以我給它配置了`cache-loader`
rules: [
{
test:/\.jsx?$/,
use: ['cache-loader','babel-loader']
}
]
}
}
在 Vue-cli 3.x 中，這個(gè)配置是默認(rèn)的配置，分別對(duì)：【vue-loader、babel-loader】?jī)蓚€(gè)進(jìn)行了緩存，其他的需要緩存再自己配置。
2、hard-source-webpack-plugin
這個(gè)是為模塊提供中間緩存，效率提升很大。
安裝：
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()
]
})
}
構(gòu)建后效果：
? ? ??
? ? ??
上面三副圖，分別是配置后第一次、第二次、第三次構(gòu)建的，第三次構(gòu)建才打到的 80% 性能提升。
參考：
總結(jié)
以上是生活随笔為你收集整理的vue中webpack默认配置_Vue-cli 中 Webpack 配置优化（一）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： python包含某个数字_python编
- 下一篇： html5倒计时秒杀怎么做,vue 设