12
这个博客系统首次访问加载慢，也不是一天两天了，今天想起来就打算优化一下。几番查找之下，发现问题在于“chunk-vendors.fb88d851.js”文件。只有等这个文件加载完，页面才开始渲染，所以导致页面访问时，白屏二十几秒甚至三十几秒~（简直就是令人崩溃~~~）。
白屏的原因：
VUE等主流的单页面框架都是js渲染html body，所以必须等到vendor.js和app.css加载完成后，完整的界面才会显示。
解决方案：
1、路由懒加载
// import Home from '../views/Home.vue'
// import Index from '../views/index.vue'
// import Link from '../views/link.vue'
// import Message from '../views/message.vue'
// import About from '../views/about_me.vue'
// 通过下方的方式引入组件（异步导入）
const Home = () => import('@/views/Home.vue')
const Index = () => import('@/views/index.vue')
const Link = () => import('@/views/link.vue')
const Message = () => import('@/views/message.vue')
const About = () => import('@/views/about_me.vue')
const ArticleDetail = () => import('@/views/article_detail.vue')
const TimeLine = () => import('@/views/time_line.vue')
const Project = () => import('@/views/project.vue')
2、gzip打包压缩
安装 compression-webpack-plugin：
npm install compression-webpack-plugin --save-dev
3、vue.config.js配置
const CompressionPlugin = require('compression-webpack-plugin') // 引入gzip压缩插件
module.exports = {
// 没有书写outputDir属性 默认'dist' 对应dev.assetsSubDirectory.
assetsDir: 'static',
productionSourceMap: false,
// productionGzip: true,
// productionGzipExtensions: ['js', 'css'],
chainWebpack: config => {
// 移除 prefetch 插件
config.plugins.delete('prefetch')
},
configureWebpack: config => {
// npm install terser-webpack-plugin -D， 去掉console
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
return {
plugins: [
new CompressionPlugin({
test: /\.js$|\.html$|\.css/,
threshold: 10240,
deleteOriginalAssets: false
})
],
externals: {
vue: 'Vue',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT',
axios: 'axios',
'highlight.js': 'hljs',
'vue-bus': 'VueBus',
nprogress: 'NProgress'
}
}
}
}
4、index.html引入cdn
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 引入样式 -->
<link href="https://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/iview/3.5.4/styles/iview.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/atom-one-light.min.css">
<link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-bus/dist/vue-bus.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.13.0/index.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script>
</body>
</html>
5、nginx配置
#开启gzip模式
gzip on;
#gizp压缩起点，文件大于1k才进行压缩
gzip_min_length 1k;
# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_comp_level 9;
# 进行压缩的文件类型。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript ;
#nginx对于静态文件的处理模块，开启后会寻找以.gz结尾的文件，直接返回，不会占用cpu进行压缩，如果找不到则不进行压缩
gzip_static on;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;
# 设置压缩所需要的缓冲区大小，以4k为单位，如果文件为7k则申请2*4k的缓冲区
gzip_buffers 2 4k;