源码时代前端干货 | Webpack打包vue项目优化，让你工作效率提高10倍！

一时失言乱红尘 2021-10-29 14:18 327阅读 0赞

这两年，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后缀名的文件。

（本文由源码时代老师原创发布，转载请注明出处。）

发表评论取消回复

表情：

评论列表（有 0 条评论，327人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 项目打包优化 webpack 3.0+

　配置优化　隐藏源码　　在 config 文件夹下index.js 中 build 　　　`productionSourceMap: true `改为 ...

亦凉/ 2024年04月20日 09:49/ 0 赞/ 96 阅读

相关源码时代Java干货分享|vue 指令基本使用大全，学完让你的工作效率提升百倍！

令是一个带有v-前缀的特殊标签属性, 指令属性的值预期是单个JavaScript表达式. <table style="margin-left:-4.35pt;width...

た入场券/ 2024年04月17日 19:11/ 0 赞/ 34 阅读

相关掌握Vue生命周期，让你的前端开发效率翻倍！

1 Vue实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

左手的ㄟ右手/ 2024年03月16日 16:46/ 0 赞/ 68 阅读

相关【chatGPT】让java程序员工作效率翻10倍技巧

本来写给我自己用来着, 想着以后忘记了就分享出来 1.写枚举对于程序员来说枚举的命名需要大写并且写枚举也是被迫的(大部分人的感受都一样啊喂) 所以可以直接用chatgp

╰+哭是因爲堅強的太久メ/ 2023年10月13日 14:41/ 0 赞/ 39 阅读

相关瞬间让你效率提高一倍的高效学习方法

> 方法不对，努力白费；方法对了，事半功倍！在学习的过程中我们会遇到各种困难与阻碍，如何发现并优化自己的学习方法就变得尤为重要。高效学习方法是指通过科学的、有效的方法来提高学习

今天药忘吃喽~/ 2023年10月09日 18:19/ 0 赞/ 15 阅读

相关源码时代WEB前端干货分享|带你领略vue不一样的风情

最近几年，WEB前端越来越火，也诞生了非常多功能强大的框架，vue便是最近炙手可热的一个框架，不仅简单快速上手快，而且功能非常丰富，能完成各种常用项目！但是，很多coder

╰+哭是因爲堅強的太久メ/ 2023年05月30日 08:46/ 0 赞/ 20 阅读

相关 IntelliJ IDEA高效使用教程，让你的工作效率提升10倍！

点击关注公众号，利用碎片时间学习![96e018cdf2cf8f996d4391ef4389a589.png][] 安装好 Intellij idea 之后，进行如下的初始化

我会带着你远行/ 2022年09月04日 09:59/ 0 赞/ 326 阅读

相关 Vue项目Webpack优化实践，构建效率提高50%

是对Webpack构建进行优化变得刻不容缓。经过不断的摸索和实践，通过以下方法优化后，项目的构建速度提高了50%。现将相关优化方法进行总结分享。 1、缩小文件的搜索

灰太狼/ 2022年04月02日 15:14/ 0 赞/ 361 阅读

相关掌握这些PPT技巧，让你的工作效率提高10倍

　　大家平时在办公中是不是经常听到有很多同事说PPT很难绘制呢？熟练的人们只要花一个小时就可以将一份精美的PPT就绘制好了，而我们要花费一上午甚至一天才能将其绘制好，做的慢就算

你的名字/ 2022年01月17日 13:51/ 0 赞/ 377 阅读

相关源码时代前端干货 | Webpack打包vue项目优化，让你工作效率提高10倍！

这两年，HTML5技术广泛应用,H5前端开发成为了新网红，资深前端架构师，特此写了这篇适用于零基础小白学习H5前端的技术文章，让你只用5个步骤，轻松掌握前端技术干货！

一时失言乱红尘/ 2021年10月29日 14:18/ 0 赞/ 328 阅读