代码分离(CodeSplitting)

Code Splitting 的核心是把很大的文件，分离成更小的块，让浏览器进行并行加载。

1.同步代码的分割

项目目录

webpack-demo
|- build
  |-webpack.common.js
  |-webpack.dev.js
  |-webpack.prod.js
|- /dist
  |-index.html
  |-loadsh.js
  |-main.js
|- /node_modules
|- index.js
|- lodash.js
|- package-lock.json
|- package.json

说明在这里我们使用了lodash库，我们采用手动分割的方式拆分它.

创建lodahs.js并将lodash挂载到window对象上面

import _ from 'lodash'
window._=_;

配置webpack.common.js文件在entry中添加lodash的导入.

const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const {CleanWebpackPlugin}= require('clean-webpack-plugin');

module.exports={
    entry:{
        main:'./index.js',
        lodash:'./lodash.js'
    },
    output:{
        path:path.resolve(__dirname,'../dist'),
        filename:'[name].js'
    }
}

打包生成main.js和lodash.js，这样就可以让index.js专注于写页面。

image.png

2.同步分离代码

项目结构

webpack-demo
|- build
  |-webpack.common.js
  |-webpack.dev.js
  |-webpack.prod.js
|- /dist
  |-index.html
  |-vendors~main.js.js
  |-main.js
|- /node_modules
|- index.js
|- package-lock.json
|- package.json

配置webpack.common.js

optimization: {
  splitChunks:{
     chunks: 'all'
  }
}

打包生成mian.js和vendors_{main.js，vendors}main.js是专门纯放lodash.js这种第三方的库的.

image.png

3.异步分离代码

webpack-demo
|- build
  |-webpack.common.js
  |-webpack.dev.js
  |-webpack.prod.js
|- /dist
  |-index.html
  |-0.js.js
  |-main.js
|- /node_modules
|- index.js
|- package-lock.json
|- package.json

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);
});

总结：代码分割，和webpack无关webpack中实现代码分割，两种方式
1. 同步代码：只需要在webpack.common.js中做optimization的配置即可
2. 异步代码(import): 异步代码，无需做任何配置，会自动进行代码分割，放置到新的文件中

代码分离(CodeSplitting)

1.同步代码的分割

2.同步分离代码

3.异步分离代码

推荐阅读更多精彩内容