webpack:Code Splitting 打包项目分割文件,优化页面加载

参考文章:
知乎:Webpack 大法之 Code Splitting
来源项目:
vue-element-admin
RuoYi

下图左侧为为分割的打包,右侧为分割的打包,很明显的看出,右侧将element和echarts这两个比较大的包从其中分离出来:

在这里插入图片描述
而这种做最直接明显的优势就是,像element及echarts这种很大的文件,在很大的情况下是不会改变内容的,比如我们在一个页面的功能修改了一下,打包上传,如果未分割的打包,浏览器会发现这个js文件有变动了,就会重新加载很大的几百KB甚至上M的js文件,但是将这些不会变动的包分割出来,就会像下图所示,直接调用缓存,而不是再次重新加载:

在这里插入图片描述
具体实现方法是采用vue.config.js里的配置,如下:

module.exports = {
   
 // ...
 config
	.optimization.splitChunks({
   
		chunks: 'all',
		cacheGroups: {
   
			libs: {
   
				name: 'chunk-libs',
				test: /[\\/]node_modules[\\/]/,
                priority: 10,
                chunks: 'initial' // only package third parties that are initially dependent
            },
            elementUI: {
   
                name: 'chunk-elementUI', // split elementUI into a single package
                priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
            },
            echarts: {
   
                name: 'chunk-echarts', // split echarts into a single package
                priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                test: /[\\/]node_modules[\\/]_?echarts(.*)/ // in order to adapt to cnpm
            },
            commons: {
   
                name: 'chunk-commons',
                test: resolve('src/components'), // can customize your rules
                minChunks: 3, //  minimum common number
                priority: 
  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值