前端頁面性能優化一 之 打包

說明：我這裏用的是vue項目，vue-cli 3.0 ，本文以此爲例

解決問題的方式，都直接在「方法」裏面寫了，有不懂的，歡迎你們交流😂

有興趣的同窗能夠去我網站看一看😊 yubowen2003.com (vue + iview)，網站還在建設中，歡迎你們多給建議。github.com/iProgramme

去sourceMap

方法：找到 vue.config.js 文件，找到 productionSourceMap 將其改成 false ，完

效果：

總結：能夠看到，打包前，48個文件，其中有四個是以 .map 結尾的文件，這個時候，整個包大概有 6M，在將其改成false以後打包，只有 2.4M 的大小了，是否是很開心😯

打包 gzip

方法：

• npm install compression-webpack-plugin --save-dev
• 找到 vue.config.js 引入該包，var CompressionWebpackPlugin = require("compression-webpack-plugin")
• 在 module.exports 裏面配置該包

module.exports = {
    configureWebpack: (config)=>{
        if(process.env.NODE_ENV == 'production'){
            return {
                plugins:[
                    new CompressionWebpackPlugin({
                        test:/\.js$|\.css$\.html$/,
                        threshold:10240,
                        deleteOriginalAssets:false // 不刪除原js文件
                    })
                ]
            }
        }
    },
}
複製代碼

• 服務端也要配置加載才行，這裏我用的 node.js 和 express ，因此配置以下

var express = require('express');
var compression = require('compression') // 引入此包來加載
var app = express()
app.use(compression());
app.use("/blog",express.static(__dirname+"/public"))
app.use("/",express.static(__dirname+"/dist"))
app.listen(3000, () => {
    console.log(`loaclhost:3000`);
});
複製代碼

打包效果：

頁面加載速度效果：

能夠看到，在用壓縮以前，網站的加載速度在12s左右，壓縮到 .gz 以後，速度明顯縮短到 4s 了😬（因每一個人網速，電腦不一樣而不一樣）

總結：這個須要後端配合加載才行。前端打包以後，會生成 .gz 結尾的文件，直接丟到服務端加載就好。 deleteOriginalAssets 也能夠選爲 true 這樣打出的包更小，但因爲直接用的是 .gz 的文件，因此源文件是否上傳到服務器，影響不大，看我的喜愛吧😂