webpack5代码分离

-

代码分离可把j代码块儿分隔成多个更小的块儿，可以控制代码的加载顺序，让不同的模块儿按需加载或并行加载，如果使用合理会极大的影响加载时间。

常用的代码分离方法有3中

1、配置多入口节点，使用entry使用手动的分离代码。

　　这个方法有个缺点，如果是多个入口，那么多个入口共享的文件会分别在每个包中重复打包。

2、防止重复

　　使用entry  dependecies 或者 splitChunksPlugin去重和分离代码

3、动态导入

　　通过模块的内敛函数调用来分离代码

 

下面是配置案例：

1、配置多入口节点，使用entry使用手动的分离代码。

module.exports = {
  // entry: './src/index.js', // 单入口
  entry: { // 多入口配置
    index: './src/index.js',
    another: './src/another_module.js',
  },
  output: {
    // filename: 'bundle.js', // 单入口
    filename: '[name].bundle.js', // 多入口  name就是entry配置的入口名（index、another）
    path: path.resolve(__dirname, './dist'),
    clean: true, // 每次打包清理dist目录
    assetModuleFilename: 'images/[contenthash][ext]', // contenthash：当前哈希值 ext：源拓展名
  }
}

如果index入口里用了第三方库，比如lodash.js，another入口也用到了lodash库，那么打包时，lodash就会分别打包到index.bundle.js和another.bundle.js中，重复打包的问题很明显。

 

2、多入口配置，如何防止重复？

　　1、手动把共用模块抽离成单独的模块，防止重复打包

module.exports = {
  entry: { // 多入口配置
    index: {
      import: './src/index.js',
      dependOn: 'shared'
    },
    another: {
      import: './src/another_module.js',
      dependOn: 'shared'
    },
    shared: 'lodash', // 定义一个共享的模块; 如果其他入口中用到lodash时，就会抽离成功公共的shared模块
  },
  output: {
    // filename: 'bundle.js', // 单入口
    filename: '[name].bundle.js', // 多入口  name就是entry配置的入口名（index、another）
    path: path.resolve(__dirname, './dist'),
    clean: true, // 每次打包清理dist目录
    assetModuleFilename: 'images/[contenthash][ext]', // contenthash：当前哈希值 ext：源拓展名
  }
}

　　2、用splitChunks配置防止重复打包：

module.exports = {
  entry: { // 多入口配置
    index: './src/index.js',
    another: './src/another_module.js',
  },
  output: {
    // filename: 'bundle.js', // 单入口
    filename: '[name].bundle.js', // 多入口  name就是entry配置的入口名（index、another）
    path: path.resolve(__dirname, './dist'),
    clean: true, // 每次打包清理dist目录
    assetModuleFilename: 'images/[contenthash][ext]', // contenthash：当前哈希值 ext：源拓展名
  },
  optimization: { // 优化配置
    splitChunks: { // 代码分隔，共用模块会自动打包成单独的模块
      chunks: 'all'
    }
  }
}

效果：

 

 

3、动态导入

　　利用esModule的import方法去动态引入模块，使webpack自动把这个模块抽离成单独的模块。

　　把entry还配置成单独的入口，

　　新加一个async_module.js代码块儿，里面用import动态引入lodash。

function getComponent() {
  return import('lodash').then(({ default: _ }) => {
    const element = document.createElement('div');
    element.innerHTML = _.join(['async', 'module', 'loaded!'], '-');
    return element;
  })
}

getComponent().then(element => {
  document.body.appendChild(element);
})

入口配置恢复成单入口，在单入口文件中引入刚才的async_module.js

index.js

import './async_module.js'

webpack.config.js还恢复成单入口

module.exports = {
  entry: { // 恢复单入口
    index: './src/index.js',
    // another: './src/another_module.js',
  },
  output: {
    // filename: 'bundle.js', // 单入口
    filename: '[name].bundle.js', // 多入口  name就是entry配置的入口名（index、another）
    path: path.resolve(__dirname, './dist'),
    clean: true, // 每次打包清理dist目录
    assetModuleFilename: 'images/[contenthash][ext]', // contenthash：当前哈希值 ext：源拓展名
  },
  optimization: { // 优化配置
  }
}

打包结果：自动把lodash抽离成了单独的代码块儿

 

 

另外补充一下，动态导入和splitChunck自动抽离配置还有多入口是可以共存的，最终只会打包出一个公共模块。

 懒加载：

　　懒加载是动态加载的一种，都是用了esModule的import函数，

　　有时候，有些模块可能从来不会被使用，把它弄成懒加载，就会让初始化时少加载点代码块，

　　比如，在一个按钮的点击事件中，调用一个模块的方法，如果用户不去点击，就有可能永远不会用到这个模块，这时候用懒加载就很合适。

　　比如：

button.addEventListener('click', () => {
  // 加上魔法注释，可以指定模块打包的名称，不加魔法注释时模块名会由webpack的规则去命名
  import(/* webpackChunkName: 'math' */'./math.js').then(({ add }) => {
    console.log(add(4, 5), '加法结果');
  })
})
document.body.appendChild(button);

效果：

 

 

 

-

标签：index,webpack5,模块,代码,分离,入口,js,another,entry
来源： https://www.cnblogs.com/fqh123/p/16343887.html