首页 > 其他分享> 文章详细

webpack5代码分离

2022-06-05 14:32:55 阅读：188 来源： 互联网

标签：index webpack5 模块代码分离入口 js another entry

代码分离可把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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

webpack5代码分离