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)中