VUE 前端項目優化方法

時間 2019-12-02

標籤 vue 前端項目優化方法简体版

原文原文鏈接

前端項目經過webpack打包會生成app.js和vendor.js，若是第三方組件依賴過多，會形成打包後的vendor.js過大，頁面首次加載的時候會出現白屏時間過長，影響用戶體驗。對此，咱們須要經過下面的方法對前端項目進行優化，減少打包後生成的js大小，從而提升加載速度。下面以USM項目爲例，進行優化：

1、公用靜態資源經過CDN加載

目前全部項目都經過npm包的形式引入vue、vue-router、axios、vuex、element-ui、ucar-view這些第三方包，webpack打包的時候會將這些資源打包到vendor.js中，咱們能夠將這些公用資源經過cdn引入到index.html中，可大大減少vendor.js的大小。css

第一步：index.html中cdn引入靜態資源html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <meta name="renderer" content="webkit" />
    <link rel="shortcut icon" href="static/logo.ico" />
    <title>統一管理系統-神州優車集團協同辦公門戶</title>
    <!-- heade中引入公用css資源 -->
    <link rel="stylesheet" href="http://w3static.zuchecdn.com/upload/201901/1547542189993_element-ui.css" />
    <link rel="stylesheet" href="http://w3static.zuchecdn.com/upload/201901/1547548288099_ucar-view.css" />
  </head>
  <body>
    <div id="app"></div>
    <!-- body中引入公用js資源 -->
    <script src="http://w3static.zuchecdn.com/upload/201901/1547542004668_vue.min.js"></script>
    <script src="http://w3static.zuchecdn.com/upload/201901/1547542053516_axios.min.js"></script>
    <script src="http://w3static.zuchecdn.com/upload/201901/1547542073388_vue-router.min.js"></script>
    <script src="http://w3static.zuchecdn.com/upload/201901/1547542116839_element-ui.js"></script>
    <script src="http://w3static.zuchecdn.com/upload/201901/1547695026296_ucar-view.umd.min.js"></script>
    <script src="http://w3static.zuchecdn.com/upload/201901/1547542098031_vuex.min.js"></script>
    <script src="http://w3static.zuchecdn.com/upload/201901/1547542135730_es6-promise.auto.min.js"></script>
  </body>
</html>

第二步：webpack.base.conf.js中引入靜態資源前端

//放入module.exports中
externals: {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    axios: 'axios',
    vuex: 'Vuex',
    'element-ui': 'ELEMENT',
    '@ucar/ucar-view': 'ucar-view'
  },

第三步：main.js中刪除element-ui、ucar-view的引用vue

　　刪除import elementui from 'element-ui'webpack

　　刪除import ucarView from '@ucar/ucar-view'ios

　　刪除Vue.use(elementui)nginx

　　刪除Vue.use(ucarView) 或者 Vue.use(Element, { size: 'small'})es6

　　刪除import 'element-ui/lib/theme-chalk/index.css'web

　　增長Vue.prototype.$ELEMENT = { size: 'small'}vue-router

第四步：刪除項目依賴包

在項目package.json中刪除已經用cdn引入的包

刪除前：