# 代码分离

代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中,然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle,以及控制资源加载优先级,如果使用合理,会极大影响加载时间。

感觉代码分割更好一些

# 入口分离

这是迄今为止最简单、最直观的分离代码的方式。不过,这种方式手动配置较多,并有一些陷阱,我们将会解决这些问题

module.exports = {
    entry: {
        app: './src/index.js',
        other: './src/other.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: './dist'
    }
}
  • 两个入口文件如果引用了同样的模块,无法提取出共同的部分
  • 这种方法不够灵活,并且不能将核心应用程序逻辑进行动态拆分代码
  • 热替换的问题未解决(个人问题)

# 防止重复

# 入口依赖

入口需要重新配置, 需要设置一个依赖

module.exports = {
    entry:{
        app: {
            import: './src/index.js',
            dependOn:'shared'
        },
        other: {
            import: './src/print.js',
            dependOn: 'shared'
        },
        shared: 'lodash'
    }
}
fsdfsd

# SplitChunksPlugin

优化配置中,需要设置 splitChunks , 提取所有入口的公共代码

module.exports = {
    entry:{
        app:'./src/index.js',
        other: './src/print.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, '..', 'dist')
    },
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
}

开发环境

fsdfsd

生产环境

fsdfsd

# 动态导入(dynamic imports)

需要使用注释来命名

import(/* webpackChunkName: "lodash" */ "lodash").then(function({default: _}) {
    console.log(_.ceil(1.24));
})

要在配置中加一条

module.exports = {
    output: {
        filename: '[name].bundle.js',
        chunkFilename: '[name].bundle.js',
        path: path.resolve(__dirname, '..', 'dist')
    }
}

惊奇的发现,就算不配置 chunkFilename 也能正常输出带名字的文件

# 懒加载

如果放在事件中调用,会在调用的时候才加载文件

window.addEventListener("click", function () {
    import(/* webpackChunkName: "lodash" */ "lodash").then(function({default: _}) {
        console.log(_.ceil(1.24));
    })
})