使用vue构建项目首屏加载时，出现加载慢，白屏的问题解决方案：
步骤一 webpack来打包vue项目，vendor.js过大问题解决
- 1.造成过大的原因是因为在main.js导入第三库太多时,webpack合并js时生成了vendor.js(我们习惯把第三方库放在vendor里面)造成的.如下图在main.js引用了一些第三方库。导致了你的服务器端的js文件越大则用户加载页面的时间会越长(因为所需下载js的时间越久)
首先在index.html中，使用CDN的资源，复制以下bootstrap的链接资源：
<body>
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="https://unpkg.com/vue-awesome-swiper@2.6.7/dist/vue-awesome-swiper.js"></script>
</body>
- 2.在bulid/webpack.base.conf.js文件中，添加externals，导入index.html下所需的资源模块：
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: ['babel-polyfill', 'lib-flexible', './src/main.js']
},
externals: { // <-添加
vue: 'Vue',
vuex: 'Vuex',
'vue-router': 'VueRouter',
VueAwesomeSwiper: 'VueAwesomeSwiper'
},
- 3.在main.js里将以下 import 注释 替换 require 引入模块
// import Vue from 'vue'
// import VueAwesomeSwiper from 'vue-awesome-swiper'
const Vue = require('vue')
const VueAwesomeSwiper = require('VueAwesomeSwiper')
Vue.use(VueAwesomeSwiper)
- 4.当然可以在生产环境当中删除掉不必要的console.log
打开build/webpack.prod.conf.js 在plugins里添加以下代码
plugins: [
new webpack.optimize.UglifyJsPlugin({ //添加-删除console.log
compress: {
warnings: false,
drop_debugger: true,
drop_console: true
},
sourceMap: true
}),
-
5.执行npm run build
在控制台当中可以看到文件压缩的记录
static/js/vendor.50304a716a06fb947df7.js 的size
我这里一开始有450k 当优化完以后整整小了一半多 222kB（当你用了一些ui组件库替换成cdn说不定更大的惊喜）
sizexiao.png
-
6.最后可以通过打开项目测试在首屏加载时有着明显的打开提速效果！
步骤二 vue-cli开启打包压缩 和后台配合 gzip访问
- 1.首先打开 config/index.js ，找到 build 对象中的 productionGzip ，改成 true
- 打开 productionGzip: true 之前，先要安装依赖 compression-webpack-plugin ，官方推荐的命令是：
npm install --save-dev compression-webpack-plugin
//(此处有坑) 如果打包报错，应该是版本问题 ，先卸载之前安装的此插件 ，然后安装低版本
npm install --save-dev compression-webpack-plugin@1.1.11
- 3.等安装好了，重新打包 npm run build ，此时打包的文件会 新增 .gz 文件。是不是比原来的js文件小很多呢，之后项目访问的文件就是这个.gz文件
- 4.后台nginx开启gzip模式访问，浏览器访问项目，自动会找到 .gz 的文件。加载速度明显提高。
开启 nginx gzip ,在 nginx.conf 配置文件中 配置
http { //在 http中配置如下代码，
gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 8; #压缩级别
gzip_buffers 16 8k;
#gzip_http_version 1.1;
gzip_min_length 100; #不压缩临界值
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
}
保存退出 ，并 重启 nginx
systemctl reload nginx.service
systemctl restart nginx.service
- 5 测试访问
curl -I -H "Accept-Encoding: gzip, deflate" "http://xxx.com" //访问请求中 Content-Encoding: gzip 表示 压缩成功页面，
同理 访问js，css等 可测试 是否压缩成功.
- 6 最后访问项目，进入首页的时候加载速度会有所提升
网友评论