使用vue-cli打包项目时候的一些体积优化方法

1.合理使用运行时依赖和开发依赖

作为开发者，要合理区分哪些插件是项目上线运行后需要的，哪些是用于打包编译，压缩而运行时并不需要的，进行分类安装。开发依赖不会被打包进最终的项目文件，能大大减少项目文件大小。

开发依赖在项目的package.json的devDependencies里，安装时使用的命令行：

npm install xxx --save–dev 
//简写
npm i xxx -D

运行时依赖在package.json的dependencies里，安装命令：

npm install xxx --save
//简写
npm i xxx -S

2.productionSourceMap: false

在config的index.js文件下，找到productionSourceMap设置为false。项目打包后都会经过压缩和混淆等处理，这样的话调试时无法找到报错出现的位置，productionSourceMap是为了找到错误发生位置而设置的，但项目上线后面对的是用户而不是程序员，这个配置就没必要了。划重点，这个选项能很大程度减小项目体积，博主曾经一个项目打包处理后1M+，productionSourceMap设置为false后只有300k+。

3.使用ui框架还要echart时按需引入

ui框架里面会有很多封装好的组件，但很多时候我们需要的可能只有寥寥几个，那这时候就需要按需引入了，下面用element-ui做例子演示按需引入。

安装插件 babel-plugin-component

.bablerc中配置

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": [
    "transform-vue-jsx", 
    "transform-runtime",
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

src文件夹下创建plugins文件夹，创建element-config.js，写入如下代码

import Vue from 'vue'
import {
  Button,
  Select,
  MessageBox
} from 'element-ui'
Vue.use(Button)
Vue.use(Select)
Vue.use(MessageBox)
// 动态按需加载
Vue.prototype.$alert = MessageBox.alert

然后在main.js中写入import './plugin/element-config'

4.productionGzip: true

在config的index.js中找到productionGzip:设置为true。注意压缩前需要安装依赖。具体操作参考https://www.cnblogs.com/qixidi/p/10390759.html

5.使用路由懒加载

https://www.jianshu.com/p/11c1d85ccd71

扫描二维码关注公众号，回复： 11140693 查看本文章

https://www.jeffjade.com/2017/08/06/124-webpack-packge-optimization-for-volume/

https://www.jianshu.com/p/171e8e529f35

https://blog.csdn.net/song_de/article/details/81511284