前端的项目优化

如何进行项目优化呢？
1，文件合并 减少http请求，合并css js 文件
2，文件体积压缩。利用webpack，Gzip压缩项目体积
只需要在配置中填上：
accept-encoding:gzip
可以省下时间开销
3。图片处理
以下是几种图片的特点：
jpg ：有损压缩、体积小、加载快、不支持透明图片
PNG-8 与 PNG-24 ：无损压缩、质量高、体积大、支持透明
SVG： 文本文件、体积小、不失真、兼容性好
SVG（可缩放矢量图形）是一种基于 XML 语法的图像格式。它和本文提及的其它图片种类有着本质的不同：SVG 对图像的处理不是基于像素点，而是是基于对图像的形状描述。
<img src="文件名.svg" alt="">
1
最经典的小图标解决方案——雪碧图（CSS Sprites）或者叫精灵图
雪碧图、CSS 精灵、CSS Sprites、图像精灵，说的都是这个东西——一种将小图标和背景图像合并到一张图片上，然后利用 CSS 的背景定位来显示其中的每一部分的技术。
4，按需导入
https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#%E6%8A%8A%E7%BB%84%E4%BB%B6%E6%8C%89%E7%BB%84%E5%88%86%E5%9D%97

5. 对代码进行压缩使用 UglifyJsPlugin插件（webpack 4.0 默认已经内部配置，不用你自己配置了）
   删除代码中的console 语句 注释的语句 以及空格等，使代码更加紧凑。

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
plugins: [
new UglifyJsPlugin({
// 允许并发
parallel: true,
// 开启缓存
cache: true,
compress: {
// 删除所有的console语句
drop_console: true
},
output: {
// 不保留注释
comment: false,
// 使输出的代码尽可能紧凑
beautify: false
}
})
]
}
6，删除项目中的冗余的代码
webpack 配置使用 Tree-Shaking 插件
基于 import/export 语法，Tree-Shaking 可以在编译的过程中获悉哪些模块并没有真正被使用，这些没用的代码，在最后打包的时候会被去除
import { page1, page2 } from './pages'

// show是事先定义好的函数，大家理解它的功能是展示页面即可
show(page1)
在 pages文件中如下：

export const page1 = xxx
export const page2 = xxx

但因为 page2 事实上并没有被用到（这个没有被用到的情况在静态分析的过程中是可以被感知出来的），所以打包的结果里会把这部分：

export const page1 = xxx
直接就会把 export const page2 = xxx 删掉。这就是Tree-Shaking 的作用

7打包工具压缩代码 webpack
webpack 可以将前端代码压缩差不多你未压缩之前的一半体积或更多，这样项目体积缩小，加快浏览器的解析速度
在配置webpack过程中，也需要合理配置

1. loader 解析器直解析我们需要解析的代码如babel-loader
   最常见的优化方式是，用 include 或 exclude 来帮我们避免不必要的转译如(node_modules|bower_components)依赖
   module: {
   rules: [
   {
   test: /.js$/,
   exclude: /(node_modules|bower_components)/,
   use: {
   loader: 'babel-loader',
   options: {
   presets: ['@babel/preset-env']
   }
   }
   }
   ]
   }