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

说明：我这里用的是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 的文件，所以源文件是否上传到服务器，影响不大，看个人喜好吧?

转载于:https://juejin.im/post/5bf2704151882537651574fa