优化Vue项目,减小打包体积

我们在打包Vue项目时经常会遇到打包出来的项目特别大，放在服务器上加载首页特别慢，如图：

下面我来介绍几种我常用的减少项目大小的方式：

一.去除.map.js文件

在vue.config.js配置文件中

module.exports = {
    productionSourceMap:false
}
           

二.使用router懒加载

使用以下方式把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件

三. 使用cdn引入组件

稳定、快速、免费的前端开源项目 CDN 加速服务(BootCDN)

• 在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'
        }
    }
}
           

注意：如果启动报错，看看babel.config.js文件中是否有下面几行代码，如果有则注释掉

plugins: [
   [
     "component",
     {
       "libraryName":"element-ui",
       "styleLibraryName":"theme-chalk"
     }
   ]
 ]
           

四. 针对图片进行压缩（两种方式）

1、压缩本地图片

• 压缩图片网站(tinypng)
• 压缩图片网站(compressjpeg)

2、将图片上传到云服务器取地址显示