vue项目打包压缩？

Question

vue项目已经使用UglifyJsPlugin进行打包压缩了，上级要求项目打包之后js文件再小点，还有什么处理办法呢？

希望大佬们能给点建议，如果可以的话，有点代码支持！
拜谢！！！

Answer 1

webpack配置Compression-webpack-plugin压缩gzip文件

https://segmentfault.com/a/1190000044007909

Answer 2

1. 可以安装一下这个插件compression-webpack-plugin，在生产环境开启gzip压缩

const CompressionWebpackPlugin = require("compression-webpack-plugin");

new CompressionWebpackPlugin({
    test: /\.js$|\.html$|\.css/, // 匹配文件名
    threshold: 10240, //对超过10K的数据进行压缩
    deleteOriginalAssets: false // 是否删除源文件
})

2. 把一些静态固定的资源直接放cdn，然后通过url引入到自己的项目中
3. 把第三方库通过代码分割，再分一些出来，不要全部打包在一个js里
4. 一些js可以用import()的方式，异步引入

Answer 3

1. 使用 splitChunks 把一些公共的库从业务代码中提取出来。这样可以有效的减少各个业务 chunk 文件的大小。
2. 打包时开启 gzip，服务器端也开启 gzip 的支持。

最后提一嘴，现在很少会使用 UglifyjsWebpackPlugin 了，可以考虑改用 TerserWebpackPlugin。

Answer 4

不用再额外加压缩压缩js的插件了，webpack默认是有的

module.exports = {
    chainWebpack: config => {
        config.optimization.minimizer("terser").tap(args => {
            args[0].terserOptions.compress.drop_console = true;
            return args;
        });
    },
};