vue-cli打包体积过大问题解决

包过大的问题无非就是js依赖库、ui依赖库、静态资源过大

1. 其中静态资源可以放到nas或者ftp服务器，流量比较便宜

2. ui依赖库可以在选择的时候注意选择提供了CDN外挂方式引入的ui库，例如element-ui，如果已经选择了没有CDN link的ui库，或者不想使用别人的CDN，那么可以选择自己打包后将js和css放到自己的nas或者ftp上，然后link自己的外链
   

3. 下面重点讲讲本身依赖库打包体积过大的问题

1.检查 vue.config.js中的productionSourceMap是否true，该配置是调试用，理应线上关闭

如果是开启的，记得上生产之前改为false，可以配置为动态的

const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
   
    productionSourceMap: !isProduction,
}

2.开启gzip压缩，进行js分片打包
需要按照依赖

npm install compression-webpack-plugin@5.0.0 -S -D

注意一定要指定5.0.0，否则打包时候会报错

const isProduction = process.env.NODE_ENV === 'production'

module.exports = {
   
    productionSourceMap: !isProduction,
        configureWebpack: config => {
   
        // 开启gzip压缩js，确保ng上的gizp是开的
        if ( isProduction ) {
   
            config.plugins.push( new CompressionWebpackPlugin( {
   
                algorithm: 'gzip',
                test: /\.js$|\.html$|\.json$|\.css/,
                threshold: 10240,
                minRatio: 0.8,
            } ) )
            // 开启分片式打包js
            config