vue项目webpack打包优化实践总结

最近在头疼vue项目打包的问题，看着辛辛苦苦写的项目写完后，打包到线上的用户体验很糟糕，实在是无地自容。后面接触了一些打包优化的方法，现在做一个开发总结，这个技术栈就是vue+element-ui+axios+echarts,使用webpack打包构建工具，算是一个经验笔记只谈，文章若有不足之处，还请各位大侠指点一二，我会尽快改正，谢谢!

目录

• 路由异步加载
• element组件优化
• webpack配置优化
• 项目依赖包统计分析
• 优化效果

路由异步加载

Vue项目的页面是使用的虚拟路由，页面内容是靠vue-router配置的路由链接来访问的，SPA单页面应用开发，适合开发后台系统，但是对搜索引擎不友好，因为最后只生成一个页面。

搜索引擎是靠页面的链接来爬取网页内容，然后搜录进去搜索引擎数据库的，而vue打包以后的项目只有一个页面，所以其中的内容搜索引擎蜘蛛当然无法收录，这是一个比较不好的地方，当然后期可以进行SEO优化。

所以当你的项目vue组件很多时候，打包以后的首屏渲染优化就是一个非常重要的问题，改善性能，提高加载打开速度，是很关键的一点。

下面，我就vue中的路由异步懒加载做一个方法分享,建议如果组件不是很多的项目不要使用这种方法，会增加加载时间和速度，对于组件很多的项目可以采用这种方法。

默认es6引入

但是这种方法组件多了，加载就会变慢，打包以后的app.js文件体积会变得非常大，后面使用比较常用的两种。

import example from '../components/example.vue'

vue官方推荐

使用import把组件分割成一个个小的单独的文件，缩小文件体积。webpackChunkName里面的就是这个组件/子组件的打包后的名字。

const example = () => import(/* webpackChunkName: "group-example" */ '../components/example.vue')

require方法

下面就是我比较喜欢的require方法，这个也是可以把组件分割成小的块。

const example = resolve => require(['../components/example.vue'], resolve);

element组件优化

由于是后台项目，所以选择element-ui框架进行后台系统搭建，所以对这个进行优化也可以减小体积，提高速度和减少加载时间，提高用户体验。

对这个框架的优化可以使用第三种方法，但是我还是比较喜欢这种方法，就是对组件不用全局引入，还是改成按需加载的比较好。

全局使用

• 全局引入和使用

import elementUI from 'element-ui'
Vue.use(elementUI)

这种方法对于只用少量element-ui组件的情况来说，很多组件都是多余的，会无形中加大加载时间和项目打包后的体积，所以使用下面这种按需引入的方法可以有效解决这个问题。

下面是演示代码：一般是表单和表格用的较多。

按需引入

// 按需引入
import