webpack中分割代码的三种方式

最新推荐文章于 2025-04-20 20:06:36 发布

十方魔

最新推荐文章于 2025-04-20 20:06:36 发布

阅读量2.6k

点赞数 1

分类专栏：前端/打包压缩/webpack 文章标签： webpack js 优化代码分割 code-splitting

本文链接：https://blog.youkuaiyun.com/github_36487770/article/details/102485582

版权

本文介绍了webpack中代码分割的三种方式：通过entry配置多入口、利用splitChunks智能抽取公共代码、使用dynamic-import按需动态加载。详细讲解了各项配置和注意事项，包括魔法注释的使用、预加载和预获取资源的区别，以及过度优化的考虑。最后，作者分享了在实际应用中权衡代码分割效果的心得。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

官网教程：code-splitting

最近在开发一个新的功能，需要在某一条件下引入新包，而之前的场景则完全不需要。这种情况下，动态加载+代码分割正可以派上用场。在动手之前，先看看官网是怎么说的吧。

entry - 配置多入口、多页面

在entry对象中写入多个入口文件即可。

weboack.config.js

const path = require('path');

module.exports = {
   
  mode: 'development',
  entry: {
   
    index: './src/index.js',
    another: './src/another-module.js',
  },
  output: {
   
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

这样做的弊端主要由两个。第一，如果有公共的代码块，那么打包之后的两个Bundle里都会包含重复的模块。第二，不够灵活，不能被webpack通过splitChunks的规则灵活地优化。

因此，在entry里直接写多个入口的方式，适用于本身就是多入口的项目，而非一般的spa。可以通过代码结构，用函数构造出合理的entry和相应的htmlwebpackplugin，来进行打包。

splitChunks - 智能抽取公共代码

webpack还给出了智能分割代码的功能：splitChunks，可以用给定的策略去抽取公共代码，避免重复。

webpack.config.js

 optimization: {
   
    minimizer: [
      new UglifyJsPlugin({
   
        exclude: /\.min\.js$/, // 过滤掉以".min.js"结尾的文件，这个后缀本身就

最低0.47元/天解锁文章