曾经参与过一个项目，项目还没有开发完，页面已经打不开了。 原因是没有对引入的js进行拆解，导致全部引入的js打包在了一起。2m多，然后页面一加载完就打不开了。

所以必要优化有两点:

1.对js进行拆解

2.对js与css等内容进行压缩

配置vue.config.js

const CompressionWebpackPlugin = require('compression-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';
const path = require('path')
module.exports = {
    //生产路径 不在根目录下
    publicPath: isProduction ? '/xx' : '/', //xx代表着在网站的根目录下的文件夹名称
    lintOnSave: false,
    productionSourceMap: false,
    pluginOptions: {
        quasar: {
            treeShake: true
        }
    },
    transpileDependencies: [
        /[\\\/]node_modules[\\\/]quasar[\\\/]/
    ],
    devServer: {
        port: 8088,
        proxy: {
            '/api': {
                target: 'http://localhost:8081',
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    },


    //webpack配置
    configureWebpack: config => {
        // 开启gzip压缩
        if (isProduction) {
            config.plugins.push(new CompressionWebpackPlugin({
                algorithm: 'gzip',
                test: /\.js$|\.html$|\.json$|\.css/,
                threshold: 10240,
                minRatio: 0.8
            }));
            // 开启分离js
            config.optimization = {
                runtimeChunk: 'single',
                splitChunks: {
                    chunks: 'all',
                    maxInitialRequests: Infinity,
                    minSize: 20000,
                    cacheGroups: {
                        vendor: {
                            test: /[\\/]node_modules[\\/]/,
                            name(module) {
                                // get the name. E.g. node_modules/packageName/not/this/part.js
                                // or node_modules/packageName
                                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                                    // npm package names are URL-safe, but some servers don't like @ symbols
                                return `npm.${packageName.replace('@', '')}`
                            }
                        }
                    }
                }
            };
            // 取消webpack警告的性能提示
            config.performance = {
                hints: 'warning',
                //入口起点的最大体积
                maxEntrypointSize: 50000000,
                //生成文件的最大体积
                maxAssetSize: 30000000,
                //只给出 js 文件的性能提示
                assetFilter: function(assetFilename) {
                    return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
                }
            }
        }
    },

}