常见项目优化

1、路由懒加载

// 静态引入
// import Home from '../pages/Home/Home.vue'
// import Category from '../pages/Category/Category.vue'

// 动态引入，按需引入。提高首屏渲染效率
const Home = () => import('../pages/Home/Home.vue')
const Category = () => import('../pages/Category/Category.vue')

2、图片懒加载

3、keep-alive缓存动态组件

<keep-alive>
    <!-- 动态组件 -->
    <component :is='comName'></component>
</keep-alive>

export default {
    data(){
        return {
            comName: 'Home'
        }
    },
}

4、项目打包上线前，关闭生产环境映射文件

.map文件是映射文件，体积比较大。项目打包上线前需要关闭map映射，优化项目体积

优化前：

优化后：

module.exports = {
    productionSourceMap:false, // 关闭生成环境 map映射文件
}