今天打算上线vue的单页面项目,上线后,首页加载速度巨慢!
原因是项目上线后,网速不够快,加载js,css等资源很慢,
打开打包好的文件发现chunk-vendors.xxxxxxx.js的包很大,达到了4千多kb,简直不能忍!(vendors的文件是项目中引入的第三方库,打包好的文件)
网上查了查,有很多优化方法,我从简单的开始吧
我选择的第一个优化方式是,给webpack开启gzip压缩,能够将文件体积减少60%。
下面来说一下开启gzip压缩的具体步骤
1:引入 compression webpack plugin 插件
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: [ new webpack.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); 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') }, ] } ] });