Javascript 我如何优化我的JS文件的大小后的网页？（VUEJS）

我的JS文件在WebPack之后是6.53MB。该应用程序有20个组件和许多功能

你认为我可以缩小尺寸吗？有什么方向吗

多谢各位

我的JS文件在WebPack之后是6.53MB

您的问题并不明显，但我将其解释为您的项目处于开发模式

好的，您可以使用gzip压缩之类的方法进行很多优化，以减少捆绑包的大小

对于vue，可以使用

vue.config.js

中的以下代码动态实现gzip压缩：

const CompressionPlugin = require("compression-webpack-plugin")

let plugins = []

if (process.env.NODE_ENV === "production") {
    const compressionTest = /\.(js|css|html|ico)(\?.*)?$/i
    plugins = [
        new CompressionPlugin({
            algorithm: "gzip",
            compressionOptions: {
                numiterations: 15
            },
            minRatio: 0.99,
            test: compressionTest
        })
    ]
}
module.exports = {
    productionSourceMap: false,
    configureWebpack: {
        plugins
    }
}

现在，当您运行

warn build

时，应该会自动生成gzip文件

此外，您可以使用删除项目中未使用的css。您还可以使用来缩短css类名

vue.config.js

中css模块的配置示例如下：

module.exports = {
    css: {
        requireModuleExtension: true,
        sourceMap: false,
        loaderOptions: {
            css: {
                localsConvention: "camelCaseOnly",
                modules: {
                    localIdentName:
                        process.env.NODE_ENV === "production"
                            ? "[hash:base64:5]"
                            : "app-[hash:base64:5]-[local]"
                }
            }
        }
    }
}

用法示例：

您还可以在您认为不需要状态的地方使用。因为功能组件不处理任何状态，所以您应该获得一些优化。这在小项目中是可以忽略的，但在大项目中应该有所帮助

---

我希望这有帮助

任何方向

纵向还是横向<代码>你认为我可以缩小尺寸吗-不，但是我知道什么，我没有你的代码