(webpack篇)9.代码分割code spliting

一、分割场景

为什么要进行代码分割？

• 1.普通场景下 main.js 打包生成2m的代码发布后
  用户多次访问该页面，每次都要重新加载2m的内容
• 2.代码分割处理 main.js被拆分成main.js(1m大小),a.js(1m大小)
  a.js是一个公共的js库的引入
  当页面业务逻辑发生变化时，只要重新加载main.js即可，a.js会在页面做缓存

二、webpack中代码分割

• 方式一 同步代码：只需要在webpack.common.js中配置optimization参数

module.exports = {
    ...
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
    ...
}

• 方式二 异步代码(import): 无需做任何配置，会自动进行代码分割
  在src/index.js中

function getComponent() {
    return import('lodash').then(({ default: _ }) => {
        var element = document.createElement('div');
        element.innerHTML = _.join(['Dell', 'Lee'], '-');
        return element;
    })
}

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