前端架构师必备之Vue项目打包优化

前几天听老师讲过前端架构师必备之Vue项目打包优化的课之后，有感而发利用空闲时间写了一下。

大佬路过请留步知道一下，

使用vue-cli部署生产包时，发现资源包很大，打包后的vendor.js达到了1.4M，这已经很大了，而且会影响到首屏加载。那么，怎么优化呢？

1.组件按需加载

这是首先可以优化的点。如果频繁使用了第三方组件/UI库，如我的项目中经常同时使用了 element-ui, mint-ui,echarts等组件库，如果全部引入，项目体积非常大，这时可以按需引入组件。

示例如下：

1.1 element-ui

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将.babelrc 修改为：

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

然后引入部分组件，这样一来，就不需要引入样式了，插件会帮我们处理。

?

// main.js
import Vue from ‘vue’
import { Dialog, Loading } from ‘element-ui’

Vue.use(Dialog)
Vue.use