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

说明：我这里用的是vue项目，vue-cli 3.0 ，本文以此为例

解决问题的方式，都直接在“方法”里面写了，有不懂的，欢迎大家交流😂

去sourceMap

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

效果：

总结：可以看到，打包前，48个文件，其中有四个是以 .map 结尾的文件，这个时候，整个包大概有 6M，在将其改为false之后打包，只有 2.7M 的大小了，是不是很开心😯

打包 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`);
});

打包效果：

页面加载速度效果：

总结：这个需要后端配合加载才行。前端打包之后，会生成 .gz 结尾的文件，直接丢到服务端加载就好。 deleteOriginalAssets 也可以选为 true 这样打出的包更小，但由于直接用的是 .gz 的文件，所以源文件是否上传到服务器，影响不大，看个人喜好吧😂

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

去sourceMap

打包 gzip

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