前言

项目中文件的打包后，首页js文件大小为600多k,尝试着将文件优化以下。

以下是我找到的3种有效的优化方式

实现方式

1. 使用uniapp的摇树优化（treeShaking）https://uniapp.dcloud.io/collocation/manifest?id=optimization
2. 使用gz压缩文件  https://github.com/vuejs/vue-cli/issues/978
3. splitChunks分包  https://www.jianshu.com/p/4f0600ea1c5f

   module.exports = {
     chainWebpack: config => {
       config.optimization.splitChunks({
         cacheGroups: {
             vendors: {
                 name: 'chunk-vendors',
                 minChunks: 4,
                 test: /node_modules/,
                 priority: -10,
                 chunks: 'initial'
             },
             common: {}
          }
       });
     }
   };

实现原理

小声说话：（以我自己理解的方式）

1. uniapp的摇树优化，只打包你用到的uniapp中的代码，从而减少（之前是一起包进去）
2. gz压缩文件，是让服务器请求压缩后的文件
3. splitChunks分包，配合webpack-bundle-analyzer插件（查看打包后的文件依赖），实现依赖分拆（很难搞）

相关

webpack-bundle-analyzer ,插件能让我们看到打包后包的大小和依赖关系。

详情：https://www.jianshu.com/p/0c05faee0975