Vue项目优化首页加载速度

一、路由懒加载

{
    path: '/index',
    component: () => import('@/views/index'), //懒加载-访问该页面才加载
 }

这一步之后,打包后会发现很大的chunk-vendors.xxxxxxx.js不见了,其实是分成了不同的js文件

二、使用CDN引入

<script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>

在index.hrml里引入
可使用异步加载——async和defer、动态脚本创建

1、async方式
async属性是HTML5新增属性,兼容Chrome、FireFox、IE9+
async属性主要是为了不让页面停下来等待脚本的下载,也就是说async可以在页面渲染的同时在后台下载脚本。
多个异步脚本的话就是谁先下载完谁先执行,不一定会按照顺序执行了,在异步加载的时候建议不要修改DOM

//比如echarts的CDN
<script async  src="https://cdn.bootcdn.net/ajax/libs/echarts/2.1.10/echarts.js"></script>

2、defer方式
defer属性规定是否对脚本执行进行延迟,直到页面加载为止;兼容所有浏览器
如果是多个脚本,该方法可以确保所有设置了defer属性的脚本按顺序执行
如果脚本不改变文档的内容,可将defer属性加入到script标签中,以便加快处理文档的速度
简单点就是:延迟到页面解析完毕之后再执行

3、动态创建script标签(基本不用啦)
在还没定义defer和async前,异步加载的方式是动态创建script,通过window.onload方法确保页面加载完毕再将script标签插入到DOM中

    function addScriptTag(src){
	    var script = document.createElement('script');
	    script.setAttribute("type","text/javascript");
	    script.src = src;
	    document.body.appendChild(script);
    }
    window.onload = function(){
    	addScriptTag("js/index.js");
    } 

找到vue.conf.js文件,在 module.exports = { } 中添加

configureWebpack: {
externals: { //不打包
    'vue': 'Vue',//对应CDN引入模块
 },
}

通过CDN引入后要在main.js里注释掉对应的导入喔

三、压缩文件

添加依赖:npm install --save-dev compression-webpack-plugin
module.exports = {
    publicPath: './', // 设置打包文件相对路径
    lintOnSave: false,   // 取消 eslint 验证
    productionSourceMap: false, //取消.map文件产生
    productionGzip: true, //开启压缩
    productionGzipExtensions: ['js', 'css'],//压缩类型
    //其它
}

20201022103638960-1-1

 

npm run build
这时候会同时产生一个同名的.gz文件;就说明成功了

992-300x123-1-1

 

 

 

 

 

如果报错:

ValidationError: Compression Plugin Invalid Options
options should NOT have additional properties

这是版本问题,在项目package.json里将

 "compression-webpack-plugin": "^xxxx",

改成

"compression-webpack-plugin": "^1.1.11",

还差一步!
服务器Nginx启用gzip
在conf里面

gzip on;//动态压缩
gzip_static on;//读取已压缩
gzip_min_length 1k;
gzip_buffers 4 32k;
gzip_http_version 1.1;
gzip_comp_level 2;
gzip_types text/plain application/x-javascript application/javascript text/javascript text/css application/xml;
gzip_vary on;
gzip_disable "MSIE [1-6].";

然后reload一下nginx

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:青梅博客 » Vue项目优化首页加载速度

分享到: 更多 (0)
avatar

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活