需求场景:公司业务展示官网开发,构建版本后在外网测试环境下,发下首屏加载损耗高达几十秒(服务器在国外,所以也导致加载时间变长),于是采用了以下方法来达到提速目的。
大厂面试题分享 面试题库
前后端面试题库 (面试必备) 推荐:★★★★★
地址:前端面试题库 web前端面试题库 VS java后端面试题库大全
问题攻克解决步骤如下:
-
采用懒加载的方式(官网有所提及,这里就不做详细描述)
-
webpack开启gzip压缩文件传输模式:
- gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩,可以减小60%以上的体积。 - webpack打包时借助 compression webpack plugin实现gzip压缩,安装插件如下:npm i -D compression-webpack-plugin - 在vue-cli 3.0 中,vue.config.js配置如下:
const CompressionPlugin = require('compression-webpack-plugin');//引入gzip压缩插件
module.exports = {
plugins:[
new CompressionPlugin({//gzip压缩配置
test:/.js$|.html$|.css/,//匹配文件名
threshold:10240,//对超过10kb的数据进行压缩
deleteOriginalAssets:false,//是否删除原文件
})
]
}
复制代码
- 服务器nginx开启gzip:
gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6; #压缩级别:1-10,数字越大压缩的越好,时间也越长
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_min_length 256; #gzip压缩最小文件大小,超出进行压缩(自行调节)
gzip_types text/plain text/css application/json application/x-javascript application/javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;预渲染
复制代码
3.依赖模块采用第三方cdn资源
- 在首页index.html中引入,如:
- 修改vue.config.js,关于externals配置请自行查阅相关资料。
module.exports = {
...
externals: {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT'
}
...
}
复制代码
- 修改 src/store/index.js
...
// 注释掉
// Vue.use(Vuex)
...
复制代码
- 修改 src/router/index.js
// import Vue from 'vue'
import VueRouter from 'vue-router'
// 注释掉
// Vue.use(VueRouter)
...
复制代码
- 修改 src/main.js
import Vue from 'vue'
import ELEMENT from 'element-ui'
import App from './App.vue'
import router from './router'
import store from './store'
import 'mint-ui/lib/style.css'
import echarts from 'echarts'
import download from './mixin/download'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import '@/static/css/reset.css'
import '@/static/css/font.css'
import '@/assets/fonts/font.css'
Vue.config.productionTip = false
Vue.use(ELEMENT)
router.afterEach(() => {
NProgress.done()
})
new Vue({
router,
store,
render: h => h(App),
// 添加mounted,不然不会执行预编译
mounted () {
document.dispatchEvent(new Event('render-event'))
}
}).$mount('#app')
这里element-ui变量名要用ELEMENT, 因为element-ui的umd模块名是ELEMENT
复制代码
4. 预渲染
- 用到的插件:prerender-spa-plugin
yarn add prerender-spa-plugin -D
or npm install prerender-spa-plugin --save-dev
复制代码
- vue.config.js中配置如下:
const PrerenderSpaPlugin = require('prerender-spa-plugin');
const Render = PrerenderSpaPlugin.PuppeteerRenderer;
const path = require('path');
configureWebpack: () => {
if (process.env.NODE_ENV !== 'production') return;
return {
plugins: [
new PrerenderSPAPlugin({
// 生成文件的路径,也可以与webpakc打包的一致。
// 下面这句话非常重要!!!
// 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。
staticDir: path.join(__dirname, 'dist'),
// 对应自己的路由文件,比如a有参数,就需要写成 /a/param1。
routes: ['/', '/Login', '/Home'],
// 这个很重要,如果没有配置这段,也不会进行预编译
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。
renderAfterDocumentEvent: 'render-event'
})
})
]
};
}
复制代码
- main.js中配置:
new Vue({
router,
store,
render: h => h(App),
// 添加mounted,不然不会执行预编译
mounted () {
document.dispatchEvent(new Event('render-event'))
### 文末
如果30岁以前,可以还不知道自己想去做什么的话,那30岁之后,真的觉得时间非常的宝贵,不能再浪费时间在一些碎片化的事情上,比如说看综艺,电视剧。一个人的黄金时间也就二,三十年,不能过得浑浑噩噩。所以花了基本上休息的时间,去不断的完善自己的知识体系,希望可以成为一个领域内的TOP。
同样是干到30岁,普通人写业务代码划水,榜样们深度学习拓宽视野晋升管理。
这也是为什么大家都说30岁是程序员的门槛,很多人迈不过去,其实各行各业都是这样都会有个坎,公司永远都缺的高级人才,只用这样才能在大风大浪过后,依然闪耀不被公司淘汰不被社会淘汰。
**269页《前端大厂面试宝典》**
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。
![](https://img-blog.csdnimg.cn/img_convert/b98713ee557d94286de8afe404cb51d1.png)
**前端面试题汇总**
![](https://img-blog.csdnimg.cn/img_convert/1d691ca297c9016828aff783a701e065.png)
**JavaScript**
![](https://img-blog.csdnimg.cn/img_convert/a489904576da281d07092f043566f6dd.png)