性能优化- splitChunks-模块分割

可以进行代码分隔的有两种,一种是多入口,几个入口会生成几个chunk;另一种是异步加载,每一个异步加载就会生成一个chunk;

webpack打包如果是多个入口,并且引入同一个库,会如何工作?

a.js文件

import {$} from "jquery"
console.log("a文件的jquery",$);

b.js文件

import { $ } from 'jquery'
console.log("b文件的jquery", $);

webpack.config.js

  entry: {
    "a": "./src/a.js",
    "b": "./src/b.js"
  },

此时模式改为生产模式

进行webpack

性能优化- splitChunks-模块分割

 

 

两个文件的大小相同,并且都将jquery打包进去了

module.exports = {
......
  optimization: {
    splitChunks: {
      chunks:"all"
    }
  },
......
}

splitChunk表示切割chunk模块,chunks的值如果是all,会将文件中引入的node_modules单独打包成一个chunk,也就是说如果我们文件中既引入了jquery,也引入了vue,此时webpack会将这两个打包到一起

成一个chunk

此时再次打包

性能优化- splitChunks-模块分割

这是因为此时打包将所有的第三方库拆出来了

 

 

 

 性能优化- splitChunks-模块分割

 

 

 也就是相当于a.js和b.js引入的是公共资源了

 如果本地文件进行代码的分割,通过module的异步模块加载的方式实现

 此时我们将a.js文件引入b.js文件的变量

import("./b.js").then((res) => {
    console.log(res.b,'b的结果');
  })
  
  console.log("a文件");
  

此时打包后就会生成两个文件

性能优化- splitChunks-模块分割

 

 

 

 上面b.js 文件输出chunk名称是326.js,如果需要自定义命名可以单独设置

import(/*webpackChunkName: 'fileB'*/"./b.js").then((res) => {
  console.log(res.b,'b的结果');
})

注意:/*webpackChunkName: 'fileB'*/ 属于固定写法,不是注释,内部如果是webpackChunkName表示设置当前的chunk名称

性能优化- splitChunks-模块分割

 

上一篇:Kubernetes List-Watch 机制原理与实现 - chunked


下一篇:PNG分析