前端代碼優化
–其他的優化可以具體在網上搜索
壓縮項目打包后的體積大小、提升打包速度，是前端性能優化中非常重要的環節，結合工作中的實踐總結，梳理出一些 常規且有效 的性能優化建議
ue 項目可以通過添加–report命令： "build": "vue-cli-service build --report"，打包后 dist 目錄會生成 report.html 文件，用來分析各文件的大小
代碼中，去除沒有利用到的庫文件，去除沒有關于業務方面的demo程序以及頁面。
代碼未開啟壓縮，進行分析研究
js包體積有2.43MB.構建的文件就多而大，整個項目包括靜態資源14MB多，之前用了部分高清的背景圖，替換為精靈圖之后以及刪除部分代碼和優化之后。項目整體為11MB大小。
花費時間29653ms構建成功。此圖為打包后的結構目錄。
響應gz模式的打包
即compression-webpack-plugin插件的使用
線上的項目，一般都會結合構建工具 webpack 插件或服務端配置 nginx，來實現 http 傳輸的 gzip 壓縮，目的就是把服務端響應文件的體積盡量減小，優化返回速度
html、js、css資源，使用 gzip 后通常可以將體積壓縮70%以上
這里介紹下使用 webpack 進行 gzip 壓縮的方式，使用 compression-webpack-plugin 插件
瀏覽器可以自己解析gz包
npm install compression-webpack-plugin -D
配置：
configureWebpack:config => {// 開發環境不配置if (process.env.NODE_ENV !== 'production') returnreturn {plugins: [new CompressionPlugin({filename: "[path][base].gz", // 這種方式是默認的，多個文件壓縮就有多個.gz文件，// filename: '[path].gz[query]', // 使得多個.gz文件合并成一個文件，這種方式壓縮后的文件少，本項目初次學習不建議使用algorithm: 'gzip', // 官方默認壓縮算法也是gziptest: /\.js$|\.css$|\.html$|\.ttf$|\.eot$|\.woff$/, // 使用正則給匹配到的文件做壓縮，這里是給html、css、js以及字體（.ttf和.woff和.eot）做壓縮threshold: 10240, //以字節為單位壓縮超過此大小的文件，使用默認值10240吧minRatio: 0.8, // 最小壓縮比率，官方默認0.8//是否刪除原有靜態資源文件，即只保留壓縮后的.gz文件，建議這個置為false，還保留源文件。以防：// 假如出現訪問.gz文件訪問不到的時候，還可以訪問源文件雙重保障也就是配置為false，我這里就直接使用gz單模式deleteOriginalAssets: true})]}}
打包后的代碼目錄結構
現在整個打包好后的包是5.6MB。很極限的壓縮
可以看出，全部變成了.gz的文件包，瀏覽器是可以解析這樣的包的。
之后將這個包推到nginx環境下，瀏覽器就可以請求（情空緩存，秒顯首頁等資源），因為gz文件是在網絡傳輸時候減小網絡開銷用的，如何請求的話在服務器配置開啟gzip，請求會優先匹配同文件名的gz壓縮格式返回，要注意頁面請求后的Response Headers中的Content-Encoding的值為“gzip”，Request Headers中Accept-Encoding的值存在“gzip”值就可以了。
驗證插件的有效性：
提升打包速度
開啟gzip壓縮之后，包的體積大幅縮減，但是打包的時間還是過長26880ms
HappyPack 多線程打包
由于運行在 Node.js 之上的 webpack 是單線程模型的，我們需要 webpack 能同一時間處理多個任務，發揮多核 CPU 電腦的威力
HappyPack 就能實現多線程打包，它把任務分解給多個子進程去并發的執行，子進程處理完后再把結果發送給主進程，來提升打包速度
- 安裝
npm install HappyPack -D
- vue.config.js 中引入
const HappyPack = require('happypack');
const os = require('os');
// 開辟一個線程池，拿到系統CPU的核數，happypack 將編譯工作利用所有線程
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });module.exports = {configureWebpack: {plugins: [new HappyPack({id: 'happybabel',loaders: ['babel-loader'],threadPool: happyThreadPool})]}
}
驗證 HappyPack 的有效性：
重新打包，最新數據如下：
打包速度：8949ms
使用HappyPack后，打包速度進一步提升了65%
可根據項目的實際情況來做合理的項目優化
https://juejin.cn/post/7186315052465520698#heading-7
