vuecli3配置webpack_vue CLI3的优化

之前入职前，前任同事留了一份 vue CLI2 的代码给我，不得不说修修补补最讨厌了，所以上周升级了一下，也就是这篇文章的由来，使用的是 vue CLI3，未优化之前打包大小 24M，下面就分享一下我的优化之路。

升级版本

通常情况下，把版本升级到最新不仅可以提高编译速度也可以避免一些出现过的问题( 惨遭打脸选用的 Ant Design of Vue 就重大更新了一次，又重新写的 )。

按需加载

比如常见的 lodash 库，我们显然不需要全部都用到，所以要采用按需加载的方式来引用，对一些常见的方法进行提取统一进行处理，一般来说如果支持的话，文档都会标注，如果没有又不想要体积太大就自己写一个，这方面不在过多阐述了。

webpack 方面

vue CLI3 对 webpack 的相关配置在vue.config.js文件内进行设置，分析了一下打包大小原因，对于一些图片还可以进行压缩减少体积，我采用的是image-webpack-loader，直接配置

chainWebpack: config => {
  config.module
    .rule("image-webpack-loader")
    .test(/.(gif|png|jpe?g|svg)$/i)
    .use("file-loader")
    .loader("image-webpack-loader")
    .tap(() => ({
      disable: process.env.NODE_ENV !== "production"
    }))
    .end();
};

上述做完，体积还是在 18M 左右，下一步就是启用gzip压缩，具体内容可以去谷歌一下，这里只说如何实现，按照 vue CLI 文档在 plugins 内添加compression-webpack-plugin，做完上述之后已经成功将体积缩小一半了。

CDN

推荐一下一个工具webpack-bundle-analyzer可视化分析打包大小。

从上面查看打包分析，发现主要集中在百度的富文本和@antv/data-set 这两块，占用了近 12M，不过在文档方面没看到@antv/data-set的按需加载，有发现的小伙伴可以在下面留言，决定把这两部分放到公司内部的服务器上，采用 CND 的形式来进行加载。

这里推荐一下一篇文章CDN 是什么？使用 CDN 有什么优势？ - 视界云的回答 - 知乎，如果符合上面就直接上手吧。

异步加载

es6 有一个 import()命令，在 webpack 中已经可以抢先体验，对于直接加载和异步加载最主要的区别就在于体积的大小，比如 vue-router 中的路由，完全可以采用异步加载的形式，这样可以大大缩小打包体积和首屏时间。

其他

剔除 console 和 debugger 代码，这里我直接贴上我的配置了

minimizer: [new UglifyJsPlugin({
    uglifyOptions: {
      output: {
        // 删除注释
        comments: true,
      },
      chunkFilter: () => true,
      compress: {
        warnings: false,
        // 删除console
        drop_console: true,
        ie8: false,
        // 删除debugger
        drop_debugger: true,
      },
    },
    cache: true,
     parallel: true,
  })],

善用.browserslistrc，虽然默认配置已经很合理了，不过还可以针对受众群体进一步优化，这里公司不支持 ie 所以直接把版本锁定在了 ie > 11，可以减少一小部分的体积。

最后

因为 vue CLI 本身对这一方面优化的已经很成功了，所以其实并没有太多值得优化的地方，更多应该是代码本身。

优化结束后，文件只有 3M 左右。