Vue项目优化首页加载速度

一、路由懒加载

代码语言：javascript复制

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

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

二、使用CDN引入

代码语言：javascript复制

<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

代码语言：javascript复制

//比如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中

代码语言：javascript复制

    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 = { } 中添加

代码语言：javascript复制

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

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

三、压缩文件

代码语言：javascript复制

添加依赖：npm install --save-dev compression-webpack-plugin

代码语言：javascript复制

module.exports = {
    publicPath: './', // 设置打包文件相对路径
    lintOnSave: false,   // 取消 eslint 验证
    productionSourceMap: false, //取消.map文件产生
    productionGzip: true, //开启压缩
    productionGzipExtensions: ['js', 'css'],//压缩类型
    //其它
}

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

如果报错：

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

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

代码语言：javascript复制

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

改成

代码语言：javascript复制

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

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

代码语言：javascript复制

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

node.js javascript cdn

0 人点赞