上面我们使用了 webpack 中的代码分割。我们知道webpack 代码分割，底层使用了 SplitChunksPlugin 插件。那么下面，我们来写写这个插件可以进行配置的一些参数。
我们上篇的代码如下。index.js
function getComponent () {
return import('lodash').then(
({default: _}) => {
var element = document.createElement('div');
element.innerHTML = _.join(['h','e'], '**');
return element;
}
)
}
getComponent().then(element => {
document.body.appendChild(element);
})我们异步加载了 lodash 代码。webpack 会将lodash 中的代码单独打包生成一个文件，自动做代码分割。
我们运行打包命令，会发现，在项目 build 中会有下面的文件。
0.js 就是lodash 代码。我们想把0.js 改名。0 实际上是代码分割产生的id 的值。
在异步加载组件的代码中，我们有一种语法叫 Magic Comment。
我们在import 函数参数前面加上注释，如下。
function getComponent () {
return import(/* webpackChunkName:"lodash" */ 'lodash').then(
({default: _}) => {
var element = document.createElement('div');
element.innerHTML = _.join(['h','e'], '**');
return element;
}
)
}
getComponent().then(element => {
document.body.appendChild(element);
})上面代码的意思是，打包时代码分割，chunk 的名字为lodash.
运行打包命令，发现并未命令成功。
这是因为我们之前使用的动态import 插件，不是官方的插件，它不支持 magic comment 语法。
下面，我们先去package.json 中删除这个插件. 同时找一下 babel dynamic import 官方插件
https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import/
npm 下载安装
npm install --save-dev @babel/plugin-syntax-dynamic-import
然后在 babelrc 中配置上plugins
{
"presets": [
["@babel/preset-env",{
useBuiltIns: 'usage'
}],
"@babel/preset-react"
],
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}然后，我们打包即会生成下面的文件
这里，lodash 代码就会打包在vendors~lodash.js 中。但是，如果不想要前缀，就想它的名字叫lodash,需要再去配置，如下。
我们打开webpack.config.js 其中的optimization 配置项，如下是之前我们的配置。
optimization: {
splitChunks: {
chunks: 'all'
}
},其实，这个配置项可以配置很多东东。我们打开webpack 官网 document > plugin > SplitChunksPlugin
https://webpack.js.org/plugins/split-chunks-plugin/
如下，我们将cacheGroups 配置项拷贝到我们的项目配置中，并做以下修改。
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendors: false,
default: false
}
}
},然后运行打包代码，发现完美！
注：
如果我们将webpack.config.js 中splitChunks 中的内容清空，如下
optimization: {
splitChunks: {
}
},发现，还是可以正常的进行代码分割打包，只不过名字是默认的而已。这是因为，刚刚我们找到的webpack SplitChunksPlugin 网页上说的这段话：（如果splitChunks 配置项的默认值是下面的这个，如果splitChunks 中配置项没有配那么会使用默认值）
下面我们继续尝试。把我们项目中的optimization.splitChunks 换成默认的配置。
splitChunks.chunks 可以是函数也可以是string ， 当它是‘async’ 时，表示只对异步引入代码分割，当它是'all' 时，表示同步引入 异步引入的代码都可以分割。
我们将chunks 改为 ‘all’，并将index 中import 改为同步， 如下。
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
mode: 'development',
devtool: "cheap-module-source-map",
devServer: {
contentBase: './bundle',
open: true
},
entry: {
main: './src/index.js'
},
module: {
rules: [{
test: /\.(png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
name: '[name].[ext]',
outputPath: 'imgs/',
limit: 20480
}
}
}, {
test: /\.scss$/,
use: ['style-loader', {
loader: 'css-loader',
options: {
importLoaders: 2,
// modules: true
}
},
'sass-loader',
'postcss-loader']
}, {
test: /\.(eot|ttf|svg)$/,
use: {
loader: 'file-loader'
}
}, {
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}]
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'bundle')
},
optimization: {
splitChunks: {
chunks: 'all',
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: false,
default: false
}
}
},
plugins: [new HtmlWebpackPlugin({
template: 'src/index.html'
}),new CleanWebpackPlugin()]
}
import _ from 'lodash'
var element = document.createElement('div');
element.innerHTML = _.join(['h','e'], '**');
document.body.appendChild(element);运行打包命令，会发现，并没有进行代码分割，如下。
这是为什么呢。当同步代码引入的时候，不仅是看到splitChunks 为 ‘all’ 就可以了。它还会继续往下看配置 cacheGroups . 我们要在cacheGroups 中做一些配置，才能实现同步的代码分割。我们把官网上的cacheGroups.vendors 配置拷贝过来，如下。
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: false
}lodash 是从mode_modules 中引入的，因此test是ok 的。
这样lodash 就会打包到 vendors 组里。运行打包代码，如下。就可以分割同步引入代码了。
我们可以看到分割后的代码文件名为vendors~main.js 它的意思上，我的代码，是属于vendors 组，入口文件是main(webpack 中配置的entry)。如果我们不想要这个名字，也可以给它配置一个自定义名。把所有分割文件打包叫vendors.js, 如下。
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
filename: "vendors.js"
},
default: false
}打包后，分割代码放在vendors.js 中，就不截图了。
接下来是splitChunks.minSize。当我们把它设置为很大时 （比如）1000000000 。 会发现webpack 不会进行代码分割了。这个因为，这个minSize 表示，当引入的文件 小于它的值（单位字节）时，就不进行代码分割了。