目录
上节： 区分开发和生产环境
上节目录如下：
什么是代码分割
先来修改下src/index.js:
import _ from 'lodash';_.join(['a', 'b', 'c', '-']);这里引入lodash并调用join方法，然后安装下lodash: npm i lodash
npm run build, 可以看到lodash和业务代码都打包在一起了，并且有70kb:
这里就会有个问题，项目中会引入很多第三方库，这些库根业务无关，内容几乎是不会改变的，如果都打包到一起，那么浏览器想要看到效果就必须执行完整个超大的main.js文件，如果能把不会变动的代码(不管是第三方还是自己写的)，都单独打包到一个文件，且文件名每次都一样，那么浏览器以后刷新就能直接在缓存中读取，从而提升页面性能，这就是所谓的代码分割。
手动实现代码分割
这里示范一下简单粗暴的做法，为了让大家更理解什么是代码分割
新建src/js/lodash.js
lodash.js代码如下：
import _ from 'lodash';window._ = _;window上挂个属性'_'，值为lodash，这样index.js就不用引入了：
src/index.js:
_.join(['a', 'b', 'c', '-']);然后把lodash.js设置为入口，webpack/webpack.base.js:
// 省略entry: { main: './src/index.js', lodash: './src/js/lodash.js' },//省略执行npm run build:
可以看到lodash被单独打包成了一个文件，这就是代码分割
用webpack实现代码分割
先恢复下代码，把src/js/lodash.js删了，
src/index.js如下:
import _ from 'lodash';_.join(['a', 'b', 'c', '-']);webpack/webpack.base.js删掉lodash入口:
// 省略entry: './src/index.js',//省略这样代码就恢复了，代码分割的功能也没了。
然后在修改生产环境的配置，开启代码分割的选项
webpack/webpack.prod.js：
// 省略module.exports = merge(baseConfig, { mode: 'production', output: { filename: '[name].[contenthash:10].js' }, devtool: 'cheap-module-source-map', module: { rules: [{ test: /\.less$/, use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'] }] }, plugins: [ new CleanWebpackPlugin() ], optimization: { // 配置代码分割 splitChunks: { // 要分割哪些模块：all（推荐）, async(默认，只分隔异步代码), and initial chunks: 'all' } }});然后npm run build:
下节：代码分隔(code spliting)中（待更新）