分类选择: 产品分类一 产品分类二 产品分类三 产品分类四 产品分类五
vue3.0项目构建优化与性能优化
作者:佚名    所属栏目:【产品分类二】    时间:2024-04-07

随着页面越来越多,项目体积越来越大。构建速度巨慢,项目打包时间完全可以嗑瓜子,打豆豆了。性能上加载速度也是很慢。。但是优化并不是一下可以优化到极致,而是从多个点,慢慢积累起来的!

DllReferencePlugin提供装置中,可以大幅度地提高编译时间性能的方式来分割包。

术语“ DLL”代表最初由Microsoft引入的动态链接库。? ? ? ? ? ?——摘自webpack官方文档

node_modules目录非常大,但又是不可缺少的,所以我们先从node_modules下手!把node_modules下面的第三方库提取出来!

1、项目根目录首先要创建一个webpack.dll.config.js的文件

2、在package.json下面的script添加

3、执行 会生成两个文件,不多赘述

4、在vue.config.js

`cnpm i?add-asset-html-webpack-plugin -D`
add-asset-html-webpack-plugin插件是把打包出来的dll.js引入到index.html中

5、执行 进行打包

时间上也比之前快了10S左右;

文件大小上如下图;

打包前:? ? ? ? ? ? ? ? ? ? ? ? ? ——————? ?打包后:

在压缩过程中对碎片化的冗余代码(如 console 语句、注释等)进行自动化删除;parallel使用多进程并行运行可提高构建速度,因此强烈建议使用,对文件体积,构建速度都有显著效果!

安装npm install uglifyjs-webpack-plugin --save-dev

在vue.config.js引入const UglifyJsPlugin=require('uglifyjs-webpack-plugin');


在项目中经常会使用到moment做一些时间处理,但是monment里面包含了很多语言包都会打进项目里面,导致了项目体积变大,构建速度减慢。可以使用webpack的

进行忽略掉,在vue.config.js里面添加:

如果需要某个语言包,引入就可以了


然后就可以了,时间对比如下,减少4s多;

体积对比如下:体积也有明显变化!

对一些打包的文件进行缓存,这样可以提高构建速度!效果也非常显著!

首先通过来安装插件;


这个配置比较简单,也可以参照官网进行配置;

网站首页 关于我们 耀世动态 耀世注册 耀世登录 联系我们

电话:400-123-4567      手机:13800000000
E-mail:admin@youweb.com      联系人:张生
地址:广东省广州市天河区88号

Copyright © 2012-2018 耀世娱乐-耀世注册登录官方入口 版权所有      琼ICP备xxxxxxxx号

扫一扫  关注微信

平台注册入口