将基于vue-cli3的项目进行项目优化

1、打包出来的app.js文件太大

因为把引入的第三方插件都打包在了app.js里面，让这个文件显得很臃肿，所以需将其拆分，将每个依赖包打包成单独的js文件。部分配置如下：

let optimization = {
     
        runtimeChunk: 'single',
        splitChunks: {
     
          chunks: 'all',
          maxInitialRequests: Infinity,
          minSize: 20000, // 依赖包超过20000bit将被单独打包
          cacheGroups: {
     
            vendor: {
     
              test: /[\\/]node_modules[\\/]/,
              name(module) {
     
                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                return `npm.${
       packageName.replace('@', '')}`
              }
            }
          }
        }
      }

2、路由按需引入

用到哪个路由时才加载它，这样就加快了首屏加载速度。
直接在router.js里：

component: () => import('路径'),

3、关于moment.js

当时查看了下打包出来的文件，发现引入的插件moment.js打包出来很大，然后百度了一下，原来moment.js会自带一个locale文件。所以打包到线上时会将需将其本地文件忽略。
优化方式：

const webpack = require('webpack')；
......
......
......
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

4、关于将一些js文件放本地可以大大优化加载速度。

这个方法我之前一直没理解，所以没使用过它，直到有一天开发一个js小游戏，需将其js文件引入。然后我直接将其放在public文件夹下的，然后再html文件上使用script引入，后面打包上线，发现它的加载速度比我之前用其他方式优化的其他项目更快。我找了下原因，发现就是因为我把大量的js文件直接放在public下面，而打包时并不会将其打包，所以线上就直接本地引入了。这是无意间发现的，下次有机会试试这种方法。

5、可以将一些插件使用cdn方式引入，减少代码体积。

6、在使用ui组件库时尽量按需加载。

7、终极方案，使用compression-webpack-plugin压缩

这是很多博客都会推荐的一种方式，比较麻烦的是需要后端配合，但这个方式会大大减少项目体积。
方法：在vue.config.js里配置：

const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js', 'css'];
......
......
......
 new CompressionWebpackPlugin({
     
          algorithm: 'gzip',
          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
          threshold: 10240,
          minRatio: 0.8
        })

然后，还需后端在nginx里配置，使其可访问gzip文件。

8、打包会出现map文件，占体积

解决方法：
在vue.config.js里配置：

productionSourceMap:false

---

暂时就先写到这了，以后有新的优化方式会不定时更新的。
对了，附上我本次优化的参考链接。
vue-cli3搭建项目之webpack配置

前端项目时因chunk-vendors过大导致首屏加载太慢的优化(使用compression-webpack-plugin)

vue使用moment.js经webpack打包后超级大的原因和解决方案

Vue打包后出现一些map文件的解决办法： productionSourceMap(vue-cli 3.0)