vue代码压缩优化

摘要：在 Vue 中，你可以使用构建工具来压缩你的代码，官方推荐使用 webpack，在webpack中你可以使用UglifyJSPlugin 插件来压缩 JavaScript 代码。例如，你可以在 webpack 的配置文件中配置 UglifyJSPlugin

1、设置productionSourceMap为false

如果不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。

设置为false打包时候不会出现.map文件

module.exports = {
    productionSourceMap: false
}

2、代码压缩

安装uglifyjs-webpack-plugin插件，可以去除项目中console.log和debugger

npm install uglifyjs-webpack-plugin --save

配置

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// 生产环境相关配置
if (isProduction) {
    // 代码压缩
    config.plugins.push(
        new UglifyJsPlugin({
            uglifyOptions: {
                //生产环境去除console等信息
                compress: {
                    warnings: false, // 若打包错误，则注释这行
                    drop_debugger: true,//是否移除debugger
                    drop_console: true,
                    pure_funcs: ['console.log']//移除console
                }
            },
            sourceMap: false,
            parallel: true
        })
    )
}

对于css代码你可以使用 cssnano-webpack-plugin 插件来压缩 CSS 代码：

const CssnanoWebpackPlugin = require('cssnano-webpack-plugin');

module.exports = {
  plugins: [
    new CssnanoWebpackPlugin({})
  ]
}

3、图片资源压缩

安装 image-webpack-loader 插件，可以将大图片进行压缩从而缩小打包体积

npm install image-webpack-loader --save

配置：

chainWebpack: config => {
     config.module
           .rule('images')
           .use('image-webpack-loader')
           .loader('image-webpack-loader')
           .options({ bypassOnDebug: true })
           .end()
}

4、开启gzip压缩

开启gzip压缩，可以优化http请求,提高加载速度

npm install compression-webpack-plugin --save-dev

使用

const CompressionPlugin = require("compression-webpack-plugin");
// 开启gzip压缩
config.plugins.push(new CompressionPlugin({
    algorithm: 'gzip',
    test: new RegExp("\\.(" + ["js", "css"].join("|") + ")$"), // 匹配文件扩展名
    // threshold: 10240, // 对超过10k的数据进行压缩
    threshold: 5120, // 对超过5k的数据进行压缩
    minRatio: 0.8,
    cache: true, // 是否需要缓存
    deleteOriginalAssets:false  // true删除源文件(不建议);false不删除源文件
 }))

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_12303