vue3项目减少打包文件体积

1.减少打包文件体积，不生成map文件

在vue.config.js文件中的module.exports中添加配置项，dist体积可减少50%以上

module.exports = {
    productionSourceMap: false 
}

2.使用CDN引入组件

在index.html中引入cdn的js和css，拿element-ui示例（注意引入element-ui需要先引入Vue）

<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.1/theme-chalk/index.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.1/index.js"></script>

在vue.config.js中配置

module.exports = {
    configureWebpack:{
        //引入cdn中的vue和element-ui
        externals:{
            'vue': 'Vue',
            'element-ui': 'ELEMENT'
        }
    }
}

3. 图片压缩，vue正常打包之后一些图片文件很大，使打包体积很大，通过image-webpack-loader插件可将大的图片进行压缩从而缩小打包体积

   先安装依赖：cnpm install image-webpack-loader --save-dev
   在vue.config.js中module.exports写入：

module.exports = {
    productionSourceMap: false,
    chainWebpack: config => {
        // ============压缩图片 start============
        config.module
            .rule('images')
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({ bypassOnDebug: true })
            .end()
        // ============压缩图片 end============
    }
}

4. 使用Router懒加载，当使用的时候，再去引入这个组件的资源

component:()=>import('@/views/Login')