Vue 實(shí)現(xiàn)CLI 3.0 + momentjs + lodash打包時(shí)優(yōu)化
在vue-cli 2.0時(shí)代,webpack的配置是有獨(dú)立文件的,包含在build目錄下,修改也比較方便
到vue-cli 3.0后,webpack配置被整合到vue-cli的配置中了,需要配置一些打包插件比較麻煩了,比如優(yōu)化momentjs壓縮包,使用webpack-bundle-analyzer等…
研究后發(fā)現(xiàn)vue-cli 3.0使用了chainWebpack來(lái)支持額外的插件配置,其實(shí)和2.0是差不多的
我們這里使用momentjs,lodash和webpack-bundle-analyzer來(lái)演示如何配置chainWebpack
安裝依賴
chainWebpack已經(jīng)默認(rèn)包含在vue-cli中了,無(wú)需安裝
只需安裝webpack-bundle-analyzer和momentjs,lodash,我用的是yarn,所以
yarn add momentjs yarn add webpack-bundle-analyzer lodash-webpack-plugin --dev //優(yōu)化要用到的插件
創(chuàng)建vue.config.js
在根目錄下創(chuàng)建vue.config.js
vue.config.js
var webpack = require('webpack') //引入webpack庫(kù)
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin //引入webpack-bundle-analyzer
module.exports = {
chainWebpack: config => {
config.plugin('ignore')
.use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/));//忽略/moment/locale下的所有文件
config.plugin('analyzer')
.use(new BundleAnalyzerPlugin())//使用webpack-bundle-analyzer 生成報(bào)表
config.plugin("loadshReplace")
.use(new LodashModuleReplacementPlugin());//優(yōu)化lodash
}
}
編譯
通過(guò)yarn run build 編譯并生成報(bào)表,圖比較老,用的其他項(xiàng)目里面沒(méi)有l(wèi)odash
壓縮前
壓縮后
參考
以上這篇Vue 實(shí)現(xiàn)CLI 3.0 + momentjs + lodash打包時(shí)優(yōu)化就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目webpack中配置src路徑別名及使用方式
這篇文章主要介紹了vue項(xiàng)目webpack中配置src路徑別名及使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue報(bào)錯(cuò):Injection?"xxxx"?not?found的解決辦法
這篇文章主要給大家介紹了關(guān)于Vue報(bào)錯(cuò):Injection?"xxxx"?not?found的解決辦法,文中通過(guò)圖文將解決的辦法介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
本文將詳細(xì)介紹通過(guò)Vue使多元素進(jìn)行過(guò)渡動(dòng)畫,需要的朋友可以參考下2020-02-02
vue引用BootStrap以及引用bootStrap-vue.js問(wèn)題
這篇文章主要介紹了vue引用BootStrap以及引用bootStrap-vue.js問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue后臺(tái)管理添加多語(yǔ)言功能的實(shí)現(xiàn)示例
這篇文章主要介紹了vue后臺(tái)管理添加多語(yǔ)言功能的實(shí)現(xiàn)示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
Vue中引入echarts的步驟及折線圖、柱狀圖常見(jiàn)配置項(xiàng)
這篇文章主要介紹了Vue中引入echarts的步驟及折線圖、柱狀圖常見(jiàn)配置項(xiàng),需要的朋友可以參考下2023-11-11
這篇文章主要介紹了Vue.js劃分組件的方法,需要的朋友可以參考下2017-10-10
使用Vant完成DatetimePicker 日期的選擇器操作
這篇文章主要介紹了使用Vant完成DatetimePicker 日期的選擇器操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
內(nèi)存泄露是指new了一塊內(nèi)存，但無(wú)法被釋放或者被垃圾回收。這篇文章主要介紹了vue使用中的內(nèi)存泄漏,需要的朋友可以參考下2018-07-07
在組件中增加的css加了scoped屬性之后,就在會(huì)在當(dāng)前這個(gè)組件的節(jié)點(diǎn)上增加一個(gè)data-v-xxx屬性,下面這篇文章主要給大家介紹了關(guān)于Vue中CSS?scoped原理的相關(guān)資料,需要的朋友可以參考下2023-01-01