序

这一次，我们主要是对打包的文件块供应商进行解包，并从不同语言的延迟加载通用块(chunk-common)中提取通用块中的多语言包。

要做这些事情，你首先需要知道以下几点：

网络包打包分析工具

Vue i18n延迟加载翻译包

WebpacksplitChunks根据主要的常用npm库进行拆分

Vue-cli3多页面门户配置

WebpackdllPlugin预构建配置

I18n多语言包拆分

1.优化效果比较

首先看一下优化前后的webpack-bundle-analyzer的分析截图

优化前

从上图可以看出，无论是chunk-common.xxx.js还是chunk-vendors.xxx.js文件都非常大。超过700kb。

而chunk-common.xxx.js的文件大小主要由lang多语言包占90%以上。但是，在加载和显示网站时，没有必要一次加载所有语言包。

我们先把多语言包拆分后的包分析截图。

多语言解包优化后

从优化后的截图可以看出，厂商. xxx.js文件还是很大的(后面会详细讨论厂商. xxx.js文件的拆包优化)。看chunk-common.xxx.js的文件大小，大小是160kb。这个时候，里面没有多语言包。只有提取出来的通用代码，但是这个通用代码其实可以进行优化，使之更小。看看有多个多语言包的js，都是按语言分包的。比如ar zh就是一个单独的语言包。当对应于语言环境时，只需要加载一个语言包。每个拆分语言包js都不到200kb，这种状态下还有很大的优化空间。我们的语言包也可以分为页面，语言包的关键命名可以优化以减少大小。

''

''

''

''

''

''

2.多语言解包实现

我们在优化之前使用vue i18n的方式是直接的

java描述语言

一个

Vue.use(VueI18n)

2

const i18n=new VueI18n({

三

locale : store . getter . current lang，

四

消息： {

五

ar: {.},

六

zh: {.},

七

en: {.}

八

}

九

})

这样，虽然单页切换语言可以直接切换语言，而不需要强制刷新页面，但后果是大量的打包资源被语言包占用。

让我们来看看vue-i18n的延迟加载翻译文档

从文档开始就可以看出，一次加载所有翻译文件是多余的，也是不必要的。使用Webpack时，延迟或异步加载转换文件非常简单。

这就是我们想要的！

根据文档，调整了语言包的结构，并且要切换的语言包被延迟加载到路由器中。单页切换语言也可以达到不强行刷新页面的体验。(如果你网站的路线中有多语参数，会更好处理)

java描述语言

一个

router.beforeEach((to，from，next)={

2

const lang=to.params.lang

三

loadLanguageAsync(lang)。然后(()=next())

四

})

我们可以通过检查lang是否真正支持它来改进这一点，并调用reject，这样我们就可以在每个之前捕获路由转换。

放弃占用资源太多，没有使用价值的依赖库

以我们的项目为例，从打包分析图可以看出，我们的chunk-vendors.xxx.js目前占用767kb。单个文件相对较大。如果用户网速较慢，加载需要2秒左右。

''

''

''

''

''

''

我们在看分析图chunk-vendors.xxx.js，主要是矩和swiper.js占的

我去看了项目中矩依赖库的使用，主要用于转换时间格式显示。这个小函数根本不需要这样的依赖库。在观看时刻，主要是多语种资源占用，因为这个依赖库主要是为了适应各个地区和的时间显示格式。一切决定卸载从属库的时刻到了。

查看vue-i18n(多语言国际化依赖库)的文档，我们发现我们使用的多语言库可以帮助我们实现时间格式Vue I18n日期和时间的本地化

然后我们替换了代码，使用了vue-i18n的$ d (date，' ymd ')

''

''

''

''

''

''

然后卸载时刻取决于库后的包分析图，组块-厂商. xxx.js降为502KB

''

''

''

''

''

''

通过解包库来减小供应商. xxx.js的文件大小

从上面看，虽然我们的chunk-venders . XXX . js已经被抛弃了，但是它出现在chunk-venders . XXX . js里面，目前占了很大一部分，可以去掉。现在我们会想办法打开包装。

修改vue.config.js的configureWebpack配置，配置splitChunks

java描述语言

一个

module.exports={

2

配置Webpack: {

三

优化： {

四

splitChunks: {

五

缓存组3360 {

六

common:

七

名称： '组块-通用'，

八

minChunks: 2，

九

优先级： -20，

10

组块： '初始'，

11

reuseExistingChunk: true，

12

Enforce: true //带有chunk-common的复制配置主要是设置强制，因为发现如果添加下面的chunk-swiper，不会生成chunk-common。资源将被合并到门户页面的js中。可能splitChunks有什么机制可以在生成chunk-common之前判断合适的情况。

13

},

14

swiper: {

15

名称： 'chunk-swiper '，

16

test :/[\ \/]node _ modules[\ \/]swiper[\ \/]/，

17

组块： '初始'，

18

优先级： 1，

19

reuseExistingChunk: true，

20

强制： true

21

}

22

}

23

}

24

}

25

},

26

}

然后在vue.config.js的页面中配置

添加对“组块-擦拭器”的引用

第：页[{

入口：路径，

template: '。/src/public/index.html '，

文件名： 'index.html '，

//title: '标题'，

组块： ['组块供应商'，'组块公用'，'组块交换'，索引]

}]

然后进行包装，看包装分析图，厂商. xxx.js降为375KB

''

''

''

''

''

''

摘要

优化包装的方法有很多。选择适合自己的就好。

例如，您也可以使用cdn来减少与vue相关的js的包大小。

使用Webpack dllPlugin提示打包热编译速度，减少打包文件大小。

只要你想做，并且足够愿意，有成千上万种方法可以解决看起来很难完成的事情。