Vue 前端打包，将过大的文件，切割成一个个小文件

1.Webpack Bundle Analyzer

插件的使用

通过安装 webpack-bundle-analyzer 插件，分析打包之后的具体文件大小。

在vue.config.js文件中进行配置

chainWebpack(config) {    
    // 查看打包文件体积大小    
    config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}

在package.json中配置命令

"scripts": {    
    "dev": "vue-cli-service serve",    
    "build:prod": "vue-cli-service build",    
    "build:report": "vue-cli-service build --report"  
},

执行  npm run build:report 

生成分析报告如下：

然后，具体分析哪些文件过大，去掉不必要的依赖包。减小打包后的文件体积。

譬如 vue-3d-model 插件，在项目中最后并没有用到，就可以去掉这个依赖包。

2.Webpack 配置：

optimization.splitChunks.chunks

还可以在vue.config.js文件中进行配置，将过大的文件，切割成一个个小文件。

configureWebpack: config => {    
    //生产环境取消 console.log    
    if (process.env.NODE_ENV === 'production') {      
        config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true      
        /* 压缩打包 */      
        config.optimization.splitChunks.chunks = 'all';        
        config.optimization.splitChunks.minSize = 1000000;      
        config.optimization.splitChunks.maxSize = 3000000;    
    }  
},

处理之后，再进行打包。在gzip状态下，最大的文件只有300多kb的大小。