(一)背景
在项目中我们通常会用到一些插件,比如 loadsh、element-ui、axios 等等,如果不进行任何操作的话,这些【插件】和【业务逻辑代码】会统一打包到一个js文件中(main.js)
index.js:
import { flatten } from './number'
var arr = [1, 2, [3, 4, [5, 6]]]
var result = flatten(arr)
console.log(result)
number.js
const lodash = require('lodash')
export function flatten (arr) {
return lodash.flatten(arr)
}
打包结果:
如果 插件 1kb,业务逻辑代码 1Kb,改动一次业务代码,重新打包一次,改动一次业务代码,重新打包一次,每次打包就会是 2KB,如果我们采用代码分割的方式,把插件打包到一个js中,业务逻辑代码打包到一个js中,每次改动业务逻辑代码,就会只打包业务逻辑 js,只有1Kb,节省打包的时间,这就是 代码分割的主要意思。
主要做法把lodash单独打包
webpack.config.js:
entry: {
main: './src/main.js',
lodash: './src/lodash.js'
},
output: {
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist')
}
打包:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack test</title>
</head>
<body>
<div id="app"></div>
<script src="main.381b139bf6332969bc3e.js"></script>
<script src="lodash.381b139bf6332969bc3e.js"></script>
</body>
</html>
index.html中引入了两个js文件
(二)使用webpack配置 code splitting
增加两行代码
optimization: {
usedExports: true,
// 代码分割
splitChunks: {
chunks: 'all'
}
},
打包后:
index.html:
main.269e60289818f70af114.js:这个js主要就是业务逻辑代码
vendors~main.269e60289818f70af114.js:这个文件主要就是插件的js集合代码