今天打算上线vue的单页面项目，上线后，首页加载速度巨慢！
原因是项目上线后，网速不够快，加载js，css等资源很慢，
打开打包好的文件发现chunk-vendors.xxxxxxx.js的包很大，达到了4千多kb，简直不能忍！(vendors的文件是项目中引入的第三方库，打包好的文件)
网上查了查，有很多优化方法，我从简单的开始吧
我选择的第一个优化方式是，给webpack开启gzip压缩，能够将文件体积减少60%。
下面来说一下开启gzip压缩的具体步骤
npm i -D compression-webpack-plugin
在vue cli3.0 生成的项目里，可在 vue.config.js 中按照如下方式进行配置：
const path = require("path");
const CompressionPlugin= require('compression-webpack-plugin');//引入gzip压缩插件
const webpack= require("webpack");//vue.config.js
module.exports ={//基本路径(相对于服务器根目录 静态资源的相对路径)
publicPath: process.env.NODE_ENV === "production" ? "/dist/" : "/", //font scss资源路径 不同环境切换控制
productionSourceMap:false,//打包时不要map文件
//输出文件目录
outputDir: "dist",//是否在保存的时候检查
lintOnSave: true,//放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
assetsDir: 'statick',
devServer: {//host: 'localhost',
//host: "0.0.0.0",
//https: false, // https:{type:Boolean}
//open: true, //配置自动启动浏览器 http://172.16.1.12:7071/rest/mcdPhoneBar/
//hotOnly: true, // 热更新
port: 8090
//proxy:{
//'/': {
//target: 'http://192.168.0.125:3000/',
//changeOrigin: true,
//pathRewrite: {}
//},
},
configureWebpack: {//引入jquery
plugins: [newwebpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery","windows.jQuery":"jquery"}),new CompressionPlugin({//gzip压缩配置
test:/\.js$|\.html$|\.css/,//匹配文件名
threshold:10240,//对超过10kb的数据进行压缩
deleteOriginalAssets:false,//是否删除原文件})
]
},
};
一般浏览器都已支持.gz的资源文件，在http请求的Request Headers 中能看到 Accept-Encoding:gzip
要使服务器返回.gz文件，还需要对服务器进行配置，根据Request Headers的Accept-Encoding标签进行鉴别，如果支持gzip就返回.gz文件。over
下面开启第二种优化方式(路由懒加载)
有三种方式，我采用import的方式
router.js中
import Vue from "vue";
import Router from"vue-router";
Vue.use(Router);
exportdefault newRouter({
mode:"history",
base: process.env.BASE_URL,
routes: [
{
path:"/",
name:"index",
component: ()=>import(/*webpackChunkName: "index"*/ "./pages/index.vue"),
children:[
{
path:'/',
name:'com1',
component:()=>
import(/* webpackChunkName: "com1" */ './components/com1.vue'),//像这样的 前面的注释内容是有用的，可以指定chunk的名字
},
{
path:'com2',
name:'com2',
component:()=>import(/*webpackChunkName: "com2"*/ './components/com2.vue')
},
]
}
]
});
下面开启CDN加速(vue,vue-router,vueX,axios,jquery，bootstrap,element-ui)
在index.html中的body中引入jquery，和bootstarp，并将main.js中import引入的bootstrap的js和css都注释掉
我的项目里还用了adminlte的库所以我把这个库也用cdn加速了，把index.html的代码帖出来， main.js中之前import引入的几乎都注释完了，就不帖了
favicon.ico">
adminlteandvue
We're sorry but adminlteandvue doesn't work properly without JavaScript enabled. Please enable it to continue.
转播
