vue优化白屏即首次加载时间,针对vue2+webpack
aiqqvb
帮助1人
webpack与vue有关配置
1 打包分析插件-webpack-bundle-analyzer
安装
npm i webpack-bundle-analyzer -D
配置
在对应的webpack配置文件(webpack.prod.conf.js)中添加此插件
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
运行
npm run build
2 cdn引入部分第三方包
根据BundleAnalyzerPlugin插件分析，我们可以选择一些npm包进行cdn引入来减小打包体积从而提升加载速度
webpack配置
在对应的webpack配置文件(webpack.base.conf.js)的module.exports 中的externals添加要忽略的包
例如：
module.exports = {
externals: {
'BMap': 'BMap',
'vue': 'Vue',
'vue-router': 'VueRouter',
'axios': 'axios',
'vant': 'vant',
'mockjs': 'mockjs',
'vue-awesome-swiper':'VueAwesomeSwiper'
},
}
//key值为npm包名,value值为cdn的js文件中export的名称（需要阅读js文件获得**这个一定要注意）
//有时候会报错，是因为cdn引入的包有依赖关系，比如vue-router必须依赖vue，所以要先加载vue才可以
index.html引入CDN
在index.html文件的head中引入有关js文件,不影响进度的js或css文件可以放入body中，不阻塞html展示
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.4/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.5.4/vue-router.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.4/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vant/2.12.48/vant.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.14.7/vconsole.min.js"></script>
</head>
vue与js文件修改
- import有关CDN代码需要注释,例如vueRouter: // import Router from “vue-router”;
- 引入代码需要修改，例如vueRouter:const Router=VueRouter
注意：不同包要修改的方式不同，需要研究后再修改，例如vant，vue.use(vant.button)等
3路由懒加载
修改router文件中的引入方式
const noticeDetail =()=>import("../pages/home/noticeDetail.vue");
export default new Router({
mode: "history",
// base: "/home/",
base: process.env.BASE_URL,
routes: [
{
name: "noticeDetail",
component: noticeDetail,
path: "/home/noticeDetail"
},
]
});
webpack配置需要注意的点
optimization的splitChunks配置
一定要注意splitChunks.chunks当前配置了什么，如果需要懒加载不配置splitChunks.chunks即可
此处可将一些较大的共用的包单独分离出来
optimization: {
splitChunks: {
// chunks: 'all',
// maxInitialRequests:4,
cacheGroups: {
public: {
chunks: 'initial',
name: 'vue-public-componentjs',
test: /[\\/]src[\\/]_?components(.*)/,
enforce: true,
priority: 20
},
vendor: {
chunks: 'initial',
test: /node_modules/,
name: 'vendor', // 使用 vendor 入口作为公共部分
// enforce: true,
priority: 10
},
manifest: {
name: 'manifest',
minChunks: Infinity
}
}
}
}
html-webpack-plugin插件
安装(注意版本,本项目中^3.2.0)
npm i html-webpack-plugin
此处有chunks与excludeChunks需要注意，chunks如果配置了，路由懒加载将会失效，所以不宜配置chunks
mini-css-extract-plugin插件
安装
npm i mini-css-extract-plugin
将js中的css文件分离出来
plugins: [
new MiniCssExtractPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
// allChunks: true,
}),
]
4 gzip压缩
webpack
compression-webpack-plugin
参考
用于生成gz包
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
filename:'[path][base].gz[query]',
algorithm: 'gzip',
test: new RegExp(/\.(js|css|json|html)(\?.*)?$/i),
threshold: 102400,
minRatio: 0.8
})
)
}
服务端（Nginx等）
需要开启gzip
mino CONSOLE
如果使用了mino需要开启压缩，配置详解
5 加载中的提示
inde.html页面
<style>
#skt-loading {
position: fixed;
top: 50%;
left: 50%;
width: 70px;
height: 70px;
transform: translate(-50%, -100%);
-webkit-transform: translate(-50%, -100%);
-moz-transform: translate(-50%, -100%);
-ms-transform: translate(-50%, -100%);
}
#skt-loading .loader-ring-light {
width: 70px;
height: 70px;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
-moz-box-shadow: 0 4px 0 rgb(166, 166, 166) inset;
-webkit-box-shadow: 0 4px 0 rgb(166, 166, 166) inset;
box-shadow: 0 4px 0 rgb(166, 166, 166) inset;
animation: rotate-360 2s linear infinite;
}
#skt-loading .loader-ring-track {
position: absolute;
top: 0;
left: 0;
width: 70px;
height: 70px;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
-moz-box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.05) inset;
-webkit-box-shadow: 0 0 10px 4px rgb(0 0 0 / 5%) inset;
box-shadow: 0 0 10px 4px rgb(0 0 0 / 5%) inset;
}
#skt-loading .loader-ring-text{
position: absolute;
top: 40%;
width: 100%;
color: rgb(166, 166, 166);
font-size: 12px;
text-align: center;
}
@-webkit-keyframes rotate-360 {
0% {
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate-360 {
0% {
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
<body>
<div id="app"></div>
<div id="skt-loading" class="loader-ring">
<div class="loader-ring-light"></div>
<div class="loader-ring-track"></div>
<div class="loader-ring-text">加载中...</div>
</div>
</body>
<script>
document.onreadystatechange = function() {//当页面加载状态改变的时候执行function
if(document.readyState == "complete")
{ //当页面加载状态为完全结束时进入
var $sktmain = document.getElementById('skt-loading');
if ($sktmain) {
$sktmain.remove();
}
}
}
</script>
至此，原本需要7-8秒才可以加载出来的页面，只需要0-1秒就可以加载出来（此次研究断断续续有两周的时间）
tips:诚然，项目代码中也有很多细节需要优化的地方，不同的项目需要进行不同的优化。不在此赘述
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhiackeh
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
excel打印预览压线压字怎么办
PHP中文网 06-22
