vue-cli3打包部分优化

最新推荐文章于 2024-05-06 18:15:30 发布

helloCheng09

最新推荐文章于 2024-05-06 18:15:30 发布

阅读量614

点赞数

本文链接：https://blog.csdn.net/weixin_44544388/article/details/105417675

版权

不生成map 15.5M

node_modules_@vue_cli-service@4.2.3@@vue\cli-service\lib\options.js
productionSourceMap: false,

分离合并 css 14.3M

vue.config.js

css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {},
        // 启用 CSS modules for all css / pre-processor files.
        requireModuleExtension: true
      },

图片压缩 9.50M

vue.config.js
npm install image-webpack-loader -D

// 压缩图片
  chainWebpack: config => {
    config.module
        .rule('images')
        .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({
          bypassOnDebug: true
        })
        .end()
  },

公共代码抽离 9.42M

vue.config.js

configureWebpack: () => ({
        optimization: {
            splitChunks: {
                cacheGroups: {
                    vendor: {
                        chunks: "all",
                        test: /node_modules/,
                        name: "vendor",
                        minChunks: 1,
                        maxInitialRequests: 5,
                        minSize: 0,
                        priority: 100,
                    },
                    common: {
                        chunks: "all",
                        test: /[\\/]src[\\/]js[\\/]/,
                        name: "common",
                        minChunks: 2,
                        maxInitialRequests: 5,
                        minSize: 0,
                        priority: 60
                    },
                    styles: {
                        name: 'styles',
                        test: /\.(sa|sc|c)ss$/,
                        chunks: 'all',
                        enforce: true,
                    },
                    runtimeChunk: {
                        name: 'manifest'
                    }
                }
            }
        }
    }),

GZip 8.75M // 失败

npm i -D compression-webpack-plugin
vue.config.js

  configureWebpack: config => {
        if (process.env.NODE_ENV != 'development') {
            return {
                plugins: [new CompressionPlugin({
                    // filename: `./public/yz-vue-assets/js/[name].${process.env.NODE_ENV}.${Timestamp}.js`,
                    algorithm: 'brotliCompress',
                    test: /\.(js|css|html|svg)$/,
                    compressionOptions: { level: 11 },
                    threshold: 10240,
                    minRatio: 0.8,
                    deleteOriginalAssets: true, 
                })],
                output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
                    filename: `./public/yz-vue-assets/js/[name].${process.env.NODE_ENV}.${Timestamp}.js`,
                    chunkFilename: `./public/yz-vue-assets/js/[name].${process.env.NODE_ENV}.${Timestamp}.js`
                },
            }
        }
    }