webpack4.29.x成神之路（十五） 代码分割(code spliting)上

目录

上节：区分开发和生产环境

上节目录如下：

什么是代码分割

先来修改下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)中（待更新）