vuecli3项目首页加载速度优化

npm i -D compression-webpack-plugin

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: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"windows.jQuery":"jquery"
}),
new CompressionPlugin({//gzip压缩配置
test:/\.js$|\.html$|\.css/,//匹配文件名
threshold:10240,//对超过10kb的数据进行压缩
deleteOriginalAssets:false,//是否删除原文件
})
]
},
};

import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
export default new Router({
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‘)
},

]
}
]
});