vue性能优化，通过webpack

1.路由懒加载

1. 参考vue-router官方文档

安装@babel/plugin-syntax-dynamic-import插件
npm install --save-dev @babel/plugin-syntax-dynamic-import
babel.config.js里面声明使用插件
"plugins": ["@babel/plugin-syntax-dynamic-import"]

2. 使用路由懒加载方式写路由

{
path: '/home',
name: 'Home',
component: ()=>import(/* webpackChunkName: "homes" / "../views/Home.vue")
},
{
path: '/couponIndex',
name: 'couponIndex',
component:()=>import(/ webpackChunkName: "homes" / "../views/coupon/Index.vue")
},
{
path: '/cardbagIndex',
name: 'cardbagIndex',
component:()=>import(/ webpackChunkName: "others" */ "../views/cardbag/Index.vue")
}
webpackChunkName是分组，可以把需要一起加载的放一起，优化加载速度
这样就完成了路由懒加载，再次打包后，会把不同组件分割到不同的js文件里

页面组件内引入别的组件，也要使用懒加载写法
components: {
NavBar: () => import("../../components/NavBar.vue"),
CircleRate: () => import("../../components/CircleRate.vue")
}

2.externals配置

默认情况下，依赖项的所有第三方包都会被打包到js/chunk-vendors.******.js文件中，会导致该js文件过大，加载速度很慢。
我们可以通过externals排除这些包，使它们不被打包到js/chunk-vendors.******.js文件中，而是需要加载时去请求cdn资源。
vue.config.js里面配置configureWebpack，配置externals

module.exports = {
    productionSourceMap: false,  //不生成map文件
    configureWebpack: {
        externals: {
            'vue-lazyload': 'VueLazyload'
                        'axios': 'axios',
                        'dayjs': 'dayjs',
                        'crypto-js': 'CryptoJS',
                        'vue': 'Vue',
                        'vue-router': 'VueRouter',
                        'vuex': 'Vuex',
                        'element-ui': 'ELEMENT'
        }
    }
}

在public目录index.html文件里面，引入需要的js文件
    <link rel="stylesheet" href="https://lib.baomitu.com/element-ui/2.15.0/theme-chalk/index.min.css">
    <script src="https://s2.pstatp.com/cdn/expire-1-M/axios/0.21.1/axios.min.js"></script>
    <script src="https://lib.baomitu.com/dayjs/1.10.4/dayjs.min.js"></script>
    <script src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
    <script src="https://lib.baomitu.com/vuex/3.6.2/vuex.min.js"></script>
    <script src="https://lib.baomitu.com/vue-router/3.5.1/vue-router.min.js"></script>
    <script src="https://lib.baomitu.com/crypto-js/4.0.0/crypto-js.min.js"></script>
    <script src="https://lib.baomitu.com/vue-lazyload/1.3.3/vue-lazyload.js"></script>
    <script src="https://lib.baomitu.com/element-ui/2.15.0/index.min.js"></script>

在main.js里删除elementui引入相关代码

另外那些ui框架引入的css和js，也放到这里来，elementui也是一样的操作
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.9/lib/index.css"/>
<script src="https://cdn.jsdelivr.net/npm/vant@2.9/lib/vant.min.js"></script>

这样完成后，再次打包，js文件会大大变小，加载速度非常棒。

3.不生成map文件

productionSourceMap: false

4. 图片懒加载,组件懒加载

使用vue-lazyload包，实现图片资源懒加载，组件懒加载

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
  lazyComponent: true
})
//使用方式
<div class="img-list">
    <div v-for="(image, index) in imageList" :key="index">
        <img v-lazy="image" />
    </div>
</div>
//注意事项，需要给img固定宽高
.img-list {
        height: 70vh;
        overflow-y: auto;
        
        img {
            max-width: 7.2rem;
            height: 6rem;
        }
}
//再次打开页面，会发现，随着滚动，当需要加载时，才会加载图片
//组件懒加载，需要把组件放在<lazy-component>标签中间即可。
<lazy-component>
    <CircleRate></CircleRate>
</lazy-component>
可以在组件mounted里面加入console语句，监测懒加载是否成功。