vue項目打包優化策略

時間 2019-11-08

標籤 vue 項目打包優化策略简体版

原文原文鏈接

vue項目打包優化策略

使用vue-cli部署生產包時，發現資源包很大，打包後的vendor.js達到了1.4M，這已經很大了，並且會影響到首屏加載。那麼，怎麼優化呢？css

1.組件按需加載

這是首先能夠優化的點。若是頻繁使用了第三方組件/UI庫，如個人項目中常常同時使用了 element-ui, mint-ui,echarts等組件庫，若是所有引入，項目體積很是大，這時能夠按需引入組件。html

示例以下：vue

1.1 element-ui

首先，安裝 babel-plugin-component：webpack

npm install babel-plugin-component -D

而後，將.babelrc 修改成：web

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

而後引入部分組件，這樣一來，就不須要引入樣式了，插件會幫咱們處理。vue-router

// 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的移動端組件，因此它的使用和引入幾乎和element-ui同樣。vuex

首先，安裝 babel-plugin-component：vue-cli

npm install babel-plugin-component -D

而後，將.babelrc 修改成：npm

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

而後引入部分組件element-ui

// 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不能同時在.babelrc中進行插件設置，這種狀況下，依然能夠按需引入，可是不要在.babelrc中配置，在引入的地方同時引入css便可。

1.3 echarts

首先安裝babel-plugin-equire

npm i babel-plugin-equire -D

而後，在.babelrc文件中添加該插件

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

建立一個js文件

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

// 業務組件，引入echarts
import echarts from '@/assets/lib/echarts'
// 使用與之前同樣

按需加載echarts

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

2.路由懶加載

這裏須要一個插件

vue-router官方推薦syntax-dynamic-import插件，不過它要求同時安裝@bable/core^7.0.0，若是你安裝了babel-core6，是會有版本衝突的。個人作法以下

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 }
  ]
})

還有一種魔法註釋用法

有時候咱們想把某個路由下的全部組件都打包在同個異步塊 (chunk) 中。只須要使用命名 chunk，一個特殊的註釋語法來提供 chunk name (須要 Webpack > 2.4)。

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

3.異步組件

若是組件在頁面加載時不須要，只在調用時用到，這時可使用異步組件的寫法。僅僅是引入和組件註冊寫法不一樣

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

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

4.圖片的壓縮合並

無損壓縮圖片：https://tinypng.com/

若有可能，將圖片製做成精靈圖

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已經使用UglifyJsPlugin 插件來壓縮代碼，能夠設置成以下配置：

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

其中sourceMap: false是禁用除錯功能。

若是設爲true，在部署包中會生成.map結尾的js文件。它用於在代碼混淆壓縮的狀況下仍可進行調試。這個功能雖好，但會大大增長總體資源包的體積，因此將其禁用。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。