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和vendorsmain.js，vendorsmain.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): 异步代码，无需做任何配置，会自动进行代码分割，放置到新的文件中
