這篇文章主要講解了Vue打包體積優(yōu)化的方法，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),撫順企業(yè)網(wǎng)站建設(shè),撫順品牌網(wǎng)站建設(shè),網(wǎng)站定制,撫順網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,撫順網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
Vue-cli3 打包體積優(yōu)化方案
前言:
公司項(xiàng)目完成后 ，打包完成后有1.18MB，其實(shí)感覺還行了，但是還可以有優(yōu)化的地方，對(duì)于咱們有精益求精（有沒有還是有點(diǎn)*數(shù)的）的精神下再去優(yōu)化，可以先在項(xiàng)目中安裝webpack-bundle-analyzer可以看到各個(gè)文件的大小
npm install webpack-bundle-analyzer -save-dev
在vue.config.js中進(jìn)行配置
重慶分公司
重慶分公司
module.exports = {
chainWebpack: config => {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
}執(zhí)行npm run build 或者 npm run serve 會(huì)出現(xiàn)這花里胡哨的界面用來分析文件大小
分析
還沒進(jìn)行優(yōu)化前vendor~app.xxxx.js 有1.18MB，咱們可以查看各個(gè)bundle大小，針對(duì)性的進(jìn)行優(yōu)化
優(yōu)化
cdn加載
對(duì)于vue、vue-router、vuex、axios等都可以在生產(chǎn)環(huán)境用CDN加載
const externals = {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios'
}
const cdn = {
css: [],
js: [
'https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js',
'https://cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.min.js',
'https://cdn.jsdelivr.net/npm/vuex@3.0.1/dist/vuex.min.js',
'https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js',
]
}
module.exports = {
chainWebpack: config => {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
config.plugin('html').tap(args => {
if (process.env.NODE_ENV === 'production') {
args[0].cdn = cdn
}
return args
})
},
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
return {
externals: externals,
};
}
},
}接著修改pubilc/index.html文件
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<% } %>
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<% } %>
上海比戶
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<% } %>
路由懶加載
當(dāng)打包應(yīng)用的時(shí)候，JavaScript包會(huì)變的特別大，影響頁面加載，如果這時(shí)我們?cè)谠L問路由的時(shí)候去加載該模塊，那會(huì)變的十分高效，把靜態(tài)引入方式改為動(dòng)態(tài)引入方式
import ComponentA from '../page/components/ComponentA';
routeList = [
{
path: '/comA',
component: ComponentA
},
]
//改為
routeList = [
{
path: '/comA',
component: () => import('../page/components/ComponentA')
},
]由于我的項(xiàng)目一開始就用了路由懶加載，所以在打包文件上看不出體積大小的變化，但是大概會(huì)有個(gè)300k的大小減少
在vue cli3中，我們還需要手動(dòng)移除prefetch，Preload，因?yàn)樵趘ue cli 官方文檔上提到，可以去了解下，我這大致概括了下
就是當(dāng)首屏加載的時(shí)候，會(huì)一次性下載完所以的路由文件，這會(huì)導(dǎo)致首屏的時(shí)候請(qǐng)求內(nèi)容變多，首屏加載變慢，修改如下
module.exports = {
chainWebpack: config => {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
config.plugin('html').tap(args => {
if (process.env.NODE_ENV === 'production') {
args[0].cdn = cdn
}
return args
})
// 移除 prefetch 插件
config.plugins.delete('prefetch')
// 移除 preload 插件
config.plugins.delete('preload');
},
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
return {
externals: externals,
};
}
},
}element-ui 按需加載
看element-ui/lib 這個(gè)包就占了總包大小的三分之二，554k，總包也就700多k，所以如果把element-ui 按需加載，那就可以減少體積，按需加載這就不說了吧，都會(huì)~:stuck_out_tongue_closed_eyes:
但是需要在 babel.config.js文件中添加（vue cli3 中需要安裝 babel-plugin-component）
module.exports = {
presets: ['@vue/app'],
//加上這~
plugins: [
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk'
}
]
]
};gzip
安裝 compression-webpack-plugin
nmp i compression-webpack-plugin -D
在vue.config.js中引入
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
chainWebpack: config => {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
config.plugin('html').tap(args => {
if (process.env.NODE_ENV === 'production') {
args[0].cdn = cdn
}
return args
})
// 移除 prefetch 插件
config.plugins.delete('prefetch')
// 移除 preload 插件
config.plugins.delete('preload');
},
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
return {
externals: externals,
plugins: [
//gzip壓縮
new CompressionPlugin({
test: /\.js∣¨E92E.html|\.html∣¨E92E.html|.\css/, //匹配文件名
threshold: 10240, //對(duì)超過10k的數(shù)據(jù)壓縮
deleteOriginalAssets: false //不刪除源文件
})
],
performance: {
hints: false
}
};
}
},
}可以在上面的圖看到，進(jìn)行g(shù)zip壓縮后的文件最大的也只有140k了
但是還需要在服務(wù)端配置
scss文件引入
我們通常會(huì)把scss文件抽離出來，一些共用樣式，主題等，然后會(huì)在每個(gè)需要的組件中引入會(huì)顯得繁瑣，我們可以借助scss-loader進(jìn)行預(yù)處理
例如我們有 resetTable.scss 文件，可以在vue.config.js中引入
module.exports = {
chainWebpack: config => {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
config.plugin('html').tap(args => {
if (process.env.NODE_ENV === 'production') {
args[0].cdn = cdn
}
return args
})
// 移除 prefetch 插件
config.plugins.delete('prefetch')
// 移除 preload 插件
config.plugins.delete('preload');
},
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
return {
externals: externals,
plugins: [
//gzip壓縮
new CompressionPlugin({
test: /\.js∣¨E92E.html|\.html∣¨E92E.html|.\css/, //匹配文件名
threshold: 10240, //對(duì)超過10k的數(shù)據(jù)壓縮
deleteOriginalAssets: false //不刪除源文件
})
],
performance: {
hints: false
}
};
}
},
// scss設(shè)置
css: {
loaderOptions: {
sass: {
//我是放在 assets/commcss 目錄下
data: '@import "@assets/commcss/resetTable.scss";'
}
},
},
}上面這圖就是完整的vue.config.js配置啦~
看完上述內(nèi)容，是不是對(duì)Vue打包體積優(yōu)化的方法有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
