一次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
至此第一阶段的优化结束了.....
