这两年，HTML5技术广泛应用,H5前端开发成为了新网红，资深前端架构师，特此写了这篇适用于零基础小白学习H5前端的技术文章，让你只用5个步骤，轻松掌握前端技术干货！
Webpack打包vue项目优化 一、路由异步加载 Vue项目的页面是使用的虚拟路由，页面内容是靠vue-router配置的路由链接来访问的，SPA单页面应用开发，适合开发后台系统，但是对搜索引擎不友好，因为最后只生成一个页面。 搜索引擎是靠页面的链接来爬取网页内容，然后搜录进去搜索引擎数据库的，而vue打包以后的项目只有一个页面，所以其中的内容搜索引擎蜘蛛当然无法收录，这是一个比较不好的地方，当然后期可以进行SEO优化。 所以当你的项目vue组件很多时候，打包以后的首屏渲染优化就是一个非常重要的问题，改善性能，提高加载打开速度，是很关键的一点。 下面，我就vue中的路由异步懒加载做一个方法分享,建议如果组件不是很多的项目不要使用这种方法，会增加加载时间和速度，对于组件很多的项目可以采用这种方法。 二、组件优化 由于是后台项目，所以选择element-ui框架进行后台系统搭建，所以对这个进行优化也可以减小体积，提高速度和减少加载时间，提高用户体验。 三、全局使用 全局引入和使用 import elementUI from 'element-ui' Vue.use(elementUI) 这种方法对于只用少量element-ui组件的情况来说，很多组件都是多余的，会无形中加大加载时间和项目打包后的体积，所以使用下面这种按需引入的方法可以有效解决这个问题。 按需引入 // 按需引入 import { Form, Button, Table, } from 'element-ui'
// 按需使用 Vue.use(Form) Vue.use(Button) Vue.use(Table) 复制代码 还要一些加载和消息提示等的组件，以下写法： // 按需引入 import { Loading, Message, MessageBox, Notification, } from 'element-ui'
// 按需使用 Vue.use(Loading.directive) // 挂载到vue实例上面 Vue.prototype.$loading = Loading.service Vue.prototype.$msgbox = MessageBox Vue.prototype.$confirm = MessageBox.confirm Vue.prototype.$alert = MessageBox.alert Vue.prototype.$prompt = MessageBox.prompt Vue.prototype.$message = Message Vue.prototype.$notify = Notification, 使用通知组件可以，这么调用也可以，Notification(options),或者Notification.success(options)。
四、webpack配置优化 依赖包体积优化 众所周知，日常开发过程中，前端这块早就已经开始进行工程化和组件化开发了，所以免不了下载各种node包，使得打包后的体积也是非常的庞大，下面使用webpack的一个配置外部扩展就可以解决这类问题。 五、Gzip压缩和sourceMap优化 这个也是压缩文件的一个方法，线上服务器的nginx也开启gzip功能更好；取消资源地图，可以有效保护源码。 在webpack的build文件中，开启Gzip压缩功能和禁用资源地图。 module.exports = { // ... build: { productionSourceMap: false, productionGzip: true, } } 这样做的话，打包以后就不会再有sourceMap文件了，也会多了几个以.js.gz后缀名的文件。 （本文由源码时代老师原创发布，转载请注明出处。）
