今天打算上線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') }, ] } ] });
下面開啟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引入的幾乎都注釋完了，就不帖了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css"> <link href="https://cdn.bootcss.com/admin-lte/2.4.10/css/skins/_all-skins.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/admin-lte/2.4.10/css/AdminLTE.min.css" rel="stylesheet"> <title>adminlteandvue</title> </head> <body> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script> <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.3/vue-router.min.js"></script> <script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script> <script src="https://cdn.bootcss.com/admin-lte/2.4.10/js/adminlte.min.js"></script> <noscript> <strong>We're sorry but adminlteandvue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
！！！
示例：
通常我們需要優化加載速度的時候，在眾多的優化當中，可以使用link代替import，避免過多的import讓加載變慢。那在vue里面應該怎么優化尼。國內的CDN服務推薦使用 BootCDN，國外還是不要用了.......
運用了webpack4的話是默認有分包的功能的，如果之前下載了那些插件，必須要先把它卸載了
首先在index.html里面把所需要的資源先寫出來，如：
<head> <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css"> </head> <body> <div id="app"></div> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script> <script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script> <script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script> <!-- built files will be auto injected --> </body>
在vue.config.js里面加上
module.exports = { ··· ··· configureWebpack: { resolve: { extensions: ['.js', '.json', '.vue', '.scss', '.css'], alias: { ··· }, }, externals: { 'vue': 'Vue', 'vuex': 'Vuex', 'vue-router': 'VueRouter', 'element-ui': 'ELEMENT', 'Axios':'axios' } },
然后修改src/router/index.js
// 注釋掉 // import Vue from 'vue' import VueRouter from 'vue-router' // 注釋掉 // Vue.use(Router) ...
修改 src/store/index.js
... // 注釋掉 // Vue.use(Vuex) ...
最后修改 src/main.js
import Vue from 'vue' import App from './App' import router from './router' import store from './store' import ELEMENT from 'element-ui' Vue.use(ELEMENT) import axios from 'Axios' Vue.prototype.$axios= axios /* eslint-disable no-new */ new Vue({ el: '#app', router: router, store: store, render: h => h(App) })
注意，這里 element-ui 變量名要使用 ELEMENT，因為element-ui的 umd 模塊名是 ELEMENT
進一步優化首頁加載，可以考慮延遲加載，首屏不需要展示的不急加載：
參考webpack官網：https://webpack.js.org/guides/lazy-loading/#root
。