前端页面性能优化一 之 打包

说明：我这里用的是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 的文件，因此源文件是否上传到服务器，影响不大，看我的喜爱吧😂