3

目录

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

上节目录如下:

clipboard.png

什么是代码分割

先来修改下src/index.js:

import _ from 'lodash';

_.join(['a', 'b', 'c', '-']);

这里引入lodash并调用join方法,然后安装下lodash: npm i lodash
npm run build, 可以看到lodash和业务代码都打包在一起了,并且有70kb:

clipboard.png

这里就会有个问题,项目中会引入很多第三方库,这些库根业务无关,内容几乎是不会改变的,如果都打包到一起,那么浏览器想要看到效果就必须执行完整个超大的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:

clipboard.png

可以看到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:

clipboard.png

下节:代码分隔(code spliting)中


会js的诸葛村夫
282 声望617 粉丝

主angular,兼ts|webpack|rxjs|vue,擅长造轮子