性能优化- splitChunks-模块分割

2023-12-11 11:30:51

可以进行代码分隔的有两种，一种是多入口，几个入口会生成几个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

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

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

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

成一个chunk

此时再次打包

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

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

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

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

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

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

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

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

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

码农公寓