Vue 打包體積優(yōu)化方案小結(jié)
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文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.png" rel="external nofollow" > <!-- 使用CDN的CSS文件 --> <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %> <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="external nofollow" rel="preload" as="style"> <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="external nofollow" rel="stylesheet"> <% } %> <!-- 使用CDN的JS文件 --> <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %> <link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="external nofollow" rel="preload" as="script"> <% } %> <title>上海比戶</title> </head> <body> <noscript> <strong></strong> </noscript> <div id="app"></div> <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %> <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script> <% } %> </body> </html>
路由懶加載
當(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配置啦~
總結(jié):
以上就是目前我在項(xiàng)目中優(yōu)化的點(diǎn),但肯定還有其他的優(yōu)化地方,可以相互討論
到此這篇關(guān)于Vue 打包體積優(yōu)化方案小結(jié)的文章就介紹到這了,更多相關(guān)Vue 打包體積優(yōu)化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue生成初始化名字相近的變量并放到數(shù)組中的示例代碼
項(xiàng)目上有一個(gè)需求,頁面上有50、60個(gè)數(shù)據(jù)變量,是依次排序遞增的變量,中間有個(gè)別變量用不到,不想把這些變量直接定義在data() { }內(nèi),這篇文章主要介紹了vue生成初始化名字相近的變量并放到數(shù)組中的示例代碼,需要的朋友可以參考下2024-08-08Vue3+Elementplus實(shí)現(xiàn)面包屑功能
這篇文章主要為大家詳細(xì)介紹了Vue3如何結(jié)合Elementplus實(shí)現(xiàn)面包屑功能,文中的示例代碼簡潔易懂,具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下2023-11-11Ant Design Vue Pro動(dòng)態(tài)路由加載,服務(wù)器重啟首頁白屏問題
這篇文章主要介紹了Ant Design Vue Pro動(dòng)態(tài)路由加載,服務(wù)器重啟首頁白屏問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10手把手教你vue實(shí)現(xiàn)動(dòng)態(tài)路由
動(dòng)態(tài)路由可以根據(jù)不同用戶登錄獲取不一樣的路由層級(jí),可隨時(shí)調(diào)配路由,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)動(dòng)態(tài)路由的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07idea編譯器vue縮進(jìn)報(bào)錯(cuò)問題場景分析
idea編譯器出現(xiàn)Vue縮進(jìn)報(bào)錯(cuò),怎么解決呢,很多朋友遇到這個(gè)問題都很棘手,不知該如何解決,今天小編給大家通過場景分析介紹解決方案,需要的朋友參考下吧2021-07-07