让每一名学员高薪就业
返回列表 发新帖

Webpack打包vue项目优化

[复制链接]

147

主题

301

帖子

2755

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2755

版主

发表于 2019-8-7 15:17:53  | 显示全部楼层 | 阅读模式

路由异步加载
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.serviceVue.prototype.$msgbox = MessageBoxVue.prototype.$confirm = MessageBox.confirmVue.prototype.$alert = MessageBox.alertVue.prototype.$prompt = MessageBox.promptVue.prototype.$message = MessageVue.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后缀名的文件



回复

使用道具 举报

0

主题

10

帖子

1

积分

菜鸟

Rank: 1

积分
1
发表于 2019-8-7 15:20:45  | 显示全部楼层
老师们都好严格
回复 支持 反对

使用道具 举报

0

主题

7

帖子

4

积分

菜鸟

Rank: 1

积分
4
发表于 2019-8-7 15:43:02  | 显示全部楼层
来源码培训的学费是多少
回复 支持 反对

使用道具 举报

0

主题

10

帖子

11

积分

菜鸟

Rank: 1

积分
11
发表于 2019-8-7 15:53:59  | 显示全部楼层
发帖子的老师怎么联系
回复 支持 反对

使用道具 举报

0

主题

2

帖子

7

积分

菜鸟

Rank: 1

积分
7
发表于 2019-8-7 15:59:31  | 显示全部楼层
来源码培训的学费是多少
回复 支持 反对

使用道具 举报

0

主题

7

帖子

5

积分

菜鸟

Rank: 1

积分
5
发表于 2019-8-7 16:08:31  | 显示全部楼层
我想要源码的纪念品
回复 支持 反对

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Java培训  |   PHP培训  |   UI培训  |   H5培训  |   Python培训  |   大数据培训  |   如何报名  |   视频下载
快速回复 返回顶部 返回列表