简介

webpack 代码分割学习笔记。

优点

同步代码分割: 减少代码冗余、提高加载速度
异步代码分割: 需要用到的代码才去加载、提升加载速度

同步代码分割

webpack3

module.exports = {
  plugins: [
      // 提取 公共 代码
      new webpack.optimize.CommonsChunkPlugin({
          name: "common",
          minChunks: 2,
          chunks: ['app', 'app2'] 
      }),
      // 提取 第三方依赖 代码
      new webpack.optimize.CommonsChunkPlugin({
          name: "vendor",
          minChunks: Infinity
      }),
      // 提取 webpack 生成代码
      new webpack.optimize.CommonsChunkPlugin({
          name: "manifest",
          minChunks: Infinity
      })
  ]
}

webpack4

module.exports = {
  optimization: {
    // == 代码分割
    splitChunks: {
      minSize: 0,
      cacheGroups: {
        commons: {
          name: 'vendors',
          chunks: 'all',
          minChunks: 2,
        },
      },
    },
    // == 多进程：代码并行压缩
    minimizer: [
      new TerserPlugin({
        parallel: true,
        // == 代码并行压缩时开启缓存
        cache: true,
      }),
    ],
  },
}

异步代码分割

// == import 动态引用模块，指定模块名称
import(
    /* webpackChunkName: async-chunk-name */
    /* webpackMode: lazy */
    './pageB'
).then(function(pageB) {console.log(pageB)});

项目地址

地址: https://github.com/yunaichun/webpack-study

参考资料

results matching ""

No results matching ""