一缺猛、背景：
技術棧：ant-design-vue中姜、vue、vuex薯演、vue-router
最開始的優(yōu)化手段只有bable plugin的按需加載撞芍。
下圖是最開始的打包結果
二、優(yōu)化開發(fā)時打包速度
開發(fā)時熱更新時跨扮，隨著項目的變大序无，每次保存一下可能都要等一會兒。解決的辦法就是好港，多進程愉镰、讀緩存米罚。與之對應的是happyPack和dll钧汹。本想用他倆，突然發(fā)現(xiàn)個更快的東西录择，而且聽說將被webpack5內置拔莱？
-
hard-source-webpack-plugin
這個插件其實也就是讀取緩存碗降，第一次構建是正常速度，第二次能構建能讀取緩存塘秦，提高90%的速度讼渊，對于開發(fā)過程很友好。
config.plugins.push(
new HardSourceWebpackPlugin()
);
使用的是默認的配置尊剔，會把緩存寫在node_modules里爪幻。
第一次構建寫緩存
第二次構建讀緩存
也不知道為啥我的webpack沒有時間顯示，反正速度肉眼可見快了Ｐ胛蟆挨稿！
這步?jīng)]有縮小包體積，就不放圖了京痢。
三奶甘、壓縮js
之前也在別的項目里見過，什么uglifyJs plugin祭椰，看webpack的文檔臭家，發(fā)現(xiàn)更推薦terser plugin，因為uglify-js不支持es6方淤， uglify-es已經(jīng)不維護了钉赁。
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
/* eslint-disable babel/camelcase */
drop_console: true,
module: true,
warnings: true
}
}
}),
],
壓完之后，好吧有點變化~
四携茂、開始包分析
-
webpack-bundle-analyzer
這個插件不多說了橄霉。下面這張圖是目前各個包的大小情況。
1邑蒋、moment優(yōu)化
利用weibpack的IgnorePlugin姓蜂，忽略多語言的目錄，單獨引入某個語言的依賴医吊。
// webpack配置
config
.plugin('ignore')
.use(IgnorePlugin, [/\.\/locale/, /moment/]);
// 單獨引入
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-CN');
之后moment大概小了一半
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
}
}
}
經(jīng)過嘗試，我項目里主要起作用的是default包的配置卿堂，把使用2次以上的包拆開束莫，重復利用已有的包。
也是小了一些的
3草描、繼續(xù)查看大包
左上角的@ant-design/icons也太大了览绿，500多k，壓縮后還有100多k穗慕，但其實我只用了其中的幾個icon饿敲，antd卻把它全量引入了，經(jīng)過搜索逛绵，在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 ！法焰？
至此第一階段的優(yōu)化結束了.....
參考
webpack優(yōu)化
辛辛苦苦學會的 webpack dll 配置僵腺，可能已經(jīng)過時了
antd icon 優(yōu)化
