一、路由懒加载
代码语言：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-pluginmodule.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
