Web前端最全vue 首页加载，速度优化及解决首页白屏问题_vue进入加载的首页，全网最全

最新推荐文章于 2025-06-17 16:37:03 发布

2401_84616922

最新推荐文章于 2025-06-17 16:37:03 发布

阅读量1.8k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：程序员文章标签：前端 vue.js javascript

本文链接：https://blog.youkuaiyun.com/2401_84616922/article/details/138587130

程序员专栏收录该内容

105 篇文章

订阅专栏

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。
只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。

并祝愿大家在新的一年找工作面试中胆大心细，发挥出最好的水平，找到一份理想的工作。

在build文件夹下的webpack.base.conf.js中配置externals可以分离打包第三方资源包，key是依赖包的名称，value是源码抛出来的全局变量,这样打包后这些文件就不会打包到vendor.js 和app.js中，会大大减少打包体积。(尤其是你的项目用了多个三方库)

这个做法就是可以不把这些资源打包到bundle和vendor.js中，而是在运行时去获取需要的依赖和资源，大大减少打包的体积。

2、第三方库使用CDN引入

在项目开发中，我们会用到很多第三方库，如果可以按需引入，我们可以只引入自己需要的组件，来减少所占空间，但也会有一些不能按需引入，我们可以采用CDN外部加载，在index.html中从CDN引入组件，去掉其他页面的组件import，修改webpack.base.config.js，在externals中加入该组件，这是为了避免编译时找不到组件报错。

//这里是我再项目中的配置
//切记只适用于测试，要是上线一定是购买付费的
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>

3、vue-router路由懒加载

这个是相当重要的一步,这步会大大减少打包后的体积，提升加载速度

在访问到相关页面才加载对应的路由和资源，才是正确的，否则全在初始化项目时加载，那么首屏时间就会很久。

举例说明：
路由懒加载模式配置

let routes = [
    {
        path: '/map', //地图
        name: 'map',
        component: resovle => require(['@/pages/map'],resovle),
        meta: { noRequiresAuth: true },
    },
    {
        path: '/redirectLogin', //支付回跳
        name: 'redirectLogin',
        component: resovle => require(['@/pages/site/redirectLogin'],resovle),
        meta: { noRequiresAuth: true },
    }
]

非----懒加载模式配置 router.js配置

import Vue from 'vue';   //这句话可以直接删掉的，因为配置了externals
//import Router from 'vue-router';
//import login from '@/pages/site/login';
采用require方式代替import
const Router = require('vue-router');
const login = require('@/pages/site/login');
Vue.use(Router);
let routes = [
    {
        path: '/login', //登陆
        name: 'login',
        component: login,
        meta: { noRequiresAuth: true },
    },
]

4、静态资源压缩，代码压缩，图片压缩

（1）、开启gzip压缩，（这个需要服务端配合）

gzip压缩一定要开，并且服务端配合开一下，真的很重要。开启gzip后你会发现加载速度有质的提升，尤其是你的vendor.js和app.js体积过大的时候。

（2）、图片压缩，目前我才用的是阿里云的图片处理（付费的）效果比较好，或者有条件的话配置一台单独的图片服务器
（3）、尽量使用icon代替图片
（4）、 js代码压缩- - - -(webpack 自UglifyJsPlugin插件压缩js文件)
（5）、css 代码压缩- - - - (采用optimize-css-assets-webpack-plugin插件来压缩css代码)

5、不要滥用三方库

尽量一个项目只使用一个库，不要为了方便使用多个库而忽略了性能。

6、去掉编译中的map文件

为了避免部署打包体积过大，我们通常去掉源文件（就是打包后看不到源代码),打包后的体积会小很多，在config文件夹下的index.js文件中

module.exports = {
    build: {
        env: build_env,
        index: path.resolve(__dirname, '../dist/index.html'),
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: './',
        productionSourceMap: false,     //这个设置为false就是去掉源文件
        // Gzip off by default as many popular static hosts such as Surge or Netlify
        // already gzip all static assets for you. Before setting to `true`, make sure
        // to: npm install --save-dev compression-webpack-plugin
        productionGzip: true,      //开启gzip
        productionGzipExtensions: [
            'js', 'css'
        ],
        // Run the build command with an extra argument to View the bundle analyzer
        // report after build finishes: `npm run build --report` Set to `true` or
        // `false` to always turn it on or off
        bundleAnalyzerReport: process.env.npm_config_report
    },
    }

7、代码层面的优化

（1）、项目组件化，去掉冗余的代码

（2）、正式环境去掉console.log

（3）、index.html页面中将js文件放到页面最底部，css文件放在<header>中使用link引入。

这么做的原因是因为浏览器渲染的机制是自上而下的，如果把js文件放到头部渲染，等js文件渲染完成才开始绘制页面，这样速度会很慢，并且会受到css渲染的阻塞，所以要把js文件放到最底部，并且一些没有关联性的文件可以采用异步加载

`四、解决白屏，体验优化`

上边已经讲述了优化问题，把所有的优化都做完之后，加载速度有了显著提升，把所有的优化都做完之后，加载速度有了显著提升}把所有的优化都做完之后，加载速度有了显著提升把所有的优化都做完之后，加载速度有了显著提升，但是再网慢的时候还是会有白屏，所以再白屏期间加骨架屏和loading就显得格外重要了。

<body>
    //这里亲测有效，放心使用
    <div id="app">
       // 我们只需要再这里添加loading图或者骨架屏，有人会说怎么控制它的显示隐藏啊，
       //不用担心，再项目初始化完成后会自动替换为你的页面。
       <div class="self-loading">
下面是我在学习HTML和CSS的时候整理的一些笔记，有兴趣的可以看下：

![HTML、CSS部分截图](https://img-blog.csdnimg.cn/img_convert/2bb6b442a4432372fe5b9ccea2ad93d0.png)

### 进阶阶段



进阶阶段，开始攻 JS，对于刚接触 JS 的初学者，确实比学习 HTML 和 CSS 有难度，但是只要肯下功夫，这部分对于你来说，也不是什么大问题。

JS 内容涉及到的知识点较多，看到网上有很多人建议你从头到尾抱着那本《JavaScript高级程序设计》学，我是不建议的，毕竟刚接触 JS 谁能看得下去，当时我也不能，也没那样做。



我这部分的学习技巧是，增加次数，减少单次看的内容。就是说，第一遍学习 JS 走马观花的看，看个大概，去找视频以及网站学习，不建议直接看书。因为看书看不下去的时候很打击你学下去的信心。

然后通过一些网站的小例子，开始动手敲代码，一定要去实践、实践、实践，这一遍是为了更好的去熟悉 JS 的语法。别只顾着来回的看知识点，眼高手低可不是个好习惯，我在这吃过亏，你懂的。



**1、JavaScript 和 ES6**



在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。



![JavaScript部分截图](https://img-blog.csdnimg.cn/img_convert/cac778dc45492a41e2f3e7cd6b0134e5.png)



**2、前端框架**

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/topics/618166371)**

以 Vue 为例，我整理了如下的面试题。



![Vue部分截图](https://img-blog.csdnimg.cn/img_convert/c6738a80c94640db83f7ffbf487ac5f0.png)