网站优化

相信有很多后端的小伙伴，是不太精通前端的，写前端为了好看的样式，为了显示自己的数据，但是我们往往自己手撸的前端会有很大的问题，比如说排版问题，不太好看，网站的响应速度慢等等，这些都是一些常见的问题。网站的响应速度对用户的体验来说是比较重要的，在一般的情况下，一个网站的响应速度超过了10s我们都会认为是响应失败的，一个正常的网站的响应速度在4s左右，这才能让用户的体验良好，那么废话不多说，接下来我们进入正题，如何优化网站呢？？

网站的响应速度主要分为两个原因：其一呢：网速的影响，这个是我们无法左右的，要想提高网站的响应速度，我们只有一个办法，那就是花钱更换服务器，那这个是我们没法避免的。其二呢：就是因为网站文件大小的原因了，这个我们是可以控制的....

那如何优化网站的大小呢？，主要有以下几个步骤：

一：对网站中的图片进行压缩

随着数字媒体的不断发展，照片也越来越高清，随便的ps一下就会很大，网站中会有一些图片会大量的拖慢速度，高清的，2k的等等，而我们的网站本就不需要太高清的图片来进行展示网站优化，所以我们对其压缩存入，这会大大的减少图片的大小，从而加快网站的访问速度：

下面是我常用的图片压缩网站：

在线图片压缩 - 在线图片压缩工具,在线图片压缩软件

通过压缩就会让其很小，如下图所示：

压缩完成以后存入就会很小。

插件压缩

当然还可以用插件压缩，但是我用了好像没什么效果（这里也写一些吧>_ {

// 压缩图片

: () => {

if () {

// 图片压缩处理

const = ..rule('')

.test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)

.use('image--')

.('image--')

.({ : true })

.end()

}

}

二：组件的按需引入

我们在做网页开发的时候呢，会因为方便使用会大量的引入不同的组件，其实这点是不可取的网站优化，但是代码已经写好了，在重新的构建，无异于之前的白做，白白浪费了时间，得不偿失，但是不优化网站，网站的响应速度远远的达不到要求，这是我们就需要把组件按需引入，所谓的按需引入呢，就是把组件中我们用过的标签文件导入，将没用过的呢，不导入，从而达到减少网站大小的目的。

首先呢，我们先进行打包分析，用来查看那个组件的文件比较大，从而进行按需引入：

在 .json 中添加命令

`"": "vue-cli- build --"

然后命令行执行 npm run ，就会在dist目录下生成一个 .html 文件，右键浏览器中打开即可看到打包分析报告:

通过分析我们可以看出什么组件占用的文件大小比较多,下面呢我就介绍集中常用组件的按需引入：

1、按需引入

1.借助babel--，我们可以只引入需要的组件，以达到减小项目体积的目的:

npm babel-- -D ----用的如果是yarn的话 前面改为 yarn add

2.更改.文件

: [

[

"",

{

: "-ui",

: "theme-chalk",

},

],

3.写index文件引入我们需要引入的组件并且的暴露出来。

因为我们有的时候，并不是只用一个两个的，所以需要些文件，如下图所示：

4.在main.js文件中使用该文件，这样就大功告成了

1.首先呢，要安装

npm --save

2.引入核心模块

{, } from '/';

3.引入所要使用的表的模块（我这边只用来柱状图，所以就单纯的引入了一下柱状图）

{ } from "/";

4.引入提示框，标题，直角坐标系组件，组件后缀都为

{

,

,

,

,

,

} from "/";

5.引入 渲染器，注意引入 或者 是必须的一步

{

} from '/';

6.注册必须的组件

.use(

[

,

,

,

,

,

,

,

]

);

到此按需引入结束（我这个呢是用的柱状图，引入其他的请勿找抄）

需要注意的是注意为了保证打包的体积是最小的， 按需引入的时候不再提供任何渲染器，所以需要选择引入或者作为渲染器。这样的好处是假如你只需要使用 svg 渲染模式，打包的结果中就不会再包含无需使用的模块。

iview

这个组件是有些奇怪的，他有两个网站，安装的时候需要注意，一个是view-,另一个是iview这两个是不同的，其中第一个是有链表的，下面我们来讲解view-按需引入

1.首先需要借助一个工具babel--，我们要先进行安装

npm babel-- -D ----用的如果是yarn的话 前面改为 yarn add

2.我们要进行的是修改那个.文件

3.main.js中引入核心样式文件

**** 'iview/dist//iview.css'

注意：此处不需要 iview和Vue.use('iview'),只需要引入样式即可

4.使用iview的组件中引入或全局注册

// hello.vue

hello