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

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

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

Vue-cli3 打包體積優(yōu)化方案

前言:

公司項目完成后 ,打包完成后有1.18MB,其實感覺還行了,但是還可以有優(yōu)化的地方,對于咱們有精益求精(有沒有還是有點*數(shù)的)的精神下再去優(yōu)化,可以先在項目中安裝webpack-bundle-analyzer可以看到各個文件的大小

npm install webpack-bundle-analyzer -save-dev

在vue.config.js中進行配置

module.exports = {
 chainWebpack: config => {
  config
  .plugin('webpack-bundle-analyzer')
  .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
 }
}

執(zhí)行npm run build 或者 npm run serve 會出現(xiàn)這花里胡哨的界面用來分析文件大小

分析

還沒進行優(yōu)化前vendor~app.xxxx.js 有1.18MB,咱們可以查看各個bundle大小,針對性的進行優(yōu)化

優(yōu)化

CDN加載

對于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>

路由懶加載

當打包應用的時候,JavaScript包會變的特別大,影響頁面加載,如果這時我們在訪問路由的時候去加載該模塊,那會變的十分高效,把靜態(tài)引入方式改為動態(tài)引入方式

import ComponentA from '../page/components/ComponentA';
routeList = [
 {
  path: '/comA',
  component: ComponentA
 },
]

//改為
routeList = [
 {
  path: '/comA',
  component: () => import('../page/components/ComponentA')
 },
]

由于我的項目一開始就用了路由懶加載,所以在打包文件上看不出體積大小的變化,但是大概會有個300k的大小減少

在vue cli3中,我們還需要手動移除prefetch,Preload,因為在vue cli 官方文檔上提到,可以去了解下,我這大致概括了下

就是當首屏加載的時候,會一次性下載完所以的路由文件,這會導致首屏的時候請求內(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 這個包就占了總包大小的三分之二,554k,總包也就700多k,所以如果把element-ui 按需加載,那就可以減少體積,按需加載這就不說了吧,都會~: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, //對超過10k的數(shù)據(jù)壓縮
    deleteOriginalAssets: false //不刪除源文件
    })
   ],
   performance: {
    hints: false
   }
   };
  }
 },
}

可以在上面的圖看到,進行g(shù)zip壓縮后的文件最大的也只有140k了

但是還需要在服務(wù)端配置

scss文件引入

我們通常會把scss文件抽離出來,一些共用樣式,主題等,然后會在每個需要的組件中引入會顯得繁瑣,我們可以借助scss-loader進行預處理

例如我們有 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, //對超過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é):

​ 以上就是目前我在項目中優(yōu)化的點,但肯定還有其他的優(yōu)化地方,可以相互討論

到此這篇關(guān)于Vue 打包體積優(yōu)化方案小結(jié)的文章就介紹到這了,更多相關(guān)Vue 打包體積優(yōu)化內(nèi)容請搜索腳本之家以前的文章或繼續(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框架中的兩個常用指令,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
    2023-09-09
  • vue生成初始化名字相近的變量并放到數(shù)組中的示例代碼

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

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

    Vue路由vue-router用法講解

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

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

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

    Ant Design Vue Pro動態(tài)路由加載,服務(wù)器重啟首頁白屏問題

    這篇文章主要介紹了Ant Design Vue Pro動態(tài)路由加載,服務(wù)器重啟首頁白屏問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Vue實現(xiàn)聊天界面

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

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

    Vue項目中引入ECharts的教程詳解

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

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

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

    手把手教你vue實現(xiàn)動態(tài)路由

    動態(tài)路由可以根據(jù)不同用戶登錄獲取不一樣的路由層級,可隨時調(diào)配路由,下面這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)動態(tài)路由的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-07-07
  • idea編譯器vue縮進報錯問題場景分析

    idea編譯器vue縮進報錯問題場景分析

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

最新評論