WebPack之后，如何优化JS文件的大小？ （VUEJS）

Question

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

您认为我可以减小尺寸吗？有什么方向吗？

谢谢。

Answer 1

  

WebPack之后我的JS文件为6.53 Mb

您的问题并不明显，但我正在解释这是因为您的项目处于开发模式。

好吧，您可以使用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
    }
}

现在，当您运行yarn build时，应该会自动生成gzip文件。

此外，您可以使用PurgeCSS删除项目中未使用的CSS。您也可以使用CSS Modules来缩短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]"
                }
            }
        }
    }
}

用法示例：https://vue-loader.vuejs.org/guide/css-modules.html#usage

如果您认为不需要状态，也可以使用Functional Components。由于功能组件不会处理任何状态，因此您应该获得一些优化。在小型项目中这可以忽略不计，但在大型项目中应该有所帮助。

我希望这会有所帮助！