欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue 打包體積優(yōu)化方案小結(jié)

 更新時(shí)間:2020年05月20日 14:27:48   作者:eg  
這篇文章主要介紹了Vue 打包體積優(yōu)化方案小結(jié),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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中v-bind與v-model的區(qū)別舉例詳解

    vue中v-bind與v-model的區(qū)別舉例詳解

    這篇文章主要給大家介紹了關(guān)于vue中v-bind與v-model區(qū)別的相關(guān)資料,v-model和v-bind是Vue.js框架中的兩個(gè)常用指令,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
    2023-09-09
  • vue生成初始化名字相近的變量并放到數(shù)組中的示例代碼

    vue生成初始化名字相近的變量并放到數(shù)組中的示例代碼

    項(xiàng)目上有一個(gè)需求,頁面上有50、60個(gè)數(shù)據(jù)變量,是依次排序遞增的變量,中間有個(gè)別變量用不到,不想把這些變量直接定義在data() { }內(nèi),這篇文章主要介紹了vue生成初始化名字相近的變量并放到數(shù)組中的示例代碼,需要的朋友可以參考下
    2024-08-08
  • Vue路由vue-router用法講解

    Vue路由vue-router用法講解

    這篇文章介紹了Vue路由vue-router的用法,文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-01-01
  • Vue3+Elementplus實(shí)現(xiàn)面包屑功能

    Vue3+Elementplus實(shí)現(xiàn)面包屑功能

    這篇文章主要為大家詳細(xì)介紹了Vue3如何結(jié)合Elementplus實(shí)現(xiàn)面包屑功能,文中的示例代碼簡潔易懂,具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下
    2023-11-11
  • Ant Design Vue Pro動(dòng)態(tài)路由加載,服務(wù)器重啟首頁白屏問題

    Ant 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)聊天界面

    Vue實(shí)現(xiàn)聊天界面

    這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)聊天界面,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-06-06
  • Vue項(xiàng)目中引入ECharts的教程詳解

    Vue項(xiàng)目中引入ECharts的教程詳解

    ECharts是一個(gè)強(qiáng)大的畫圖插件,在vue項(xiàng)目中,我們常??梢砸肊charts來完成完成一些圖表的繪制,本文就來和大家介紹一下如何在Vue項(xiàng)目中引入ECharts吧
    2023-03-03
  • axios庫的核心代碼解析及總結(jié)

    axios庫的核心代碼解析及總結(jié)

    這篇博客針對(duì)axios庫的核心代碼做一個(gè)簡要總結(jié),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-09-09
  • 手把手教你vue實(shí)現(xiàn)動(dòng)態(tài)路由

    手把手教你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-07
  • idea編譯器vue縮進(jìn)報(bào)錯(cuò)問題場景分析

    idea編譯器vue縮進(jìn)報(bào)錯(cuò)問題場景分析

    idea編譯器出現(xiàn)Vue縮進(jìn)報(bào)錯(cuò),怎么解決呢,很多朋友遇到這個(gè)問題都很棘手,不知該如何解決,今天小編給大家通過場景分析介紹解決方案,需要的朋友參考下吧
    2021-07-07

最新評(píng)論