如何進(jìn)行項目優(yōu)化呢？
1钱反，文件合并 減少http請求家卖，合并css js 文件
2眨层，文件體積壓縮。利用webpack上荡，Gzip壓縮項目體積
只需要在配置中填上：
accept-encoding:gzip
可以省下時間開銷
3趴樱。圖片處理
以下是幾種圖片的特點：
jpg ：有損壓縮、體積小、加載快叁征、不支持透明圖片
PNG-8 與 PNG-24 ：無損壓縮纳账、質(zhì)量高、體積大捺疼、支持透明
SVG： 文本文件疏虫、體積小、不失真啤呼、兼容性好
SVG（可縮放矢量圖形）是一種基于 XML 語法的圖像格式卧秘。它和本文提及的其它圖片種類有著本質(zhì)的不同：SVG 對圖像的處理不是基于像素點，而是是基于對圖像的形狀描述媳友。
<img src="文件名.svg" alt="">
1
最經(jīng)典的小圖標(biāo)解決方案——雪碧圖（CSS Sprites）或者叫精靈圖
雪碧圖斯议、CSS 精靈、CSS Sprites醇锚、圖像精靈哼御，說的都是這個東西——一種將小圖標(biāo)和背景圖像合并到一張圖片上，然后利用 CSS 的背景定位來顯示其中的每一部分的技術(shù)焊唬。
4恋昼，按需導(dǎo)入
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
- 對代碼進(jìn)行壓縮使用 UglifyJsPlugin插件（webpack 4.0 默認(rèn)已經(jīng)內(nèi)部配置，不用你自己配置了）
刪除代碼中的console 語句 注釋的語句 以及空格等赶促，使代碼更加緊湊液肌。
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
plugins: [
new UglifyJsPlugin({
// 允許并發(fā)
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是事先定義好的函數(shù)婿滓，大家理解它的功能是展示頁面即可
show(page1)
在 pages文件中如下：
export const page1 = xxx
export const page2 = xxx
但因為 page2 事實上并沒有被用到（這個沒有被用到的情況在靜態(tài)分析的過程中是可以被感知出來的）老速，所以打包的結(jié)果里會把這部分：
export const page1 = xxx
直接就會把 export const page2 = xxx 刪掉。這就是Tree-Shaking 的作用
7打包工具壓縮代碼 webpack
webpack 可以將前端代碼壓縮差不多你未壓縮之前的一半體積或更多凸主，這樣項目體積縮小橘券，加快瀏覽器的解析速度
在配置webpack過程中，也需要合理配置
- loader 解析器直解析我們需要解析的代碼如babel-loader
最常見的優(yōu)化方式是卿吐，用 include 或 exclude 來幫我們避免不必要的轉(zhuǎn)譯如(node_modules|bower_components)依賴
module: {
rules: [
{
test: /.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
