vue項(xiàng)目打包優(yōu)化的示例分析

發(fā)布時(shí)間：2021-07-09 10:56:13 來源：億速云閱讀：189 作者：小新欄目：web開發(fā)

小編給大家分享一下vue項(xiàng)目打包優(yōu)化的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

使用vue-cli部署生產(chǎn)包時(shí)，發(fā)現(xiàn)資源包很大，打包后的vendor.js達(dá)到了1.4M，這已經(jīng)很大了，而且會(huì)影響到首屏加載。那么，怎么優(yōu)化呢？

1.組件按需加載

這是首先可以優(yōu)化的點(diǎn)。如果頻繁使用了第三方組件/UI庫，如我的項(xiàng)目中經(jīng)常同時(shí)使用了 element-ui, mint-ui,echarts等組件庫，如果全部引入，項(xiàng)目體積非常大，這時(shí)可以按需引入組件。

示例如下：

1.1 element-ui

首先，安裝 babel-plugin-component：

npm install babel-plugin-component -D

然后，將.babelrc 修改為：

{
 "presets": [["es2015", { "modules": false }]],
 "plugins": [
  [
   "component",
   {
    "libraryName": "element-ui",
    "styleLibraryName": "theme-chalk"
   }
  ]
 ]
}

然后引入部分組件，這樣一來，就不需要引入樣式了，插件會(huì)幫我們處理。

// main.js
import Vue from 'vue'
import { Dialog, Loading } from 'element-ui'

Vue.use(Dialog)
Vue.use(Loading.directive)
Vue.prototype.$loading = Loading.service
// 然后正常使用組件

1.2 mint-ui

由于mint-ui是element-ui的移動(dòng)端組件，所以它的使用和引入幾乎和element-ui一樣。

首先，安裝 babel-plugin-component：

npm install babel-plugin-component -D

然后，將.babelrc 修改為：

{
 "presets": [
  ["es2015", { "modules": false }]
 ],
 "plugins": [["component", [
  {
   "libraryName": "mint-ui",
   "style": true
  }
 ]]]
}

然后引入部分組件

// main.js
import Vue from 'vue'
import { Toast, MessageBox } from 'element-ui'

Vue.use(Dialog)
Vue.use(Loading.directive)
Vue.prototype.$loading = Loading.service
// 然后正常使用組件

注意，element-ui和mint-ui不能同時(shí)在.babelrc中進(jìn)行插件設(shè)置，這種情況下，依然可以按需引入，但是不要在.babelrc中配置，在引入的地方同時(shí)引入css即可。

1.3 echarts

首先安裝babel-plugin-equire

npm i babel-plugin-equire -D

然后，在.babelrc文件中添加該插件

{
 "plugins": [
    // other plugins
    ...
    
  "equire"
 ]
}

創(chuàng)建一個(gè)js文件

// echarts.js
// eslint-disable-next-line
const echarts = equire([
 'tooltip',
 'candlestick',
 'bar',
 'line',
 'axisPointer',
 'legend',
 'grid'
])
export default echarts

// 業(yè)務(wù)組件，引入echarts
import echarts from '@/assets/lib/echarts'
// 使用與以前一樣

按需加載echarts

解決vue-cli首屏加載慢的問題

2.路由懶加載

這里需要一個(gè)插件

vue-router官方推薦syntax-dynamic-import插件，不過它要求同時(shí)安裝@bable/core^7.0.0，如果你安裝了babel-core6，是會(huì)有版本沖突的。我的做法如下

npm install babel-plugin-syntax-dynamic-import --save-dev(^6.18.0)

// router.js
const login = () => import('@/components/login')
const router = new VueRouter({
 routes: [
  { path: '/login', component: login }
 ]
})

還有一種魔法注釋用法

有時(shí)候我們想把某個(gè)路由下的所有組件都打包在同個(gè)異步塊 (chunk) 中。只需要使用命名 chunk，一個(gè)特殊的注釋語法來提供 chunk name (需要 Webpack > 2.4)。

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')

3.異步組件

如果組件在頁面加載時(shí)不需要，只在調(diào)用時(shí)用到，這時(shí)可以使用異步組件的寫法。僅僅是引入和組件注冊(cè)寫法不同

// template
<test v-if="showTest"></test>

// script
 components: {
  test: () => import('./test') // 將組件異步引入，告訴webpack，將該部分代碼分割打包
 },
 methods:{
   clickTest () {
     this.showTest = !this.showTest
  }
 }

4.圖片的壓縮合并

無損壓縮圖片：https://www.jb51.net/softs/605425.html

如有可能，將圖片制作成精靈圖

5.CDN加速

在index.html中引入cdn資源

...
<body>

<div id="app">
</div>
<!-- built files will be auto injected -->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
</body>
...

修改 build/webpack.base.conf.js

module.exports = {
context: path.resolve(__dirname, '../'),
entry: {

app: './src/main.js'
},
externals:{

'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex':'Vuex',
'vue-resource': 'VueResource'
},
...
}

修改src/main.js src/router/index.js 注釋掉import引入的vue,vue-resource

// import Vue from 'vue'
// import VueResource from 'vue-resource'
// Vue.use(VueResource)

6.壓縮代碼

vue-cli已經(jīng)使用UglifyJsPlugin 插件來壓縮代碼，可以設(shè)置成如下配置：

new webpack.optimize.UglifyJsPlugin({
 compress: {
  warnings: false,
  drop_console: true,
  pure_funcs: ['console.log']
 },
 sourceMap: false
})

其中sourceMap: false是禁用除錯(cuò)功能。

如果設(shè)為true，在部署包中會(huì)生成.map結(jié)尾的js文件。它用于在代碼混淆壓縮的情況下仍可進(jìn)行調(diào)試。這個(gè)功能雖好，但會(huì)大大增加整體資源包的體積，所以將其禁用。

以上是“vue項(xiàng)目打包優(yōu)化的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

vue項(xiàng)目打包優(yōu)化的示例分析

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽