vue项目打包压缩？

  • Z时代
  • 2024-02-05
  • 分类：IT

vue项目已经使用UglifyJsPlugin进行打包压缩了，上级要求项目打包之后js文件再小点，还有什么处理办法呢？
vue项目打包压缩？
希望大佬们能给点建议，如果可以的话，有点代码支持！
拜谢！！！

回答：

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

https://segmentfault.com/a/1190000044007909

回答：

  1. 可以安装一下这个插件compression-webpack-plugin，在生产环境开启gzip压缩
const CompressionWebpackPlugin = require("compression-webpack-plugin");
new CompressionWebpackPlugin({
    test: /\.js$|\.html$|\.css/, // 匹配文件名
    threshold: 10240, //对超过10K的数据进行压缩
    deleteOriginalAssets: false // 是否删除源文件
})
  1. 把一些静态固定的资源直接放cdn，然后通过url引入到自己的项目中
  2. 把第三方库通过代码分割，再分一些出来，不要全部打包在一个js里
  3. 一些js可以用import()的方式，异步引入

回答：

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

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

回答：

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

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

以上是 vue项目打包压缩？ 的全部内容， 来源链接： utcz.com/p/934606.html

回到顶部