Vue项目首页优化记录

大概思路

1.路由懒加载
2.使用cdn代替import

具体操作

1.路由懒加载
在路由配置使用

const HelloWorld = () => import( '@/components/HelloWorld' )

代替

import HelloWorld from '@/components/HelloWorld'

其他的都操作和以前一样。
使用路由懒加载，在访问路由时是按需加载的。

2.使用cdn代替import
去除使用import的模块，用cdn代替。Vue.use()的去除。反正关于模块使用的都不要。
例如

import Vue from 'vue'
// import App from './App'
// import router from './router'

import VeHistogram from 'v-charts/lib/histogram.common'
import VePie from 'v-charts/lib/pie.common'   // 在需要的界面引入，优化首页
import VCharts from 'v-charts'

import axios from 'axios'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'bootstrap/dist/css/bootstrap.min.css'
import elTableInfiniteScroll from 'el-table-infinite-scroll'

在index.html中使用cdn替代

    <script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/v-charts/lib/pie.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/v-charts/lib/histogram.min.js"></script>
    <!-- -------------------------------------------------△△△△------------ -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">

使用cdn也要在main.js添加 */如果是封装过axios的把import这步去掉就行

Vue.prototype.$axios = axios;

在路由index.js中安装插件和使用

Vue.use(VueRouter)

export default new VueRouter({
	routes: []
})

在使用v-charts时，如果是按需引入要注册组件(可以全局，也可以部分)

components: {
        VeHistogram,
        VePie
    },

部分引入进一步优化参考vue项目优化之页面的按需加载(vue+webpack)

最后配置webpack.base.conf.js, 使项目打包时去除不需要的模块
添加

 },
  externals: {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    'axios': 'axios',
    'element-ui': 'ElementUI',
    'bootstrap':'bootstrap',
    'jquery': {
      commonjs: 'jQuery',
      amd: 'jQuery',
      root: '$'
    }
  }

使用cdn后对于使用less语法的组件样式，可以全部放在一个style.less文件中，然后在index.html引入,一定要在less.js前引入css。这个style.less可以放在static文件夹里。

对于封装的axios的消息提示样式使用element-ui问题。因为使用了cdn，所以使用消息提示为

ELEMENT.Message.error("服务器连接超时");

参考
vue项目首屏加载优化实战
Vue 项目首页优化
Less 中文网
CDN方式使用ElementUI的Message组件