一次webpack优化

一、背景：

技术栈：ant-design-vue、vue、vuex、vue-router
最开始的优化手段只有bable plugin的按需加载。

下图是最开始的打包结果

initial.png

二、优化开发时打包速度

开发时热更新时，随着项目的变大，每次保存一下可能都要等一会儿。解决的办法就是，多进程、读缓存。与之对应的是happyPack和dll。本想用他俩，突然发现个更快的东西，而且听说将被webpack5内置？

• hard-source-webpack-plugin

这个插件其实也就是读取缓存，第一次构建是正常速度，第二次能构建能读取缓存，提高90%的速度，对于开发过程很友好。

config.plugins.push(
    new HardSourceWebpackPlugin()
);

使用的是默认的配置，会把缓存写在node_modules里。

第一次构建写缓存

write.png

第二次构建读缓存

read.png

也不知道为啥我的webpack没有时间显示，反正速度肉眼可见快了！！
这步没有缩小包体积，就不放图了。

三、压缩js

之前也在别的项目里见过，什么uglifyJs plugin，看webpack的文档，发现更推荐terser plugin，因为uglify-js不支持es6， uglify-es已经不维护了。

minimizer: [
     new TerserPlugin({
          terserOptions: {
              compress: {
                     /* eslint-disable babel/camelcase */
                     drop_console: true,
                     module: true,
                     warnings: true
              }
          }
    }),
],

压完之后，好吧有点变化~

step2.png

四、开始包分析

• webpack-bundle-analyzer

这个插件不多说了。下面这张图是目前各个包的大小情况。

analysis1.png

1、moment优化

利用weibpack的IgnorePlugin，忽略多语言的目录，单独引入某个语言的依赖。

// webpack配置
config
            .plugin('ignore')
            .use(IgnorePlugin, [/\.\/locale/, /moment/]);

// 单独引入
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-CN');

之后moment大概小了一半

analysis2.png step4.png

2、分包

splitChunks: {
       chunks: 'async',
       minSize: 30000,
       maxSize: 210000,
       cacheGroups: {
           'ant-design-vue': {
                 test: /node_modules[\\/]ant-design-vue/,
                 chunks: 'all',
                 priority: 20,
                 name: true
            },
            'default': {
                minChunks: 2,
                priority: -20,
                reuseExistingChunk: true
            }
    }
}

经过尝试，我项目里主要起作用的是default包的配置，把使用2次以上的包拆开，重复利用已有的包。

analysis3.png

也是小了一些的

step5.png

3、继续查看大包

左上角的@ant-design/icons也太大了，500多k，压缩后还有100多k，但其实我只用了其中的几个icon，antd却把它全量引入了，经过搜索，在github的issue里找到了解决办法。戳这里。

主要是利用webpack的别名，将ant-design-vue源码里引入icon的路径由@ant-design/icons/lib/dist换成你自己utils下的icon，这样就可以做到按需引入。

这样不方便的点是，单独引入的icon和antd组件内的icon都要在uitls/antdIcon.js里单独引入。

// src/utils/antdIcon.js
// 关闭按钮
export {
    default as CloseOutline
} from '@ant-design/icons/lib/outline/CloseOutline';

// webpack配置
config.resolve.alias
            .set('@ant-design/icons/lib/dist$', path.resolve(__dirname, './src/utils/antdIcon.js'));

这样打包出来果然好了很多，缩小了0.5M ！？

analysis4.png
step6.png

至此第一阶段的优化结束了.....

参考

webpack优化

辛辛苦苦学会的 webpack dll 配置，可能已经过时了

antd icon 优化