分析工具
Coverage：查看代码的使用状况
移除死代码
懒加载代码
webpack-bundle-analyzer：查看资源树
productionSourceMap:false
关闭Prefetch
element-ui组件按需加载\

分析工具

Coverage 是chrome开发者工具的一个新功能，从字面意思上可以知道它是可以用来检测代码在网站运行时有哪些js和css是已经在运行，而哪些js和css是还没有用到的

移除死代码

以 Coverage 数据为参考，我们能了解页面重无用代码的比例到底有多大。现实世界中，很多工程师可能是在遗留代码库上工作，并且遗留代码库存在的时间还很长，那么很可能这个代码库中存在大量的无用代码，但是谁也不敢删除他们，因为 JS 这门语言的动态性，你不能粗暴的把哪些看起来“没有被使用”的代码直接删掉，除非你很清楚所有的代码执行路径，很显然这对于大型应用或者遗留代码库来说是不现实的。
怎么移除死代码呢？我们可以依赖打包工具，比如 UglifyJS 在压缩代码时支持直接删除死代码的配置项。而 Webpack 2 中引入了 Tree Shaking 的特性，能够自动把项目中没有用到的代码从打包中去掉，但是这种优化仅限于被 export 的代码。总而言之，死代码要尽可能想办法去掉，Coverage 工具能提供一个判断基准。

懒加载代码

如果能删的死代码都删了，但是 Coverage 数据还是居高不下，那么你应该换个角度思考。就像前文所说，JS 是动态语言，可能部分代码在页面加载时并没有用到，但是用户后来的操作会触发这些代码的执行，为什么不让这些代码在需要的时候再加载呢？聪明的你可能已经想到了，这就是懒加载的技术。
使用 Webpack 打包且没有对配置做特别调优的话，它默认会把所有依赖打包成一个巨大的文件，很容易出现首次加载覆盖率很低的情况，在 Webpack 中实现懒加载可以参考 Code Splitting 和 bundle-loader，具体的配置细节这里不展开讲。使用懒加载之后可以极大的减少页面初次下载的代码，从而提高性能。需要注意的是，懒加载优化需要在模块数量和模块大小之间把握一个平衡，否则过多的模块懒加载反而对性能不利，因为每个 HTTP 请求也是有额外开销的。

webpack-bundle-analyzer：查看资源树

安装： cnpm i webpack-bundle-analyzer yarn add webpack-bundle-analyzer

在vue.config.js中添加分析工具的配置

module.exports = {
  chainWebpack: (config) => { if(process.env.NODE_ENV === 'production') {config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
       .end()
    config.plugins.delete('prefetch')
   } else{
   }
  }
}

运行代码 npm run build --report 会在浏览器打开一个项目打包的情况图，便于直观地比较各个bundle文件的大小。

瘦身开始

修改vue.config.js中的配置

module.exports = {
outputDir: ${srcFile},
productionSourceMap: false
}

关闭Prefetch

element-ui组件按需加载

import ElementUI from element-ui

Vue.use(ElementUI)

按需引入 借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。　

安装 npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

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

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容

import Vue from 'vue';


import { Button, Select } from 'element-ui';

import App from './App.vue';

Vue.component(Button.name, Button);

Vue.component(Select.name, Select);

new Vue({

el: '#app',

render: h => h(App)

});

注意：有一些组件的引入方式有所不同，具体的参照element官网介绍。

Vue.prototype.$alert = MessageBox.alert;

Vue.prototype.$confirm = MessageBox.confirm;

vue打包与使用